Good Market Mobile App
This is a personal project completed through DesignLab, with a fictitious client, Good Market. My role in the project began after Good Market conducted some market and user research, and defined their problem and goal. The problem 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 goal of Good Market was to create their own app 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
By the time I came to the project, Good Market had 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. By combining Good Market's research and additional research I did on millennial shoppers, I created a user persona in order to empathize with users.
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.
To begin to understand how users interacted with produce categories, I performed a card sorting exercise on hypothetical 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.
Hypothetically, the Good Market team saw the site map and wanted me to identify the paths that a user would take through their product to complete each task. So Good Market provided the following situation: 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. To further define the steps that Jason would take to accomplish this task, I created a user flow.
With the above user flow in mind, I created initial wireframes.
Even though this is where my DesignLab project officially ended, I decided to further develop the project on my own, using the design thinking process I had learned.
Before I began the high-fidelity prototypes, 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 prototypes.
I created high-fidelity prototypes with the following parameters and user flow 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 created an interactive version of the high-fidelity prototypes in InVision in order to begin user testing this scenario. 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 user test how busy professionals interact with it
• Iterate and user test before handing it over for implementation
Photography Credits: Unsplash.com