OVERVIEW:
Royal Bowls & Smoothies is a food truck that was in need of a digital visual refresh. It had busy pages with images on top of images and font that could be made more legible.
Tools used: Figma, Google Slides, Trello, and Canva.
ROLE:
Product Designer (Team of 3)
-
User Research
-
Building Empathy & User Personas
-
Information Architecture
-
Visual Design & Branding/Logo Creation
-
Wireframing & Prototyping
-
Usability Testing
The Problem
After performing a heuristic evaluation on the original website, we identified key weaknesses we wished to optimize:
-
Outdated branding:
-
Color and logo could use a refresh
-
Introduce a fun font
-
-
Disorganized:
-
Homepage is too long and needs to be separated
-
Cluttered and busy
-
-
Not aesthetically pleasing:
-
Doesn’t look visually appealing
-
User Observations
We performed user evaluations on Royal Bowl's website and gathered insightful feedback from four user interviews that helped us to develop our new design. Then we compiled them into an affinity diagram.
Cluttered
Users referred to some of the pages as an "eyesore."
Difficult to Read
While the pages were easy to find, the actual content was difficult to read.
Prefer to Order Ahead
75% of users would prefer to order ahead, which is something the original website was lacking.
Not Visually Appealing
"Definitely needs a visual refresh."
Competitive Research
We reviewed the websites of direct and indirect competitors to identify the look and feel that is common in the industry.
We came across several findings:
- Consistent branding, colors, and aesthetics
- Simple, minimalist design
- Transparent ingredient
- Fun images
Meet our User Persona: Casey Stewart
Behavioral Demographics:
-
26 years old
-
Pilates Instructor
-
Lives in Florida, used to beach life
Goals & Needs:
-
To find healthy places that are on-the-go
-
Explore new places in her hometown
Pain Points:
-
Time management - finding healthy options in between classes & commutes a lot for work
-
Can't find a consistent healthy place that she likes
-
Being mindful of her nutrition/fitness goals
Empathy Map
As we were creating our Empathy Map, a few things stood out:
- Our user person is Generation Z, which appreciates an aesthetic and clear design
- They like to support local and eat healthy
- Our user has time restrictions and is always on-the-go, so they prefer to order ahead
- Our user prefers transparency around the ingredients they are putting into their bodies
Does
Supports local and small businesses, especially ones that are women-owned.
Says
“I’m always on-the-go, so I love grabbing a smoothie between classes!”
Feels
Passionate about health and nutrition, supporting local businesses and women.
Thinks
It’s important for restaurants to be transparent about their nutrition and ingredients.
Problem Statement
Users living in more rural areas and wanting to support local businesses, prefer consuming fresh food, and lead a fast-paced lifestyle, have a challenge in discovering and accessing fresh food options that accommodate their values amidst their busy lifestyles.
User Scenario & Storyboard
Casey is a Pilates Instructor who is tired of not being able to find quick and nutritious healthy options in her area. She decides to search on Google, finds Royal Bowls, and orders.
Style Tile
Next, we created our UI Style guide. The original colors of Royal Bowls were a little dated. We decided to mute the colors while also maintaining the vibrance. We wanted our website to come across as playful and colorful.
Given my background in branding, I immediately knew I had to change the logo to match the new website layout. I did this part on my own with the final approval of my teammates.
Prototypes
We wanted to add fun elements such as fruit, nuts, and seeds to add extra "flavor" to the website. Additionally, we wanted to make sure it was easy to read and order online.
Final Mobile Prototype
Please press "play" for a video walk-through of the final prototype.