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.
Timeline
Ongoing (6 months)
Team
Solo
Role
Lead UX Researcher, Lead UI Designer
Tools
Figma, Google Drive, Webflow
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
After several mockup designs, I was able to produce a final mockup that will be tested and adapted onto Webflow.
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.
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.
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.
