Good Market Mobile App 
Good Market is a medium scale grocery franchise based in the United States. Although their customer satisfaction ratings have remained relatively constant over the last 4 years, their market share has decreasing by 8% each year. If they continue at this rate for another year or two, they’ll be forced to shut their doors. Good Market believes that if they allow their customers to shop and buy their products online, they can expand their customer base and market share. The Good Market app is a shopping tool that helps customers quickly and easily shop and purchase their groceries online, and then have them delivered promptly at little to no cost.

Role: User Experience Designer, User Interface Designer 
Programs Used: Sketch, InVision, CanvasFlip, Photoshop, Illustrator, InDesign

Persona
After Good Market observed customers in their stores, and talked with users of competing products, they have determined that busy young professionals make up a large portion of their product’s target market. By combining Good Market's research and research I did on millennial shoppers, I created a user persona.
Competitive Analysis 
I then 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 in-depth competitive analysis here. 
Card Sorting
I performed a card sorting exercise on hypothetical users (busy professionals) 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.

Application Map
I created an application map of the Good Market app with key features and functionalities included as the app's key screens. 
Workflow
Jason, my user persona, 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.
Wireframes
With the above workflow in mind, I designed initial wireframes.
Style Tile
Before I began the high-fidelity prototypes, I created a style tile for inspiration. 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.
High-fidelity Prototypes
I created high-fidelity prototypes with the following parameters and workflow in mind: The user browses 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 created an interactive version of the high-fidelity prototypes in InVision. Try it yourself here.

Taking it Further
Steps on how I would take this project further: 
•  Design different use cases for a complete Good Market experience
•  Build a more complete prototype and review how busy professionals interact with it
•  Iterate and user test before handing it over for implementation
Photography Credits: Unsplash.com
Back to Top