Instashop
Instashop is a traditional brick and mortar grocery store chain in the United States hoping to launch an online shopping experience to remain competitive with rivals after noticing a steady 8% decrease in market sales annually for the past 4 years.
CHALLENGE:
Create a responsive design that can be accessed from multiple devices so users can shop when they have the time from wherever they would like. A key component of the design was determining what aspects of in person shopping individuals currently value the most and should be included in the online experience.
CLIENT: DesignLab
ROLES: UX, UI, Branding
TOOLS: Sketch, OptimalSort, InVision, Verify,
Usability Hub
RESEARCH
Competitor Analysis
Coming into this project, I had limited knowledge of online grocery shopping being an avid brick and mortar shopper myself. Because of this, I spent a little bit more time exploring the problem space and Instashop’s competitors to determine what gaps could be taken advantage of.
Provisional Persona
After gaining a better understanding of WHAT Instashop could offer, I started to look into WHO Instashop’s current audience is. First, I wanted to capture my initial thoughts of who I envisioned the potential users to be in the form of a provisional persona.
Persona and Empathy Map
Using this representation of who I thought the target audience was, I went out into the field and tried to find and observe these kinds of users - what they did, why, what they avoided, and what their general attitude towards grocery shopping was. Wanting to learn even more, I found 3 people who were willing to talk to me in person, and here are some of the things they had to say:
“I look for which register will get me out the quickest.
I’m not there to look around - I’m on a mission.”
“I prefer to shop at clean, well stocked and organized stores and trust my
cashiers more when they don’t have piercings, tattoos, or crazy hair colors. ”
“I like to plan out my meals for the week to save time later on
and build off of what I already have in the fridge and
pantry where possible.”
“Being able to get the food I need at the prices I can
afford - that’s what I would love.”
I combined all of these findings into a final persona and empathy map:
Structure
Card Sort, Site Map, and User Flow
After determining WHO I was designing for, it was time to further clarify WHAT would be designed and HOW.
To figure out how products would be grouped within the navigation, I conducted an open card sort on OptimalSort with 30 items ranging from bananas and baby carrots to smoked salmon and pecans. The 4 participants all agreed on the placement of 20% of the items and created an average of 7 categories.
From the card sort I began to branch out and develop other organizational elements such as a sitemap and user flow:
As you can see, there are a couple of main ideas at play in these diagrams:
To explore new recipes an option to either enter the discover or shop portal is offered on the home screen
For easy meal planning from the home screen users were offered the option to shop by meal or department as the first way to narrow down the results within the shop portal.
To help save money a coupon feature was added to product pages and a carousel displaying featured items placed on the home screen.
Low Fidelity Wireframes
These concepts were further illustrated and expanded upon in these wireframes:
Usability Testing and Affinity Map
To test the design on others and see what aspects of the design resonated with users and which needed to be modified or taken out all together, I first created an interactive prototype in InVision. After that I drafted up a few tasks and scenarios for participants to complete during in person tests - log in, locate a product, place it in the cart, and check out. Remote usability tests focused more on the product gallery’s content placement and navigation style.
Key Findings:
People rely on searching for products rather than manually finding them a lot more than I anticipated.
The Discovery tab label was confusing and few participants said they knew where it would take them
Participants were wanting to add items to their cart directly from the product gallery instead of having to go into the product page.
The quantity slider was a confusing interaction for most, who preferred the + and - selectors utilized in the cart
Visual Design
Branding & Style Tile
To define the aesthetic direction Instashop should be taken in, first a branding exploration was conducted to serve as the cornerstone around which the rest of the design would revolve. Many different directions were explored as shown below, but the final logo arose from a set of utensils transposed to form the letter A in the word Instashop. I felt this mark best reflected a sense of friendly, efficient minimalism that users would respond well to and directly related to grocery shopping for better recognition and comprehension.
Sans Serif fonts and a subtle palette of black, grey and white with an accent of yellow was chosen to align with the clean, minimalist look. Additionally, by limiting the palette to a single bold color, sparingly used throughout the design, the product images themselves are able to shine having less to compete against.
High Fidelity Wireframes
Based on feedback gained through usability testing, a final set of high fidelity wireframes were drafted. Some of the changes incorporated into these screens include:
Replacing the discover portal with recipes at the bottom of the Home screen
Add to cart and list CTAs placed on the Home and product gallery screens
Replacing the featured product carousel at the top of the home screen with a hero image and search bar
