1. Understanding the Problem + Research

The Problem

Good Market was losing customers because a large portion of their customers, namely young business professionals, could not make the time to physically go to a supermarket. The main goal, therefore, was to create a more convenient shopping experience for busy people.

Business Goals + User Goals

I first outlined the goals and pain points of the supermarket and the target users respectively to find overlaps.

Competitive Analysis

I then researched competitors to identify which features created the most value. I analyzed Instacart in particular since it is highly praised for being user-friendly, and I learned how the app addressed usability problems and where it fell short.

Context of Use Scenarios

After getting a good idea of the current market, I outlined when, where, why, and how the user will be using the app. Here is the resulting report that was based on the provided personas.

2. Experience Strategy

Card Sorting

The key difference in the searchability of the apps I examined during my competitive analysis was how they organized their grocery items. To understand users’ conceptual models of grocery categories, I conducted a card sorting exercise with 3 young tech-savvy business professionals and roughly grouped the results to spot similarities.

Information Architecture

After analyzing the card sorting results and how competitors categorized the grocery items, I structured the content in a sitemap.
While putting the sitemap together, I thought about how this translated to our mental models of aisles in grocery stores. For example, items on sale are prominently highlighted with special price tags in an aisle with other similar products to catch shoppers’ attention. I modeled this in my sitemap by having a section within the Department section that displays coupon deals (represented by the yellow arrows).

User Flows

Next, I examined what steps users might want to take to accomplish their goals, which looked something like this, and adjusted the sitemap to accommodate these possible actions.

Wireframes

After structuring the content of the app, I arranged the information on each page with wireframes. I utilized the Teracy wireframe kit in SketchApp.

Wireframe User Testing

Once I mocked up the wireframes, I created an interactive prototype to see how it performed with real users. Users were asked to accomplish three tasks: 1) signup, 2) find a product, 3) add it to the shopping cart, 4) checkout. I then further refined my design with the resulting findings.

3. Visual Design

Logo Design

For Good Market’s logo, I selected bright, fresh colors that models healthy and fresh groceries, used a modern geometric font to appeal to the young business professionals, and shaped the shopping basket as a G to stand for Good Market.

UI Design

Following the friendly colorful look of the logo, I fleshed out the wireframes to design the user interface. You can interact with them on InVision or below.

Reflections

As with any e-commerce website, there were a lot of user interactions to think about when designing this application, so this project was challenging and fun at the same time. I narrowed my scope to just the mobile app to focus on the variety of these possible interactions that are only possible on mobile. Next time, I would like to tackle designing responsively from the beginning.