Instashop is a fictional brick and mortar grocery market, who despite glowing reviews and steady business, have been noticing a steady 8% decrease in market sales annually for the past 4 years when compared to competitors. They believe that with launching an online grocery experience will help them receive more business and bridge the gap between their competitors. 
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.
Phase One: Research
After creating a research brief and an interview guide I went out to the Stop & Shop to interview various shoppers about their grocery shopping habits as well as their online shopping habits. The follow are key takeaways from the interviews:

1. The most common pain point that majority of shoppers mentioned was that grocery shopping was too time consuming.

2. When coming grocery shopping majority of the people have a list or a specific thing in mind that they are purchasing.

3. A lot of shoppers felt overwhelmed by the amount of offerings the market had, often losing track of where they were and walking around in circles to find the desired product.

4. When shopping online and deciding between products the deciding factor came down to peer reviews.
Competitors Analysis
Being only a brick and mortar grocery shopper I was not familiar at all with this market space and the solutions that are currently offered. I knew I need to do an analysis of InstaShop's competitors to better understand the current solutions and discover any potential gaps that could be taken advantage of.
Phase Two: Define
Persona, Empathy Map, & Storyboard
From the interviews I conducted I compiled the information that I received and I created a persona from it, to better understand who InstaShop would be for. After creating the Persona I put together an empathy map to really empathize with the user. To further the expand on the connection to the persona I created a storyboard of a day in the life of the persona and a problem that was being encountered that could be resolved with InstaShop.
Feature Matrix
After understanding who I was designing for I came up with features for InstaShop with the persona in mind. 
Card Sorting, Site Maps & User Flow
After determining who I was designing for it was time to figure out what was being designed and how it should be designed.

A card sorting exercise was done using where the participant was given a list of 30 grocery store items for them to sort and group together how they see fit. From this exercise I was able to determine that the majority sorted the cards based on how they were sorted in a brick and mortar store. Using this information as my basis I created a site map with the categories sorted as the participants had.

Following the site map I sketched out a user flow of someone adding an item to their cart and going through the checkout process of InstaShop.
Once I had a solid understanding of how the site was to be laid out I began putting together wireframes for the website, going through multiple iterations.
Usability Testing & Affinity Diagram
The next step for me was to create a lo-fi prototype on inVision too see if my wireframes and my overall structure made sense. The objectives for the test were: 

1.) To determine if the users could navigate through the site easily 
2.) To determine if could add items to the cart and check out easily
3.) To receive feedback from users

Have a click through the prototype below.

From the testing I was able to determine where the the successes were and where users ran into difficulties and visualized that into an affinity diagram.
Phase Three: Design
Branding, Style Tile, & UI Kit
Moving into the visual design side of things I sat down and began to think of what direction I wanted to take this project. Since this was going to be a grocery store at its core I wanted to convey the idea of freshness and vibrancy to the users. 

I went through multiple logo iterations before finally deciding on the avocado. From there I put together the style tile with a minimalistic approach to the web site in mind. I decided to use just the green as the primary color of all the elements on the web site so that all of the attention would be directed towards the images. Futura was my choice for the typeface because I wanted a clean sans serif typeface to further support the minimalistic theme of the site.
UI Design
Given the success the lo-fi prototype had during the tests I decided to keep the final screens true to the wireframes with a few improvements in the patterns and the errors that were encountered in the tests. In the tests all of the participants searched for items through the search bar, none had even tried to use the menu to look for items through the categories, because of this I moved the search bar from the navigation, made it float above the header image, made it larger. 
This project was definitely a great learning experience for me, it was eye opening to see just how much research and analysis goes into a design behind the scenes. Information that is gathered from surveys, interviews, and testing all drive design from the overall structure to the placement of the search bar.

Next steps for this would involve creating more key frames and conducting more testing using prototypes of different functionalities before final client handoff.
Back to Top