Responsive website design for a local bubble tea shop
UX/UI Designer
80 hours
Figma, Figjam
Capstone Project
OVERVIEW
Tucked in the plaza near a mall, Arteazen is an independent bubble tea shop that is located in a “boba desert”, where it is the one of the only boba location for miles. The shop sells a variety of drinks, ranging from milk teas, yakult infused drinks, and fruit teas. Arteazen is also near a college, where it sees the most success with young adults or younger.
the challenge
Design a website that alights with the brand's values and to connect with intended demographics by incorporating modern UX/UI elements.
the solution
Craft a new website for an established brand and incorporate elements of brand's identity and values.
Streamline the process of finding menu as well as online ordering to increase revenue for shop.
01 research
Using direct engagements, I interviewed users who frequent boba shops in order to understand how they navigate bubble tea websites and what things they look for when visiting. It became apparent that frustrations exist with online ordering as well as drink specifications.
research 1 - user interviews
Using direct engagements, I interviewed users who frequent boba shops in order to understand how they navigate bubble tea websites and what things they look for when visiting. It became apparent that frustrations exist with online ordering as well as drink specifications.
SPECIFICITY OF DRINKS ENTICES USERS
55% of users expressed frustrations with drinks that don’t have descriptions or prices on them— given that those specifics help users decide.
ONLINE ORDERING SYSTEM MAY HELP OVERALL SALES
Because Arteazen is catered towards people who value convenience, we will also be incorporating the shop’s already established Doordash page.
research 2 - competitive analysis
Because Arteazen is catered towards people who value convenience, we will also be incorporating the shop’s already established Doordash page.
Interviews, surveys, and competitive analyses gave much considerations on what to include onto the site itself:
Create a menu that takes into account the specifics of the drinks offered.
Include an online ordering system for users who value convenience. Every competitor has either Doordash or their own online ordering system.
Provide an “About” page for users who want to know more about the shop.
Competitors appear to display social media photos from Instagram somewhere around their site.
Stores have a variety of drinks and ways to display them.
02 synthesis
SYNTHESIS 1 - PERSONAS
After gathering intel about the data received from the research phase, two personas emerged from the insights gained. The first persona is a tattoo artist who is crafted to serve as a guide for the goals and frustrations of established tattoo artists in the industry. The second persona is a customer, who was developed to foster a sense of empathy to the customer user base and to understand their objectives.
SYNTHESIS 2 - affinity map
The affinity map took into account the qualitative data. The key insights I took from producing the affinity map is descriptions and visuals are big necessity.
Viewing an artist’s profile should resemble a portfolio for easier viewing. Artist's style and abilities are important to display for customers to make decisions.
Different experience screens for both customer and artist. Design needs to accommodate for both the customer and artist user journey.
03 IDEATION
ideation 1: user flow
I imagined myself as one of my personas when building the user/task flow. At this point, I had to take into account that the online ordering flow will lead users to the Doordash website. Given that Arteazen is newly independent, they may not have the funds for their own online ordering system. Due to the online ordering system, I wanted to emphasize the fact that users do not order their drinks through the menu task flow.
I started the wireframing process by hand sketching the specific layout for the pages I wanted to develop. By referencing competitors’ screens, the three most important screens to include is the landing page, menu, and an about us page.
branding
Following these wireframes, I created a UI kit that mixes interesting visuals and neo-brutalism. I wanted the site to elicit a modern and inviting vibe to demonstrate that the shop is in touch with the young adult audience. Green/teal is used as the primary color which doesn’t only represent tea leaves but also a sense of friendliness. Light brown is used as a complimentary color but also to relate to the color of a basic milk tea. I also chose round fonts to convey playfulness.
03 TESTING
usability testing
I conducted unmoderated usability testing with 13 participants — all of which completed a three task flows with a 100% success rate, which emphasizes the efficiency of the website’s navigation.
Task 1: Testing how users order a drink online, despite being navigated to a third party website
Task 2: Testing how users find information on boba drinks through the menu
Task 3: Testing how users find out more information on the shop itself
results
Feedback was gathered from the answers users provided from Maze and put into an affinity map where I analyzed the results. Though there was a 100% completion rate, I identified some critiques that I implemented into my reiterations. Click here for the full report.
Users had trouble with the Doordash prototype as the prototype was faulty at fully replicating the original site.
The pop-up that appears before leaving the Arteazen site is disruptive and can add to the user’s cognitive load.
While users appreciated the overall modern design, users report that some areas were too big and required a lot of scrolling.
priority revisions
Based on the findings and feedback of the usability testing, I reviewed each point and made revisions. These reiterations ensured that the experience is more optimized and smoother to navigate.
Most of the reiterations included minor UI changes. For instance, in the pop up, users report that having too much to read could be a big mental load.
reflection
learnings
During the designing process, I ran into a few difficulties — the main one was the amount of pain points received due to faulty overlay prototyping for a third party site. This project also highlighted that while it is important for a website to be unique, it equally as important that the experience be familiar to the user.
Despite having a task flow that is difficult to get through, users were still able to achieve a 100% completion rate for all the flows, which is comforting to know. Even so, feedback on the website’s navigation was a good reminder that the user’s experience always comes before the aesthetics of the design itself.
if there was more time...
I focused primarily on optimizing the website for desktop. If there was time allotted for this project, my next steps would have been to:
Optimize site for mobile, as the target demographic are users who are young, busy people who have access to their mobile devices more than a desktop
Created another flow for the shop’s own online ordering system
Continue to iterate the test. I would have also liked to explore how an older person (not within the intended demographic) would have navigated the site. How will they go through the website and what type of pain points would they have? It would also be impactful for an accessibility setting to be implemented as well.