SUMMARY

Empathize

Surveys & Interviews
Personas
Empathy Map

Define

Storyboarding
User Stories
Business Goals

Ideate

Site Map
User Flow
Wireframes

Validate

Prototyping
Usability Tests

Background

Instashop, a grocery store franchise, wants to expand their market and customer base by creating an online presence and bringing something new to the table.

Problem

Our research indicates that many young passionate foodies often have trouble finding the items they truly want at their local store and and as a result have to settle for a less satisfying alternative. Additionally, we found that our users understand and enjoy food, but all for different reasons.

Solution

Our strategy strives to create an online environment that adapts to the user based on their needs whether its for cooking, health, or simply getting the items they want. The goal is for Instashop to be the reliable go-to grocery store for the community.

EMPATHIZE

Before designing an online presence for Instashop, we needed to understand the current market for online shopping, who the competition was, and who primarily uses the service.

We sent out a short survey to better understand user shopping habits and interviewed 4 young professionals about their most recent grocery shopping experience. We found that the participants work long hours, and would cook only if they had the time. They like to stay fit, enjoy their brand items, and are careful spenders, but aren’t afraid to spend money if it brings them value or its something they truly enjoy. A majority also go on food blogs and share recipes.

It is worthy to mention that multiple participants had found the international section of their local grocery store lacking and were frustrated that they either had to go to a specialized market or settling for cooking different meals.

This store has everything I need, but sometimes not what I enjoy.

Pain in the butt to have to go to 4 different grocery stores

Going to the grocery store is also kind of fun. I do enjoy it.

From our research, we created a persona and empathy map to bring our users alive and to keep in mind who we were designing for.

Persona - Tina Lin is a young professional who often wishes she had more time to cook her meals that she likes.

Empathy Map - Connecting with customers’ senses and emotions

DEFINE

After we had understand our customers at a deeper level and their pain points, our goal now was to define the requirements and features of Instashop.

To prime our minds, we created a storyboard of an actual user’s frustration of not finding their desired item in the international section of their grocery store and how using Instashop solved this problem.

Storyboarding

Storyboard - Ordering international items on Instashop

We defined user stories and epics to make sure the features we were creating were relevant to our users.

User Stories & Epics

User epic and its stories for delivering groceries

We continued this process and created a features matrix to map out the functionality of the site.

Features Matrix

Feature Matrix in the form of user stories

We knew our design shouldn’t only just focus on the users, but all the stakeholders involved, so we went over business and user goals to see what aligned, and came up with quantifiable KPIs to measure our success.

Business & User Goals

Business & User Goals - designing with clear goals and metrics in mind

IDEATE

With clear goals and requirements defined, we set out to design the online store starting from the information architecture and then to the UI elements on the page. For each component, we would first brainstorm with sketches and then consolidate our ideas in Sketch.

Information Architecture

Cardsorting

We began first designing the IA of Instashop by finding users to do a card sort (remotely via. Google Docs & Optimal Sort) of Instashop’s various products so we knew how to best organize the information that would be most natural to users.

Remote digital card sorting through Google Drawings

A participants card sorting results

After we were clear on how to organize our site content, we began to design the actual pages starting with a site map and a user flow of buying product.

Site Map

Sitemap - Instashop’s pages and where they live

User Flows

We created a user flow on buying eggs from the store. Like most deliverables, we quickly sketched out the idea first in order to make quick edits and get a high-level view.

Buying product user flow - sketch

Finalizing the user flow for buying any product after sketching out a draft

Buying product user flow - high-fidelity after iterations

Interaction & Responsive UI

After sketching a couple screens with crazy 8s, we made low-fi wireframes of each page of the site in the flow with iterations to fine tune the layout. We also kept in mind that Instashop would need to work on multiple kinds of device and thought things from a mobile first approach.

Instashop Responsive Homepage - Wireframes

Desktop | Width: 1280px

Tablet (Landscape) | Width: 1024px

Mobile | Width: 375px

Sketching & Paper Prototyping

To validate the interactions and flow, we also had quickly built a paper prototype to test first before building it out in Sketch and Invision.

Putting it all together

After creating wireframes of all the key screens and interactions, we put it together into with our user flow, and printed out the diagram for further discussion and changes.

Displaying buying product user flow with concrete wireframes

VALIDATION

After we had our key screens and had the flow right, we put together a working prototype on Invision and ran usability tests. We first asked users to see if they could successfully purchase ‘Organic Eggs’ with our site. We found that some users were confused with the sites labeling (ex. not immediately obvious that eggs fall under dairy.) This was a low-hanging fruit case and was a quick fix and we were happy that most users were successfully able to complete the task with ease.

Click tests were also done through Verify and UsabilityHub and it helped us validate that many people still go to the search bar first when searching for an item they know they want. This gave us confidence in our design of making the search bar prominent on the homepage.

Usability Test Results

Pictures helped me a lot.

I wanted to play around a bit more before having to sign up.

Affinity Map

We took our findings from the usability tests and created an affinity map which gave us a good idea of what we were doing right (having photos on front page) and what things we might need to rethink later on such as special user features.

Affinity map - looking for insight and emerging patterns after testing

Having validated our information architecture and interaction design, we began focusing on the visual and branding design. We created a mood board for inspiration to create our color palette and designed a logo for Instashop, which was just the name itself as we really wanted to highlight the reliability of the store and brand. We also wanted to keep it simple and have our users know they are getting exactly what they are expecting.

Branding & Style Kit

We then set out to build out high fidelity verisions for the rest of the site.

High Fidelity Mock-Ups

Reflection

Creating Instashop really made me more aware of the importance of good user research, and who the users are, as I often drifted to designing for what I think is the best instead of what the research is actually telling us. Having personas and then validating through user testing helps keeps things in perspective. If I could go back, I would have hoped to have run the interviews better.

Next Steps

Coming back to this case study, I would like to build out more screens for Instashop’s unique features such as InstaMeal or InstaNutrition and validate those features through user testing.

A grocery store personalized for your needs