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-to-use, productive, enjoyable and convenient, and helped the client stand out from other grocery delivery services. I was the sole UX designer on this project and was responsible for user research, interaction design, user testing, wireframing, prototyping, and UI design.
My Design Process
I followed human centred design and lean UX design thinking process to make sure that my design decisions were supported through user research and feedback.
Empathize & Define
Using both qualitative and quantitative research methods, our research started off by secondary (market) research to uncover existing information. Within this, I conducted competitive analysis to see strengths and weaknesses of similar companies. I then moved onto user interviews using contextual inquiry methods in a similar, local grocery store with 3-5 customers.
An overview of my research questions are listed below:
1. Who is online shopping for groceries?
2. Why does someone shop online for groceries?
3. What do people enjoy about shopping online? What do people enjoy about shopping in physical stores?
4. What do people not enjoy about shopping online?
5. How many hours a week does someone spend a week grocery shopping?
I executed a competitor analysis, using a feature matrix for InstaShop’s top 3 competitors. Each competitor’s product feature was analyzed and divided up into one of four categories, on a 2×2 matrix.
Persona and Empathy Map
Based on the data collected in the research phase, an empathy map and user persona were created. For the empathy map, I focused on the what the users said, thought, felt and did, and distilled the users insights and needs from the research findings.
Based on the users insights and needs, as well as the ethnographic, demographic and psychographic information distilled through the previous research, the user persona was created.
Leveraging the user personas, and synthesized data from the user research phase, I created a sitemap, user flows and wireframes.
To start the IA process, a card sorting exercise was performed with users to gather further insight into the site architecture. This exercise determined the most common categories amongst a selection of curated content.
A sitemap was created based on the results from the previous research and the card sorting exercise.
The sitemap focuses on top-level navigation and categories of sub-level pages. The shades denote the different levels of hierarchy
Based on the user research findings and UI requirements, a selection of wireframes were built out. These wireframes were built in a responsive framework, including a version for desktop, tablet and mobile. Annotated Wireframes were additionally created to ensure proper communication of various UI features.
Once a framework was set, a selection of additional mobile wireframes were mocked up. The mobile wireframe set was used for user testing.
Once the wireframes were ready for testing, user testing was conducted with 15 participants through multiple platforms. Test subjects were chosen who fit the persona demographic.
In person testing was done using a prototype software called InVision; online usability testing was done through Usability Hub and Verify App. With InVision User Testing, a prototype was made in the Invision App, and a detailed usability testing plan was referenced to instruct the participants through completing 5 different tasks. Usability Hub is an online user testing platform that generated 5 random participants for completing two tasks. The tasks included a memorability test and a click test. Verify App is another online testing platform, and the test was sent to approximately 10 people. The tests here included another memorability test and click test.
Test findings were compiled into an affinity map which will serve as a guideline for our next round of design iteration. The Affinity map includes “Recommendations” and “Changes to Implement”. The changes to implement are listed below as well.
- Add a “My Account” profile icon to the global navigation for quick access to sign in
- Revise the menu page; move the sign in and create an account CTAs closer to the top
- Adjust filter labelling on category pages (falls under content revisions)
- Adjust the “remove from cart” action on the Checkout page to be more intuitive
- Conduct an A/B test with the cart icon action. One option will have a pop-up with quantity and confirmation, the other have the cart icon highlight.
Reflection and Next Steps
A design is fluid, in a constant cycle of testing and iteration. At this stage of the design, I will roll out the wireframes to all desktop and tablet pages, and continue user testing on those screens. Once I have iterated on the design with my findings, I would apply the design to all pages and do a final round of testing once all screens were in a similar, near-final state.