• Add to Collection
My Role
UI/UX Designer

The Project Brief
Instashop is a fictitious grocery franchise based in the United States. Although their customer satisfaction ratings have remained relatively constant over the last 4 years, their market shares have been decreasing by 8% each year. 

Through market and user research they’ve determined that this decline is most likely due to the increase in online grocery ordering & delivery products, like Fresh Direct and Good Eggs.
Discovery
My first course of action was to uncover grocery shopping and online shopping behaviors of target customers. Through observations, interviews, and surveys I was able to gather data to understand the problem space and identify a primary persona.


I wanted to know how others were attempting to solve the problem, so I performed a competitive analysis. This process gave me great insight as to what a MVP could look like and ideas for how I could differentiate the product.​​​​​​​
Interaction Design
Armed with insights from the discovery process, I first designed a card sort to discover how users organized grocery items into categories. From this exercise I built a sitemap for the website.
Using the sitemap as a foundation. I sketched out a user flow to help me think through the process as a whole and to ensure I didn't forget to include any features in the final design.


From here I mocked up some wireframes in sketch, both for desktop and for mobile. I used the sitemap and user flow to identify key screens to design first and went from there.
Using these wireframes, I put together a prototype using Invision and performed some usability tests. From these usability tests, I created an empathy map to help synthesize finings and guide the hi-fidelity design.
Visual Design
Leaning upon everything I had learned in the previous phases, I created a logo, style guide, UI kit and hi-fidelity mockups. 

Since Instashop' s market has disposable income I decided to give the brand a more high-end look and feel. 

Most other online grocery stores use green, orange, and brown to brand their products and for good reason. After seeing this pattern I felt that using a primary color of purple would really set the brand apart.

Hi-fi Mockups of the landing page in desktop, tablet and mobile.
Well, thats it. Thanks for viewing!