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.
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.
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).
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.
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.
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.
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.
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.
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.