EatStreet is an app that lets you order food online and have it delivered to your place.

Project Breif

The first iteration to redesign the EatStreet app. The main goal is finding and fixing usability issues.

Design Process

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.
From left to right: before and after Home screen

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.
From left to right: before and after Cart screen

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.

Mockups for testing

Testing goals

  • 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.

Usability Results

  • 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.

Final Design

After improving the mockups with the usability test results. I exported all Sketch assets to Xcode.

Other Projects