EatStreet is an app that lets you order food online and have it delivered to your place.
The first iteration to redesign the EatStreet app. The main goal is finding and fixing usability issues.
The design process consisted of three main steps:
- Analyzing the app main flows
- Defining usability issues
- Usability testing
Analyzing the app main flows
I examined the user flow of the current app and broke it down using a flowchart diagram. That helped me look at the app from user decision making standpoint not from specific screens standpoint. Also, I looked at competitors’ apps to get insights. View flowchart.
Usability issues in Home screen
- The app employed two ways of navigation. The bottom bar offers access to Home and Cart screens. Where the “hamburger menu” on top left offers access to Account screen. I switched the navigation to be in the bottom bar only.
- The “use my location” icon looked like the main call-to-action after typing an address. I improved it by making the “use my location” button less prominent and “Find restaurants” button more prominent.
- The “Address book” button label was a bit confusing. So we decided to use “Saved addresses” to remove confusion and be consistent with other EatStreet products.
Usability issues in Cart screen
- “Remove item” button could be tapped by mistake and it was not recoverable action. My solution was to having users swipe left the cell to remove items.
- There is no clear indicator to edit menu items. I added the “>” arrow to indicate the ability to click and edit.
- Restaurant name is not shown. Which is an important piece of information to users.
Testing mockups with users
When I finalized the mockups, I used Flinto to make the mockups interactive. To prepare for user testing, I started working on the interview guide. We tested the mockups with 4 users.
- Test the general app flow of placing an order for current users.
- Test adding filters functionality to the Restaurants List screen.
- Find out what are the main criterias in sorting restaurants list content.
- The general flow for placing an order was straight forward. However, we hoped to explore more corner cases to uncover potential usability issues.
- Some users liked the ability to filter restaurants based on Delivery/Pickup or based on available coupons and food specials. For time and resources constraints we were not able to implement the filters screen.
- Users preferred to sort the restaurants list results as follows delivery minimum, rating, then distance.
- Some users voiced the idea of have the ability of re-ordering the same food they order frequently. We kept the idea in mind for future exploration.
After improving the mockups with the usability test results. I exported all Sketch assets to Xcode.