Boba is a young, hip bubble tea shop using only natural and fresh ingredients to deliver finest drinks, targeted college students and young working professionals located near Rutgers University in downtown New Brunswick.
Role
Logo design | Visual design | UI/UX design | Branding
User Research
I started with researching on user demographics, psychographics to have a better understanding of the potential users. Then I consolidated the findings and created user personas as a guide for later design process.
User Experience Mapping
I listed out all the user needs, content and functionality requirements, then began mapping the outline of scope - flows of user experience.
Wireframing
I used InVision to create lo-fi wireframes. This step helps working out the information architecture and arranging elements on each screen.
I used these low fidelity prototypes to show potential users for feedbacks, then studied the findings to make adjustments on the flow.
Branding and UI components
I collected inspirations for colors and logo, created a mood board on Pinterest.
Next, I sketched out logo and UI components on Adobe Illustrator.
I wanted the branding logo to be as straight forward and eye catching as possible, so I took the physical form of bubble tea as inspiration, combined the unique bubble-like type as logo. As for theme color, I used creamy milk-tea-like color that has a comforting and refreshing vibe, as the theme color for the app and website.
Prototyping
I used Adobe XD to create high fidelity prototypes.
After the prototypes are created, they are connected and presented on physical mobile phones to show the users for usability testing.
Sign In
Users can either create their own accounts or sign in with facebook or google account.
Once logged in, it will take the user to the home screen, showing the featured products and menu.
Navigation Menu Icons
Icons will be highlighted in pink color with darker border to indicate the users where they are.
Menu Items
Menu is divided in to six categories. Users can tab on the triangle expand button to see full list of items under each category, then hit the + button to add items into cart. Once an item is added into cart, users can choose to check out or add more items and check out later. Customizing items to users own liking is also available.
Check Out
Users can go to cart to view item(s) they add. Next users can choose to proceed to check out, add more items, or cancel the order. Once confirmed purchase, an order number with tracking link will be provided. Customers can click on the link to track their orders.
Search
Users can search based on typing in keywords or by categories.
Profile
Under "me," users can edit profile, edit payment, view past orders, and change settings.
Call
Users can use "call" to contact the store directly if they have any questions, instead of looking up phone number of the store online.
More
Under "more," users can find additional information such as story of Boba, FAQ, contact info, privacy policy and so on.