Brian Black Tea

A black tea store website redesign and feature addition.

Brian Black Tea USA is a specialty black tea company committed to bringing authentic Taiwanese black tea tasting experience.

The client wanted to improve their customer experience in order to attract new customers and suggested updating the current website. After speaking with the client and evaluating the website and its competition, it was clear that there was a lot of opportunity for improvement such as a way to order ahead, FAQ section, consolidating their menu, and making sure to improve their mobile experience.


Ongoing (6 months)




Lead UX Researcher, Lead UI Designer


Figma, Google Drive, Webflow

Here's a peek at the new and improved website:

How do we make website viewers into black tea customers?

Brian Black Tea and DoorDash recently started collaborating. So now the website has buttons that link directly to the DoorDash website to provide an easier ordering experience.

How can we answer questions that are never asked?

This Taiwanese store is the first branch in the US and customers have a lot of questions about the brand and its products that they comment on Yelp instead of asking the baristas outright. By adding a frequently asked questions page to the website, a lot of the mystery behind this brand can be answered just on the website!

How can we show off the quality of the tea?

They have tea blends that have been meticulously sourced with specific tasting notes. I wanted to make sure to display the different teas on the menu in a way that included the full menu and displayed their quality on one easy to visit menu page.

How do users normally look at the website?

The new design really focuses on an excellent mobile experience. Most people look for places to eat or drink on their phone, and they'll browse the website when looking for more details and specifics of a store. If a website doesn't look good on their phone, customer trust can be lost.


Website Audit

Was a redesign really needed?

I wanted to make sure that a redesign was needed and not just wanted. The overall website had been sufficient for their initial opening, but I found some areas that could use improvement based on the 10 usability heuristics for user interface design.

User Interviews

Getting information from the client and from their Yelp reviews.

After looking at the website and confirming that the website had pain points that could be improved, I chatted with the owner of the shop. He agreed that the website was lacking and had also noted that there were Yelp reviews that dinged the shop due to their products being different from other local boba shops.

Competitive Analysis

Checking out the competition.

I looked at the websites of 3 different boba shop competitors in order to see what they had included on their website and if there were any ideas that would be transferable to Brian Black Tea’s website. I chose them based on popularity in the area: Boba Guys, Happy Lemon, and Kung Fu Tea.


Adding new features based on research.

After reviewing the current website against other competitive boba shop websites, I was able to offer some suggestions as to how we could improve upon the pain points we had found from the website and the Yelp reviews. 

We came to the agreement that there were features we could add in order to improve their customer experience: links to easily go to their DoorDash for easier ordering, a frequently asked questions page to answer questions that were often unasked in person, a singular menu page that would show off their tea blends, and to improve their mobile experience.


Information Architecture

Where should I add the new features?

Now that we’ve figured out what we can do to improve the user experience, I organized the new additions into the current sitemap. I also simplified the menu experience.

Homepage design

Exploring different branding designs.

The client had wanted to see different high fidelity styles to see what felt the closest to the brand they were trying to project. I was able to provide three different homepage mockups based on the color scheme and the other boba website styles that the client had suggested looking at.

Design System

Recording down style choices for future reference.

Once we decided what direction the client wanted to go in, I started recording all of the colors, text styles, different components I was using, and even kept the flow of the designs by utilizing a layout grid from page to page.

HIgh Fidelity Prototype

The new Brian Black Tea USA  website experience!

After several mockup designs, I was able to produce a final mockup that will be tested and adapted onto Webflow.

Final Thoughts

Next STeps

My work isn't finished yet.

Project Takeaways

What I learned from working on this project.

Stakeholder Opinion

This was the first project that I had worked so closely with the stakeholder for every step. There had been difficulty in communication which made designing a little difficult and the stakeholder had high expectations of what the redesign would look like. However, in the end, I was able to create a design that the client was happy with and it felt like a win.

Device Responsiveness

I’ve heard a lot of different opinions about grid layouts and because this was a project that I wanted to make responsive across all different devices, I attempted to utilize a grid system to try and make things flow easier depending on the device. 

Broaden Design Horizons

This project was more difficult for me from a design aspect. My previous designs had been more simple and on light UI whereas this design was dark UI and had a very elegant feel to it. The client wanted a strict color palette and font given to them from Taiwan and I wanted to try to stay true to the Taiwan style while giving it some US flair.

More Projects

App Redesign
See More →
Website Redesign
See More →
Additional Work
All Projects
See More →

Let's Connect!

If you like what you see and want to work together, get in touch!