Vanessa
UX designer

Project scope: 2 weeks

Project type: Personal

My Role: UX research, UI design, Information architecture, Usability test, Prototype

Tools: Sketch, Adobe XD, Useberry, paper, pen

Overview:

FreshCare Juices’ mission is to make access to a healthy lifestyle a more realistic and affordable option for everyone. Its goal is to deliver fresh, high-quality juices ordered online.

Note: FreshCare Juices is a project of a fictional company, but it is based on real user research.

Challenge

I put myself in the shoes of the UX designer tasked by FreshCare Juices to design a solution for customers to order juices, with the additional constraint that this solution should be implementable on a low budget. Furthermore, FreshCare Juices wants to put an emphasis on health by providing its customers with the information they need to make informed buying decisions.

Empathize
FreshCare Juices

Competitive Analysis

As a starting point, I made a competitive analysis to help me understand the general environment in which the company will compete. I selected 4 large companies active on the market of online juice sales (without geographic restriction). The table lists important features and indicates which competitors have implemented which. 

This gave me a first idea about which features are probably necessary (promotions and blog for example) and which ones may not be (like pick up option and vip membership). In the survey, I will be able to get more feedback from the users and test these assumptions.

Survey

I decided to survey potential users to help me get insights about particular solutions and product features at this early stage. 

The survey was done with 30 people from the target audience. The questions were about their online food-ordering habits and their interest in health. 

Even though the sample of users was not big enough to assume it is representative of the whole population, the survey results tend to indicate that:

  • It is essential to emphasize the guarantee of freshness of the product. 

  • Users care about acquiring health-related knowledge before buying.

Survey statistics
70%
Would like to have clear information about the freshness, in particular how freshness can be conserved during delivery
53%
Would like to know more about a "cleanse program"
46%
Would be interested to have a “pick up” option when ordering
43%
Would be interested in a "VIP membership" which offers special discounts and the ability to plan orders
Define
FreshCare Juices

Personas

After the research phase I decided to create a user persona to represent a typical user of the service. This process helped me to visualize a user, understand her behavior and feelings, and imagine how to fulfill her needs.

User Journey Map

I created a User Journey Map to visualize the main problems faced by the user in the current market when buying juices online.

Using this journey as a starting point, I identified potential solutions such as providing clear information about freshness and offering daily juice packages (easy to include in one’s routine).

FreshCare Juices
Ideate

Empathy Map

I created an Empathy Map to summarize what I learned about the needs, thoughts and feelings of a representative user. The map helps me understand more about the user I am designing for and ensures that the project has a human-centered approach.

FreshCare Juices

Sitemap

Given FreshCare’s request for an online ordering system that is low-budget, it was decided to create a website for mobile and desktop (instead of both an app and a website). The company can still decide to create an app in the future if needed, when it has grown or if/when users request it.

In order to hierarchically structure the content of the website, I created a Sitemap diagram.

At the top level, the site follows the standard known by the users (shop, blog, about, etc.) with an additional emphasis on daily packs. Moreover, to create a user-friendly ordering process, the user can finalize an order as a guest.

FreshCare Juices

User Flow

I created a User Flow to understand how a user would navigate through the interface. I have mapped out two entrances: a frequent user and a new user to compare some possible scenarios. 

I realized that it would be important to have a call-to-action button in some of the sections to encourage the new user to make decisions.

FreshCare Juices
Build
FreshCare Juices

Sketches

To quickly visualize and test out ideas, I started to sketch out some ideas for the website interface.

Wireframes

In order to try out solutions quickly and to conduct the first tests without any visual distractions, I started designing low fidelity wireframes based on the sketches.

I made a lot of improvements to make the design consistent, make the information clear, and provide more feedback to the user. This process also made me realize I needed to include new screens (such as the nutritional test screen).

I made 30+ screens and right below I displayed the main ones.

*You can interact with the screens by scrolling down to see the full content.

Test

Usability test

Before starting the high-fidelity mockup, I conducted a usability test to identify any issues and test my design decisions while still at an early stage. The test was conducted remotely.

I got important insights from the test. Some pieces of information were not communicated clearly enough, such as the existence of the membership program and how the user can get to know which nutrients fit their needs. 

I took these insights into account in the final prototype.

Implement

Final UI design & Prototype

I was focused on building a very user-friendly interface. The style is very clean, uses pastel colors and brings the idea of freshness/health to the interface.

The logotype was also done by me. It represents the idea of freshness and vitality associated with orange juice, the most popular juice flavor. The colors used bring an energetic and invigorating emotion. 

*You can interact with the screens by scrolling down to see the full content.

Prototype

Here it is the complete flow used to validate the design.
Test it out, it is interactive!

Learnings

This was a challenging project that made me appreciate the value of good research before creating a product from zero. This project was initially made during my specialization course of last year. I decided to remake it this year since was not fitting my criterias anymore.

In the absence of a business team to communicate with, during this project most of my energy went into creating a great experience for the user. So this project made me acknowledge the importance of having a close relationship with the business teams to ensure that its goals are also met.