Bobabar & Desserts
Role
UI/UX Designer
Timeline
Jan 2023 - April 2023
Process
Research, interviews, survey, competitive analysis, A/B testing, personas, ideation, midfi, hifi, prototyping
Overview
description
Boba Bar and Desserts is a dessert franchise that has 2 locations. They offer bubble tea, smoothies, puffles, frozen desserts, and more. They want a website to show their customers what is on the menu, catering, merch, and just overall more about them.
Research
competitive
analysis
So to start off, San Diego has many colleges and therefore dessert shops. We wanted to check out what similar local businesses were doing well to get an idea of what user needs we wanted to address.
user personas
Based on client info and scrolling through their yelp, 3 demographics seem to reoccur and the user personas were made to represent them. Students, parents, and those that wanted to cater. This also helped to visualize what needs that different users and demographics had.
Data
surveys
5 surveys were created then distributed to gain quick user feedback for general aesthetic and a/b testing different iterations during mid fidelity phase. It was a mix of close ended and open ended questions to get a greater diversity of results.
interviews
To gain more in depth user research, 13 interviews were conducted to better understand the “why” for their decisions during a/b testing. It was also a way to get specific feedback for each of our pages on what can use more research and development before moving onto a higher fidelity.
“Menu button looks out of place”
“The footer text color is hard to read”
Ideation
Design
low fidelity
The idea was to keep it a straightforward low fidelity, so that
their main products get all of the attention. We created a Home,
About, Menu, Catering, and Career page. I was more involved with the designing of the Home and About page. The main features and ideas were presented in a meeting with the other designers to gain more insights.
Nav Bar
Image
mission statement
Learn more about boba bar
#BobaBar
#BobaBar
Customer Favorites
About
Menu
Join Our Team
Top 1
Top 1
Top 3
Top 3
Top 2
Top 2
Lorem ipsum dolor sit amet consectetur. Amet odio ultrices rhoncus morbi id molestie placerat vitae vulputate. Dictum est arcu faucibus interdum. Pulvinar eu risus ut semper magnis sed nunc faucibus. Proin orci ultricies eget vitae vestibulum.
Footer
Find Us
Address
street
san diego 92122
Phone number
Address
street
san diego 92122
Phone number
Uber Eats
Uber Eats
Grubhub
Grubhub
Featured
Lorem ipsum dolor sit amet consectetur. Mi.
Lorem ipsum dolor sit amet consectetur. Mi.
Lorem ipsum dolor sit amet consectetur. Mi.
Title, $
Title, $
Title, $
Lorem ipsum dolor sit amet consectetur. Mi.
Lorem ipsum dolor sit amet consectetur. Mi.
Lorem ipsum dolor sit amet consectetur. Mi.
Title, $
Title, $
Title, $
Category
Lorem ipsum dolor sit amet consectetur. Mi.
Lorem ipsum dolor sit amet consectetur. Mi.
Lorem ipsum dolor sit amet consectetur. Mi.
Title, $
Title, $
Title, $
Lorem ipsum dolor sit amet consectetur. Mi.
Lorem ipsum dolor sit amet consectetur. Mi.
Lorem ipsum dolor sit amet consectetur. Mi.
Title, $
Title, $
Title, $
Menu
Allergen / Dietary Guide
Download Menu PDF
About
Our Story
Our Value
Support Us!
Join us!
Mission statement
image
2000 founded
Lorem ipsum dolor sit amet consectetur. Nisl congue lacus enim convallis donec ac pellentesque quisque enim. Magna sit malesuada lectus malesuada malesuada gravida purus gravida.
image
2000 founded
Lorem ipsum dolor sit amet consectetur. Nisl congue lacus enim convallis donec ac pellentesque quisque enim. Magna sit malesuada lectus malesuada malesuada gravida purus gravida.
image
2000 founded
Lorem ipsum dolor sit amet consectetur. Nisl congue lacus enim convallis donec ac pellentesque quisque enim. Magna sit malesuada lectus malesuada malesuada gravida purus gravida.
Quality
Time
Ingredients
hover to see description
hover to see description
hover to see description
item name
item name
item name
item name
$$$$
$$$$
$$$$
$$$$
Order now
Order now
Order now
Order now
Visit Career
Lorem ipsum dolor sit amet consectetur. Porta curabitur condimentum metus mattis.
Lorem ipsum dolor sit amet consectetur. Porta curabitur condimentum metus mattis.
Catering
Merch
Career
Home
Menu
About
icon
icon
icon
Logo
Lorem ipsum dolor sit amet consectetur.
Home
Menu
About
Catering
Merch
Career
icon
icon
icon
CTA
CTA
CTA Text
Catering
Merch
Career
Home
Menu
About
icon
icon
icon
Careers
Open Positions
Values/Benefits
Position
Lorem ipsum dolor sit amet consectetur. Interdum ut molestie sit mollis ut. Pellentesque pellentesque nunc mauris sagittis nulla rhoncus commodo enim. Commodo egestas pretium phasellus sed.
$/hr
Apply
image
Logo
Lorem ipsum dolor sit amet consectetur.
Home
Menu
About
Catering
Merch
Career
icon
icon
icon
CTA
CTA
CTA Text
Location
Position
Lorem ipsum dolor sit amet consectetur. Interdum ut molestie sit mollis ut. Pellentesque pellentesque nunc mauris sagittis nulla rhoncus commodo enim. Commodo egestas pretium phasellus sed.
$/hr
Apply
Location
Catering
Merch
Career
Home
Menu
About
icon
icon
icon
Catering
Puffles
Title
Title
Lorem ipsumdolor sit amet consectetur. Interdum ut molestie sit
Title
Drinks
Title
Title
Title
Logo
Lorem ipsum dolor sit amet consectetur.
Home
Menu
About
Catering
Merch
Career
icon
icon
icon
CTA
CTA
CTA Text
Our Services
$$$ per person
$$$ per person
$$$ per person
$$$ per person
$$$ per person
$$$ per person
Detail number 1
Detail number 2
Detail number 3
Detail number 4
Detail number 5
Detail number 1
Detail number 2
Detail number 3
Detail number 4
Detail number 5
Detail number 1
Detail number 2
Detail number 3
Detail number 4
Detail number 5
Detail number 1
Detail number 2
Detail number 3
Detail number 4
Detail number 5
Detail number 1
Detail number 2
Detail number 3
Detail number 4
Detail number 5
Detail number 1
Detail number 2
Detail number 3
Detail number 4
Detail number 5
Lorem ipsumdolor sit amet consectetur. Interdium ut molestie sit Lorem ipsumdolor sit amet consectetur. Interdium ut molestie sit
CTA
Service
Service
Service
Lorem ipsumdolor sit amet consectetur. Interdum ut molestie sit Lorem ipsumdolor sit amet consectetur. Interdum ut molestie sit
Lorem ipsumdolor sit amet consectetur. Interdum ut molestie sit Lorem ipsumdolor sit amet consectetur. Interdum ut molestie sit
Lorem ipsumdolor sit amet consectetur. Interdum ut molestie sit Lorem ipsumdolor sit amet consectetur. Interdum ut molestie sit
large landing page
filter options
potential merch
call to action for catering
mid fidelity
In my opinion, mid fidelity is the most fun and important for the process. It is where the most research can be conducted and creativity can come out. It is easy to make many iterations and test them since less time and effort is put in, in comparison to a higher fidelity. At this stage, some color and fonts were experimented with along with content and visuals. A/B testing was done at this phase and the results were implemented later.
design system
With many pages and having responsive designs, it was extra important to keep everything consistent. We organized all the colors, fonts, and sizes within figma so that it was quick to implement into our hi fidelity design.
mood board
Purple was an easy decision since it was the main color that they used for their menu and their interior. We wanted a softer color palette to complement their playful and whimsical vibe. Something soothing like sunsets. We made the mood board as a reference for deciding on colors for the style guide.
a/b testing
I wanted feedback on some of our current features and pages so that they can be improved. We wanted feedback on the Home, About, Menu, Catering, and Career page in addition to the nav bar and footer. These results were from around 50 survey responses. Design changes were made based on the data, even if they went against our initial thoughts.
feasibility
vs
functionality
Based on the competitive analysis, I saw many features that could work for our site. We made a chart to track the feasibility of the feature in comparison to its impact. Higher impact with easy implementation were prioritized.
‣ Large landing image
‣ Drink filtering
‣ Social media gallery
‣ Big action item cards
‣ Footer with CTA links
problem
They have over 4000 followers on Instagram and Facebook combined, but they do not have a website. They need a website to be able to showcase information about them such as menu, hours, and catering. By providing a website, they have a better way to interact with their boba loving customers. Not having a website can mean that they lose out on potential sales and customers.
final product
With new info from the client and data from research. I was prepared to work on a finalized high fidelity. One aspect that I wanted to keep was a playful touch, especially since it is a dessert shop with a penguin as a logo. The reoccurring cubes in the background of some pages is a reference to their physical shop, their counter has the same design and we wanted to pay homage to it. It is responsive so we have high fidelity for desktop, tablet, and mobile. This was designed with a mobile first approach since it is always easier to upsize than downsize. Feel free to ask me about them and I can show those designs too. Now it has been handed off to the development team.
That’s All Folks
reflection
There were some challenges for this project. One was trying to format their menu for mobile design, since they had so many products with descriptions, it was hard to find a way to list them but we found a way. Another issue was trying to make it simple for delivery orders for users. They have 2 locations so we wanted users to not get confused on where they were ordering from. To simplify this, we made 2 different categories for the locations rather than the first idea of 1 universal button to order.
This was my first large scale client project. I am glad to have been able to see how getting user data could help us make design decisions. It was fun to have as much creative freedom as we had to try some wild ideas. It was great to work with a design team and developers to work on this project from ideation to finished design.