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.
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
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
.png)
.png)
.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
.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.
