Designing an easy to use online produce ordering website.
Fruitopia is a service that allows users to order fresh fruits, vegetables, and other food items online. We implemented same day curbside pickup and home delivery options to ensure accessibility for everyone.
Project Duration
06.02.2020 - 11.03.2020 Twenty Weeks.
Team Members
Independent Project
My Role
UX Design/ Research UI Design Web Design Advertising/ Marketing Social Media Management
Deliverables
Responsive Website Branding Assets Social Media Content Social Media Strategy Plan
THE CHALLENGE
Balancing Simplicity with Functionality.
The goal for Fruitopia was to create a product that was intuitive and easy to use for a wide range of users. Although simplicity was a key goal, we still wanted to include a plethora of functionality to vastly improve the experience for all users.
Our high level goals were to:
Make the product fast and easy to use for all age groups.
Give users more control over their shopping experience. Users wanted to be able to get their grocery order in a timely manner.
Eliminate common grocery shopping pain points to improve the experience for the users. Users wanted the option for curbside pick up or home delivery.
My Role
I had a few roles within this project as the UX designer, UX researcher, UI designer & Web Designer.
Once the product had been created, I also became responsible for Advertising/Marketing & Social Media Management to increase traffic and sales to the business.
Brainstorming
Ideation is a key component to the UX design process. It highlights areas that may be crucial to develop in order to create a successful product.
In this instance, we decided to brainstorm ideas concerned around branding, user types, key features, products offered, and main concerns users may have.
Early Insights
I interviewed 10 people to find out what pain points they experienced while grocery shopping online and what changes they would like to see to make the experience easier for them to use. It was discovered that:
Many grocery stores don’t even offer online ordering.
Users wanted to be able to get their grocery order in a timely manner.
Users wanted the option for curbside pick up or home delivery.
To further investigate these needs and better define our business model, a competitive analysis was performed. In doing so, we were able to verify that a lot of local grocery stores did not fully offer online ordering with timely curbside pick up and home delivery options.
Identifying the User Base
Before we started to build the product it was important for us to identify which demographics would be using our services. Since grocery shopping is a task that everyone does, it was important to create the website with all age groups in mind. That means creating a product simple enough to use for all individuals of varying technological skills while also considering those who may have disabilities.
Persona 1
Persona 2
Journey maps can be a great tool to generate insight into how the user may experience a product. This journey map was created to examine each stage of the user journey, what complications the users may experience & improvement opportunities for any negative experiences.
User Journey 1
User Journey 2
High Fidelity Prototype
An early prototype iteration was created so that we could test how the product works with different users in real time as well as acquiring feedback that can later be implemented into the final design.
Early wireframes and prototype created using Figma. The prototype can be accessed HERE.
Research Methods
To gain the most insight into how our product was functioning and to identify any flaws or pain points, we decided to conduct unmoderated usability testing with a diverse group of participants.
Additional goals of the research were to observe key performance indicators (KPIs) to gauge how users were performing during the testing phase.
This chart highlights the KPI findings from the conducted research.
We also monitored how users being tested responded to different prompts. Any positive, negative or neutral remarks or reactions were recorded to help pinpoint where complications may be presenting in the design.
These comments made by the users highlighted flaws within our design that we were able to make adjustments to to improve the overall experience.
The Discovery
What we had discovered during our research phase was pivotal to the development of this product. We were able to identify a multitude of pain points and issues that users were facing and implement adequate changes that resolved these problems.
Diving Deeper
While designing different websites, applications and products, it is important to design with accessibility in mind to create a more inclusive future. Not only does this help those with disabilities and different needs, but it also helps make the service more easy to use for all user groups.
During our research, we came across different users with visual, audio, and mobile impairments. To account for this and ensure usability for these users with unique needs, we added features like Text to Speech, Adjustable Font Sizes, Different Language Options, Colourblind Modes, One Handed Modes and more.
The Design
The main objective for creating the brand was to blend vibrancy with luxury. We wanted to implement bright colours that reflect those naturally found in fruits and vegetables while also maintaining a luxurious identity to help build a sense of trust for our users.
A style guide was created to further define how we can achieve our goal of building a vibrant and luxurious brand through different colours, fonts, icons and more.
Style Guide that was used throughout the creation of Fruitopia.
Once the style guide was completed, we were able to start the development of the website and mobile application. We incorporated a darker theme to make the vibrant colours pop and to stand out from other commonly used websites.
Marketing Strategy
As a new business in a populated city, it was crucial to create a marketing strategy that would make potential users aware of the service. In order to successfully do this, we used these key steps:
Design a unique and recognizable brand.
Create engaging and high quality content to draw customers to the service.
Target specific users that are likely to use our service.
Utilize Social Media Ads & other traditional marketing mediums.
Within our first year of operation, we were able to amass thousands of users which led to a large and rapid increase in sales for the business.
THE IMPACT
An Enhancement to the Online Grocery Shopping Experience.
The design of Fruitopia had an overall positive experience with its users as we aimed to simplify and improve upon the online grocery shopping exeperience while also eliminating any frustrations these users may have.
With all of the effort we put forth into user research, user centered design and marketing strategy we were able to:
Establish a recognizable brand within our local community.
Rapidly grow and maintain a consistent user base within our service.
Earn over $2,000,000 in sales within the first year.
