In 2016 it was predicted that one third of online shoppers would buy their groceries online. This growing trend offers potential opportunities in the local online grocery shopping industry, grounded in research to identify potential customers and understand what drives them to shop online.
Instashop, a U.S.-based grocery chain store, has had a yearly 8% decrease in market shares over the past four years. The store is looking to expand their market by researching, designing, and implementing an online grocery shopping service in order to expand their market share and continue to meet customer needs.
The goal of this project was to design a web application for an online grocery service that was easy, quick, and convenient, and helped the client stand out from other grocery delivery services. I was the sole designer on this project.
Secondary research report
Competitive analysis
User interviews
Card sorting
Remote & in-person usability testing
Personas
Empathy map
Storyboard
User flow
Business & consumer goal alignment
Feature matrix
Site map
User flow
Wireframes
Prototyping
Testing
Competitive advantage
Logo design
UI visual design
Responsive design
The first step in the design thinking process for Instashop was discovering the target audience, and determining their needs, goals, behaviors, and motivations.
To better understand the current online grocery market industry and competition, to identify consumers (who they are and what they care about), and to explore what features or services an online grocery business could provide that would improve consumer lifestyles.
Defining customer’s POV, motivations, and needs is key to keeping the user at the center of the design process, and building an application that satisfies both business and consumer goals.
In this phase, a content strategy was created and design ideas brainstormed based on collected market research data, competitor reviews, and feature analysis.
Iterated wireframes were exported into prototyping applications to build digital mock ups (prototypes) that can be tested on users.
Wireframes were imported into InVision to create an interactive web flow from landing page through check out page. I wrote and executed a usability testing plan, to determine the objectives of testing, process, and testing script.
The iterated wireframes and prototype were tested with users in-person and through online, remote user testing platforms (Verify and UsabilityHub), and included Click Tests and Preference Tests.
Based on quantitative and qualitative data from in-person and remote usability testing, the following design iterations were implemented and re-tested:
Design iterations (and re-testing)
• Implement new Department design into prototype
• Original Check Out Summary page is preferred and does not need to change
• Add a notification icon (number) on product image when the product has been added to cart
• Switch the home page carousel image to a sales flyer
• Cart / reciept page analysis and further discussion
• Confirmation page: include a confirmation code
Feature opportunities to discuss in the future
• Customer reviews on product page
• Organic item filter
• Ability to compare multiple items (by price, reviews, etc.)
Leveraging the client's brand attributes and modern design inspiration from Dribbble, Behance, and Pinterest, I created a brand mood board and moved pencil-on-paper logo sketches to high-fidelity mock ups in Illustrator. After testing multiple style tiles (style guides), I chose a color palette, typography, and imagery that was modern and helped the Instashop brand stand out from competitors.
A design is fluid, in a constant cycle of testing and iteration. Based on quantitative and qualitative data from in-person and remote usability testing, the following design iterations will be implemented and re-tested:
