Once a clear content inventory was established, I sketched out wireframes for the main user flows, then digitized using Adobe XD. A clickable prototype was created with ~80 wireframes and two rounds of usability testing were conducted.

During the testing, users were asked to complete three tasks based on the five main user flows: sign up for an account, search for recipes, then shop for the ingredients. Some major testing results and iterations are summarized as below:

• Some copies used in onboarding, alerts and buttons were modified to be more specific about the actions and link destinations, provide clear instructions/information to better guide users through the task.
• For users to select stores to shop from, a map visually showing store distances is more straightforward than numbers in a list.

• Users commented that they would like to see more information on the products they were shopping for, and wanted to know right away how much the order would cost. So I added a fixed footer that shows the updated total amount and other costs.
• The Basket screen shows store and grocery information for users to edit, then choose how to get the groceries. It was observed that users get overwhelmed by the amount of information provided because they tend to scroll through the entire screen right away to obtain a general idea of what they can do next instead of following the intended top-to-bottom shopping flow. Also, users commented that the concept of Basket confused them as it also contains a checkout process. Therefore, the store selection and product editing were divided into two steps, and checkout was separated out into a standalone process.

The logo evolved through several rounds of iterations based on feedback from Preference Tests. The goal was to create a unique, simple, versatile logo that symbolizes the brand identity as an assistant in cooking and grocery shopping.

Finalized YumX Logo

Colour Palette

Colours express emotions. Red and green are the most pleasant colours to boost people’s appetize. The combination is vibrant and energetic. With the green being toned down as the primary colour, it establishes a friendly, reliable feeling, as well as a clean look.

Typography

Typeface Oxygen was chosen for both large and small font display. Its geometric round shaped structure resonates with the app logo and provides a clean and minimal look especially for the information-intensive screens. Oxygen is also a sans-serif typeface with a large x-height, which guarantees a good readability on mobile devices.

Aside from the major user flows, tasks such as posting photos, using app credits and other features were also tested in Maze with ~15 testing results collected for each round of iteration. Heatmaps and paths generated from the test results helped pinpoint issues on both visual elements and layouts.

Key Findings & Solutions

• The main design challenge that went through rounds of iterations was the transfer of ingredients from a recipe to Grocery List, then to Shopping Bag for editing. At first, options were given in a notice to stay on current screen after adding ingredients, or go to the destination. It was observed that the notice caused bouncing between screens and determined to be necessary. By removing them, users get to the destination screen immediately without the need for a second thought whether to stay or not.

• Although the process was made less overwhelming, the concept of Basket, later changed to Shopping Bag for better understanding, still caused confusions. Users had difficulties in understanding where the items will be once added/deleted items, or cancel an order halfway.
  A tutorial screen was added to help with the confusion, but users tend to jump right out of any instructional modals. So I went back to revisit the in-app purchase user flow while re-imagining the entire shopping process with all the possibilities. It was found that although holding unfinished orders in a Shopping Bag was a function that most of the e-commerce sites have, however, in the case of this app, once users decided on the items to buy from the Grocery List, it was more natural to finish the checkout process or cancel the deal altogether. So the extra status of saving orders in the Shopping Bag was redundant. Changing it from a ‘physical’ place in the app to a ‘stage’ that only exists right before the checkout process reduced users’ cognitive load.
  As a result, the in-app purchase flow was simplified after all the iterations. And the test results showed a much better success rate of the task.

• Because users were unfamiliar with the Pantry feature, the initial attempt was to introduce it with an alert window when adding items for the first time. However, it seemed to interrupt the flow and caused confusion when users stopped to read it and found the content was not related to their immediate tasks. Also, it was not very helpful for understanding the Pantry feature because users forget about reading it after finishing their task that didn’t involve using it.
  That was when I came across an article, in which the author interpreted the Yerkes Dodson Law as “ideal engagement allow or assist in user’s intrinsic motivation. But over-stimuli brings down productivity.” This made me revisit the necessity of the feature of adding items to Pantry from Grocery List and Shopping Bag in the flow. Upon realizing the bonus feature was interrupting users' immediate goals, I decided to completely take it out. And fewer struggles were seen on the task.

• When users select stores in the onboarding stage, they were questioning the correlation between map pins and the listed stores. And they thought only one store can be chosen.
  So I made the following changes:
  Extra screens were added to show the change of status when users tap on a pin or a store card: A bubble pops up pointing at the store location on the map, the card is highlighted and scrolls to the top of the list.
  Changing the look of the checkboxes to eliminate the confusion with radio buttons.

• When the search bar is activated, search histories are displayed on a blank background as shortcuts. Once started typing, the search suggestions were displayed in a dropdown box from the search bar with recipes displaying on the background. During testing, users expected the background recipes to be updated while typing, which was not intended for. So in order to reduce the distraction, all the search background were changed to blank while the search bar is in focus until users press Go to confirm the input. Only then the page will be refreshed with search results.

Marketing Website

With all the product features, identities, style guide and Hi-Fi prototype ready, the idea of creating a marketing website came up to me. The website will be a place to provide users with a preview of app functionalities in a more attractive and interactive way than app stores. It also functions as a channel to introduce the company’s mission and vision, connect with customers, as well as potential business clients (next stage of the app if time permits).