A Responsive E-Commerce Market Place

Target User

Health-conscious busy professionals needing a convenient and reliable way to order groceries.

Goal

To provide customers with an unparalleled online grocery shopping experience.

My Role

User Research, Interaction Design, Visual and UI Design, Branding

Research

Research Plan
Secondary Research
Interviews
Surveys

Strategy

Persona
Empathy Map
Storyboard
Business and User Goals
Feature Matrix
Card Sorting
Sitemap & User Flow

Interaction Design

Design Patterns
Responsive Wireframes
Sketches & Prototypes
Usability Testing
Affinity Map

UI Design

Logo & Icon Design
Style Guide
UI Kit
Key Mockups

Background

FreshTree Market (formerly 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 research, they’ve determined that this decline is most likely due to the increase in online grocery ordering & delivery products.

The Challenge

FreshTree is now ready to join the online marketplace as they believe by allowing customers to shop and buy their products online, they can expand their customer base and market share.

The focus of this project was to first gain a deep understanding of the problem space by researching and exploring the online grocery shopping domain.  By then conducting user research to understand why and how users shop, work toward a solution in regaining FreshTree's market shares.

Process

In order to gain a deep understanding of this problem space, an integral first stage of design thinking is answering these questions:

Who are we designing for?
Who are our potential target users?

Research

 Initially conducting secondary research, existing information and data were gathered about the online grocery domain in order to learn about the industry, the current trend, and to identify target users.

Competitor analysis of other well-known online grocery stores were also done to gain more insight on their delivery services, with the goal of discovering potential opportunities for FreshTree.
In order to learn about Fresh Market's potential audience and what's most important to them, empathy research was conducted by listening to user stories, thus gaining insights on their motivations and needs. Observations were also done at  local grocery stores to uncover potential concerns and frustrations customers may encounter.

To gain an in-depth understanding of user behaviors and their habits, needs and what drives them, User Interviews and Surveys were then conducted.

User Interviews

In-person interviews were conducted with 8 participants who frequented grocery stores. The interviewees represented a range of potential target groups in order to gain deep understanding on their behaviors, needs and motivations.

of respondents currently do not purchase groceries online

Survey Results: Key Findings

There were 59 online survey participants.


See Survey Results Here: 

Key Insight Discoveries

From talking to users, most were busy professionals with limited time. None of the them particularly enjoyed going grocery shopping in-store due to long lines and overcrowding, but did it out of necessity and habit. None of the users interviewed have ever purchased groceries online before.

As much as they would love to save time by ordering their groceries online, they are hesitant due to: the inability to touch and smell the products, the inability to handpick produce and meats, and concerns over freshness/quality, delivery time and costs.
Based on the collected data and research, we now can discover who is our target market, and create a primary persona to represent this target group.

STRATEGY

Persona

Meet Marcela Khan, a 30-year old account executive residing in New York.
She is a busy professional, works +40 hours, and is married.

Empathy Map

 An Empathy Map was then created to help us dig deeper in empathizing with our target users, represented by our persona, Marcela, by trying to ‘walk in her shoes’.

StoryBoard

Another method, called storyboarding, was created to further empathize with our target users by creating situational stories where FreshTree could help solve their problem.
The storyboard illustrations below show how the target user group, represented by our persona, Daniela, would use FreshTree's online website to save her valuable time.

Business and User Goals

Prior to making any design decisions, we first needed to be aware of how these decisions would impact and support FreshTree’s success. Being able to first understand FreshTree’s business goals, and then align them with our UX strategy would only be conducive to the company's success.
Business and User Goals

Feature Matrix

Prioritization of features which align with the mutual goals of the company and of the users is critical. When deciding on which features are essential to include in FreshTree's website, we need to consider their use cases and whether the features would support the users in performing their tasks.

Card Sorting

To help us understand how to organize the product on the FreshTree site, the card sorting method was conducted with 5 participants, where they were asked to sort 50 common grocery items to discover insights on how they would naturally categorize items in a way that make sense to them.

These insights allow us to make good, informed decisions when
organizing the company's context structure. A site map was then created to show the relationship between the content on FreshTree's site.

Site Map

User Flow Diagram


Using the site map as a guide, a user flow diagram was constructed identifying the core path the target user 'Daniela' would use to complete her order .

For FreshTree's site, users would be able to shop for items by:

Searching through categories, using the Search input field, and through Saved List from their account page.

INTERACTION DESIGN

 Wireframes

Once we determined what FreshTree’s UI Requirements were, initial rough sketches were done on paper to decide on the site’s general layout. Digital wireframes were then built using Sketch.

Responsive Wireframes

Ensuring that FreshTree’s website is responsive and adaptable across all device
platforms will not only improve usability, but create a more positive user experience.

Sketch Prototype

 By exploring commonly accepted and used mobile design patterns for inspiration, and using the user flowchart for reference, initial design ideas were also sketched out into wireframes for FreshTree's mobile platform. These wireframe screens were then built into a sketch prototype using Marvel.

INTERACT NOW
Sketched Wireframes

Prototype (Mobile)

A functional prototype is then built to allow us to conduct user testing, and to validate our assumptions regarding our design decisions. Design iterations will then be performed based on feedback from user testing.

Experience the JusRoll App in Action Below!

* Click Play *
Click Here to Interact
Mid-Fidelity Prototype built using Sketch and Invision

 Testing

User Testing

To test our mobile prototype, first rounds of face-to-face user testing were conducted with 
5 participants representing the target group, using an interactive 
mid-fidelity prototype created with Invision.

To gain insights on users’ pain points and potential issues, participants were asked to complete the task of searching and purchasing bananas using FreshTree's mobile platform.

Remote Usability Testing

A/B and Preference Testings were conducted remotely in gaining quantitative data on users’ preferences and choices, as well as gaining feedback on their decisions. These testings were also instrumental for validating our design decisions.

Testing Results

Affinity Map

By synthesizing our data collected from our user testing results, we were then able to create an Affinity map in order to prioritize the successes, pain points, user patterns, and recommendations for the next design iterations of FreshTree’s website.

USER INTERFACE DESIGN

Logo & Icon Design

While initially exploring logo designs for the Instashop brand, re-branding the company image was an alternative path for this project. The decision was taken to re-brand the company's name and logo design, as I believe that Instashop distinguishing itself from its competitors (i.e. Instacart) was essential for its success.
Final Logo Design

Style Guide

UI KIT

High-Fidelity Key Mockups

Responsive screens showing FreshTree's home page for desktop and mobile.

Reflection

See Next Case Study