Ironhack Project 3 — UI Challenge Redesign An App
The third Project in the Ironhack bootcamp required us to redesign the UI of an existing, relatively well known app over the course of three days. We were only supposed to redesign the user interface of an app, not change the content of the app or doing any changes to the existing user experience. Our first task was to copy the user interface of three screens from the app. Then we performed a heuristic analysis, an analysis of a few competitors and finally we redesigned the three screens we replicated inside figma.
I chose ‘Tasty’, a cooking app by the American internet media, entertainment and news company.
Creating a replica in figma
The first order of business was to create a clone of the existing UI inside figma.
Original (left), Clone (right)
Original (left), Clone (right)
Original (left), Clone (right)
The homescreen of the app features a scrollable list of tiles with recipes and recipe collections. The tiles are side scrollable until the ‘recent’ recipes section begins, then the user can only scroll down.
Tapping on the search bar opens the categories screen, where the user can filter by difficulty, meal type, occasion, cuisine and so on. There are many categories and it is worth to mention that the user is able to combine categories, for example one could look for a dinner in a specific cuisine that has a prep time of less than 30 minutes.
The next screen shows a manual search for Crème brûlée. The search screen is similar to the home screen, a list of tiles with titles.
The recipe screen shows a video where each step of the recipe is done with a short text explaining the step. There is no commentary in the video. Also one can adjust the amount of servings inside the app. There is also a featured tip by a user for the recipe. The bottom of the page shows a detailed step by step guide for the recipe.
The app has a navbar with two options, one for ‘discovery’ and one for the users profile.
The featured large tile has a background in turqoise blue (#79DCF1). The accent color which is used in the category buttons is a shade of red (#E40754). The neutral color is grey (#EFEFEF), which is used in lines, unselected buttons and search bars. The font used in the app is Proxima Nova in either extra bold for headers or regular for text. The app uses mostly minimal outlined icons.
Competitor Analysis
The competitors, Kitchen Stories, Cookpad and Yummly are similar in features albeit different in their UI.
Left to right: Kitchen Stories, Cookpad and Yummly
UI Redesign
I left the main screen as is, except I removed the side scrolling feature and rearranged the tiles that would have been off the screen downward.
Original (Left), Redesign (Right)
For the screen with the category buttons, I made the buttons round and added pictures for each category. I also added a search field for the categories.
Original (Left), Redesign (Right)
For the ‘Search’ Page, I changed the list of tiles to a list with titles and information on the left and pictures on the right.
Original (Left), Redesign (Right)
I kept the actual recipe page as it was in terms of layout. I reduced the size of the font below the recipe, however.
Original (Left), Redesign (Right)
That was it! Thank you for reading. As this was the first solo project of the bootcamp and had a three day time constraint it gave me more freedom in terms of what to focus on during the whole process. I learned a lot about my UI skills and what to improve on and was a very interesting approach to the topic of UI.