App Re-Design: Eatable

creating a more welcoming & intuitive user experience

Currently in beta, Eatable allows students to create sixty-second recipe videos and share them online. After signing up for the beta and taking a look at the application, I noticed a few issues in the overall experience the user interface provided.

Eatable is recipes in 60 seconds or less. Home cooks have difficulty finding convenient ways to cook — they also love to share what they create. Our mobile app platform serves as a hub for home cooks to search, share and create their own recipe videos. Eatable provides user-generated food creations in a home cooking community passionate about sharing self-made meals. — The Forge

The Process

Preliminary Investigation

Notes taken while exploring app: features, issues, conventions, changes

My first action was researching the current features and issues in the app. As I came across anything that sparked an idea, I wrote it down on the above sheet of paper. The most prevalent issues I found related to lack of minimalism, visibility, and not following system conventions (for example the sandwich menu in the original app is placed to the top right).

Wire-Framing

I then dedicated the next few hours to wire-framing changes to the UI in order to bring it closer to conventions already established and followed by other apps; this includes the layout of the bottom navigation tabs, and layout of the Action Bar / Navigation Bar. I had a general idea of each screen of the app envisioned, other than the profile page.

The user’s profile took a few tries to get right. I wanted it to be more than a list of videos and a picture; the user needs to be able to express what sets them aside from other cooks on the service. In order to give the profile more personality, I added a bio section and a banner image to the top.

The recording feature, one of the areas the user will spend most of their time and energy in, does not provide the best experience. The camera is constrained to a 1:1 ratio, taking up a small portion of the screen and distorting the recording image. The controls provided for recording are not represented with the most appropriate icons. For example, one of the features of the app is recording at faster speeds (3x time and 2x time). There were two issues with this feature:

1. How is a user to decide which speed is fast enough for them? Too much choice in this case could prove confusing and unnecessary — add constraints
2. What if the user wanted to make the video slower? This would be useful when showing steps requiring precision.
3. The icon for changing speeds is the material design stopwatch icon.

My solution for this issue was to change it to three speeds (normal, fast, and slow) and use three different icons (a person walking, a car, and a snail respectively) to represent the current state.

Mockup

Keeping the same Eatable-orange, I began mocking up my design using Sketch. Though, one of the issues I had with the original design was the orange colour — it was everywhere. I instead decided to use it for accents and the colour of the action bar. I also:

• removed the hamburger menu and instead used the bottom tab navigation to do everything that was needed. This is to remove the redundant items placed in the hamburger menu and adapt to the change back to the bottom tab menu due to the user’s thumb position
• changed the list items for videos such that they show the ingredients as well as the name of the food (instead of just the name and the user). This change was made because the user would like to see if they have the ingredients before opening the video.
• darkened the status bar colour since on Android devices the status bar is that colour when the device is in battery saver mode.

Mockup — Home

home re-design

For the home tab, I decided to:

• harmonize suggested and following into one feed. This means that the user can more easily happen upon new creators and recipes instead of looking when they are in the mood to do so.
• Hide the search bar until in use by the user

Mockup — Record

video recording re-design

The record feature is one of the most important features of the app. This allows you to create your own recipe video. In addition to the changes to the speed icon, I did the following:

• The video now takes up the full portion of the screen; the cropped view of the camera left a lot of unused space and distorted the video.
• Instead of the “hold to record” button (likely inspired by Snapchat) the regular “tap to start recording” button is used. This is because not everyone uses Snapchat, and adding this feature would only increase the learning curve. (The app did provide the option to switch between these functions)
• The icon representing completion is now just the done checkmark. The save icon has many meanings but “finished” is not necessarily one of them. Save could mean that you want to come back to this later, but the user might click on this and be surprised when they find out it instead signals the completion of the recording.
• Put a timeline bar above the recording menu. Originally the Snapchat style of showing progress (a progress while fills around the record button) was used. Believing that more can be done, I added a timeline to the top with a scrub bar to go back and forth so you can overwrite previously recorded footage. I also added colouring to show the speed of the footage (this also helps separate scenes).
• After completing the recording the user was forced to add background music, it is now optional.
• The video is now uploaded after the description is finished. This helps give the user a greater sense of accomplishment after upload instead of currently where there is still more work to be done after uploading. The user can also go about doing other things while the video is uploading instead of waiting for it to finish.

Mockup — Cookbooks

cookbooks re-design

The cookbooks tab was hidden in the hamburger menu, but is now in the bottom tab navigation. The user can also search through the list of cookbooks they have created. In addition to these, I made a few changes to how each cookbook is represented:

• Previews of the first few videos are at the top, supporting recognition over recall
• The list items take the full width of the screen, decreasing the likelihood of text wrapping (and perhaps justifying a limit on title length)
• A count on the number of videos in the cookbook

Mockup — Profile

profile re-design

The user profile was hidden in the hamburger menu and not in the bottom tab as expected. The profile image in the bottom right of the original design is used to switch between channels. The profile tab now has a stronger use of space than the previous design did.

Mockup — Video Player

video player re-design

Last but certainly not least, the video player. Initially, it did not have as much focus on the content itself but instead attempted to show two types of information at once: the instructions and the video itself. In addition to expanding the video player so it takes up the entirety of the screen I made the following changes:

• the instructions are now hidden in a bottom section; to access swipe up or press the information icon on the bottom bar.
• the bottom bar dismisses after a certain amount of time and reappears on pause
• to pause the video tap it
• there is a scrub bar at the bottom to move backwards or forwards in the video
• the icon for adding an item to the cookbooks has been replaced with the actual cookbooks icon, making it more obvious to the user what the button does.
• you can now edit or delete your video
• you can no longer like your own video

The Prototype

eatable prototype

The next step was creating an interactive prototype of the app using Facebook’s Origami Studio. The screens I focused on prototyping were those that would likely present the most challenges to the user. In order to ensure that the design was simple enough, user testing was conducted on the target demographic: post-secondary students.

The following list of tasks was given to the subject:

1. Search for a video
2. Open a video
3. Like the video
4. Pause the video
5. Find the ingredients and steps
6. Close the video
7. Record a video
8. Change the video speed
9. Navigate to your profile
10. Modify your settings

The subject was able to complete each task with no issues.

Closing Remarks

This was my first redesign and an extremely enjoyable experience — it has further strengthened my passion for design. The new interface for the Eatable is more welcoming and intuitive than the previous one, and upon opening the app the user is more likely to trust the tool they are about to use. Hopefully the creators of Eatable consider some of these changes and implement them.

Thank you for reading my first of many redesigns. Follow for more UX/UI case studies! 😄👏 — Nick Morrison