Good Market Case Study
ROLE: UX/UI Designer (Interaction Design, Visual Design)
CLIENT: Good Market
TIMELINE: 30 hours
THE CHALLENGE
My role in the project began after Good Market conducted some market and user research, and defined their problem and goal. The challenge is that though Good Market's customer satisfaction ratings had remained relatively constant over the last 4 years, their market share had been decreasing by 8% each year. Good Market believed that if they allowed their customers to shop and buy their products online, they could expand their customer base and market share. 
THE RESULT
An app that helps customers quickly and easily shop for and purchase their groceries online, and have them delivered for little cost.
Defining the Problem
Methods: Persona, Competitive Analysis
BACKGROUND
By the time I came to the project, Good Market had already conducted research by observing customers in their stores, talked with users of competing products, and determined that busy young professionals make up a large portion of their product’s target market. I also analyzed existing products that are similar or in competition with Good Market to learn what solutions exist, what works well, and what can be improved. The mobile apps I reviewed included Instacart, Hello Fresh, and FreshDirect. You can view the  competitive analysis here. 
By combining Good Market's research and additional research I did on millennial shoppers, I created a user persona. 
Information Architecture
Methods: Card Sorting, Site Mapping
To begin to understand how users interacted with produce categories, I did a card sorting exercise with users to see how they naturally categorized products that would be sold on the Good Market app. I looked for what patterns emerged and if there were any discrepancies. Overall, the hypothetical users categorized items in similar ways. View the card sorting results.
In order to continue thinking of how users would interact with not only the produce categories from the card sorting exercise, but also other necessary parts of the app, I created a site map with key screens that included features and functionalities. 
Interaction Design
Methods: User Flow, Wireframes, Style Tile, Prototype in InVision
USER FLOW
I created a user flow with Jason, my user persona, in mind. The scenario is that he is ordering groceries online for the first time. He downloads the Good Market app, which he heard about from a friend, browses categories to find the groceries he needs, and adds them to the cart. Before he can complete his purchase, he needs to sign up for an account. He quickly signs up and continues. He enters his shipping address, credit card information, and schedules a delivery. He reviews his purchase, places the order, and receives an order confirmation. 
WIREFRAMING
With the above user flow in mind, I created initial low-fidelity wireframes.
STYLE TILE
Before I began the high-fidelity wireframes, I created a Style Tile. The colors communicate friendliness, ease of use, and freshness. The art direction of the photography includes plenty of white space and vivid colors. The sans serif typography and use of one font (not including the logo font, called Lobster) contributes to the simplicity and cleanliness of the layout. These visual design choices contributed to Good Market's goal of creating an app that is easy to use, and gave me visual design elements with which to build the high-fidelity wireframes.
HIGH-FIDELITY WIREFRAMES
I created high-fidelity wireframes applying the colors, icons, and fonts from my Style Tile. I kept the following tasks in mind: Jason browses the categories to find the groceries he needs (in this case, an organic pineapple), and adds them to the cart. Before he can complete his purchase, he needs to sign up for an account. He quickly signs up and continues. He enters his shipping address, credit card information, and schedules a delivery. He reviews his purchase, places the order, and receives an order confirmation. I annotated the wireframes to further think through the process.
I brought the high-fidelity wireframes into InVision in order to begin user testing the high-fidelity prototype. You can view the high-fidelity InVision prototype below.
Photography Credits: Unsplash.com
Back to Top