UX CASE STUDY: INSTASHOP
Client: Instashop (UX Academy Capstone)
Role: User Experience Designer
Objective: Research grocery shopping habits and needs of users. From research, design a web application where users can do their grocery shopping completely online and have their order delivered directly to their home.
Instashop investors have determined a large untapped market for online grocery shopping.
They want to create a web application where users can do their grocery shopping completely online and have their order delivered directly to their home.
Building empathy with the user and uncovering their needs through in-person interviews and secondary research
- Learn how people shop for groceries
- Learn what frustrates people with their current grocery shopping experience
- Define target demographic
- Learn why people currently do or do not shop online for groceries
- User interviews: Interview 5-10 strangers. Use thoughtful questions to guide the interview while also allowing the conversion to flow naturally so participants share their stories and personal experiences
- Secondary research: Conduct online research to learn more about online grocery shopping apps
Research notes were then divided into categories: Doing, Thinking + Feeling, Seeing, Hearing, Pains, and Gains. This method, called empathy mapping, is a way to organize research findings reveal the problems and mindset of the users. Empathy mapping takes all the different pieces of data and creates a cohesive vision that is human-centered. It also makes it easier to find patterns across the data.
A persona was developed to present data found from research in a way that is easy to relate to and understand on a human level. It keeps the user and their needs at the center of the design process and helps eliminate designer assumptions as the design process moves forward.
Using research to define needs, ideate solutions and test preliminary designs
Defining where user goals and business goals intersect
I created a Venn diagram of Instashop's business goals compared to the goals of Instashop users. This shows how the needs of the user and business relate to each other so that going forward the design isn't overly focused on one side's needs.
Participants organized grocery items into groups that made sense to them in order to help define appropriate groups and the website's information architecture.
Sitemap & User Flow
The sitemap shows the websites architecture or structure and shows pages relationship to one another. It also helps show what pages will need to be designed and developed.
It outlines the user's journey through the website and provides the basis for what pages need to be developed. It provides an opportunity to make sure the experience is in line with the user's needs & doesn't leave out any steps in what they're trying to accomplish. It's easier to edit the flow during this phase instead of later on in the process.
User Interface Design
Using testing findings to develop high fidelity wireframes and UI kit
Mid-Fidelity wireframes were then made in Sketch to be used of a prototype made in inVision. This prototype was then used for initial user testing to reveal any pain points with the structure of the site. Testing with grayscale wireframes helps the user not be biased towards images/colors they may favor and focuses the attention on the underlying structure.