This project is the second iteration to improve the EatStreet iPhone app.

Project Goals

From my experience leading the design of previous app version, I started this project with five goals in mind:

  • Build consistent UI library & Update visual design
  • Improve the UX of Menu and Restaurant List screens
  • Make assets look sharp in all iPhone sizes
  • Expedite the design and development process
  • Improve usability of Checkout process

Build consistent UI library & Update visual design

I defined a list of common UI elements that appear in the app repeatedly. Also, I defined a typography scale for all text. Then I picked a grid to base the common UI elements on.

Main UI elements in the design of the app. Some elements were added throughout the project

Improving the UX of Restaurant List

Restaurant cells had many possible states which introduced useless whitespace. For example, some restaurants has “rewards” tag and some don’t. To tackle the problem:

  • I mapped out all states and labels using a mind map tool.
  • I designed a list of all possible states of the Restaurant cell. This allowed me to make sure all cells will look organized and concise in all states.
  • The developer made each restaurant cell auto-size based on its content. Which removed unused white space and led to showing more restaurants on screen.
Mind map of restaurants List content
From left to right: before and after Restaurants List screen

Improve the UX of Menu Screen

Group order and Rewards buttons might be shown or hidden based on the restaurant offering them or not. To make sure the UI is not changed significantly if those buttons are removed. I did the following:

  • I added two states for “Hours & Info” button when Group ordering is enabled and when it’s not.
  • For Rewards button, I placed it where if it’s hidden it will not affect any elements around it.
From left to right: before and after Menu screen

Make assets look sharp in all iPhone sizes

The previous version of the app was designed before iPhone 6 and 6 plus large screens. In order to make all assets look sharp in all iPhone sizes I did the following:

  • I previously used images for buttons for the ability to add corner radius to them. In the new app, I only used native UIButtons and styled corner radius in Objective-C code.
  • I used Auto Layout in Xcode which guarantees all UI elements will adapt to any screen size.
  • I exported all icons and assets to PDFs at 1x size. Xcode will handle producing the 2x and 3x sizes of any asse, which expedites the design process.

Expedite the design and development process

In previous workflow we used Phabricator to track tasks. In Phabricator there wasn’t a centered flow to share mockups with developers. After some research I suggested using Trello and the developers liked it. Trello has the ability to attach mockups to each task. So developers can easily know what a screen will look like in different states.

I initially used Atomic, a prototyping tool, to help developers navigate complex flows. Unfortunately Atomic was not integrated with Sketch. So I decided to stick with Trello for time constraints.

Example of a Trello task showing three states of Menu header

Improve usability of Checkout process

I Improved the readability of content and grouped relevant content together.

From left to right: before and after Order Details screen

Final Design

Other Projects