A delve into visual design

I decided to take an online Visual Design course from designlab to solidify my foundation in visual design on my quest to becoming a well rounded Product Designer. This is my final project from the course.

As someone who is dedicated to user-centered solutions, it was a different experience taking this course and learning to create something just for the purpose of creating.

I had the freedom to take this project in whatever direction I wanted to, while applying what I’ve learned in visual hierarchy, color theory, typography, as well as, a little UX to come up with a final design.

Without further ado, I’d like to present to you bobamilktea

Incorporating what I learned in visual hierarchy, typography, and color theory to come up with a final wireframe for bobamilktea

This project definitely stemmed from my love for boba milk tea drinks. I wanted to mock-up a website that would serve as Yelp for boba places.

Visual Hierarchy

The most important piece of information I wanted to present here was helping the user find the boba place they wanted. Therefore, the first thing a user would do is enter what they were looking for in a boba place, whether that be a favorite boba spot, delivery service, or the best taro milk tea in town. On the other hand, if the user didn’t have anything specific in mind, they would be able to browse nearby Trending and Top Rated locations.

Initial color scheme for bobamilktea

Color Theory

I started with a color scheme inspired by the colorful straws boba drinks are usually adorned with.

However, after playing around with the colors on a lo-fidelity wireframe, it became clear that there were just too many colors competing with each other.

Lo-fidelity wireframe for bobamilktea

In the end, I decided to go with a more neutral color palette that represented the creamy milky color of…well, milk tea.

Styleguide for bobamilktea


The typeface I chose for the logo also had a play on representing the fun drink. The lowercase “t” resembles an upside down boba straw with it’s greater width and pointed tip. Then, to contrast the bolder typeface, I chose Avenir Next in Medium. This allowed for just enough contrast without sacrificing legibility.

Next Steps

There’s definitely more to elaborate on for this project. I believe that the appropriate next steps would be to mock-up the wireframes for the rest of the website and then build a prototype to test usability.

I hope you enjoyed my first little venture into visual design and any feedback on this project is greatly appreciated:)