Mr Boba Mock-Up.png

Mr. Boba

Mobile app for bubble tea recommendations

Project Context

A school project where a group of 6 classmates were required to create a prototype of an application to apply what we have learnt during lectures about project management. This project is part of a module called Advanced Software Engineering. In this module, we are taught several concepts such as quality management, software project management, project lifecycle, software testing etc.  

The main feature of Mr. Boba is to provide bubble tea recommendations for anyone who is interested to try a new bubble tea drinks. According to the user's input to a list of questions, a bubble tea drink will be recommended.

Cover image (6).png
Role

Lead UI/UX Designer

Tools

Figma

Role

Sept 2021 - Dec 2021

Features

Bubble Tea Recommendation

Users will expect to get a bubble tea recommendation after answering a series of questions. The algorithm will produce 5 different bubble tea drinks.

Login/Register

Users can register an account on the website to create their own profile. This helps to maintain a history of the bubble tea drinks recommended by Mr Boba allowing users to visit past recommendations.

Ratings  

Users can provide their ratings of bubble tea drinks they have tried, allowing other users to benefit from their review

Design Prototypes
Landing page
Landing Page.png
Landing Page.png
Landing Page.png
Landing Page.png

Overall Design

Drinking bubble tea has become a past time for most people around the world and many people derive enjoyment, satisfaction and pleasure from indulging in their favorite bubble tea. The landing page was designed to reflect how bubble tea makes people feel. Hence, the overall design has the theme of peaceful, fun and welcoming. Light pastel colors were chosen to provide a sense of serenity while multiple colors used create a fun and welcoming atmosphere. All the pictures chosen also include vibrant colors that can be used to capture the attention of users.

Font - Rubik

The Rubik font is specially chosen because of its distinctively rounded corners. In line with the theme of fun and welcoming, rounded corners make for a more relaxed and light-hearted environment while still retaining the structure and formality of an official website. 

Sign Up Modal
Register Modal.png
Register Modal (1).png
Register Modal (3).png
Register Modal (4).png

Obvious and timely feedback

Providing timely feedback is important to allow the user feel in control of the interactions made. It helps the user understand the current system status and receive feedback from the system.

In the prototypes above, feedback is given at 3 different interactions:

(1) Purple underline

A neon purple underline is shown when the user clicks on any text box. This gives the illusion that the text box is activated and ready to receive user input. The cursor is also another indication that the user is able to safely key in the email address.

(2) Text feedback "Success"/"Passwords do not match"

Clear and precise feedback given to allow users to know exactly what the system's response is, instead of having users guess the system's status.

(3) Appropriate colors for feedback

Green is the color that represents safety and success. Users feel assured when they see the green color.

Red color is used to capture the user's attention with its striking hues. Hence, red is used for error messages as its intense color prompts the user to give a diff input.

Browse bubble tea
Browse Page.jpg
Browse Page (1).png
Browse Page - Selected tag.png
Browse Page - Search bar.png

Cater to varying usability 

Different methods are provided to give users different options to browse the bubble tea selection. This helps caters to users who visit the website with different needs. Some users just want to scroll through the whole list without any specific drink in mind, others might want to look at specific bubble tea brands, while some others have a specific drink in mind in which case they can use the search bar to narrow down their options.

Learning points
Branding

For this project, there was no requirements or expectations from my team members and so I was given the task of branding the entire website. It felt like a huge task to design a website from scratch without brand guidelines, a design system or even a mood board. I had to research the colors, patterns, assets used that most appropriately aligns with the theme of being fun and lively. After much research and trial and error, piecing together things that might work and failing in some attempts, the end product is what you see here.   

Less is more

As designers, it is always easy to think that the more assets, words, icons or extravagant designs I have, the more outstanding the website will be. However, due to my personal limitations of graphic design, having my own designs were not possible. Hence, I learnt to find ways to incorporate different free assets online and create a website that I can call my own. I also learnt to use simple techniques to create my own designs that would add some flavor to the aesthetics of the website, bringing in fresh ideas.