Boba lovers
Designing a specialized app for boba lovers in Fremont, CA
Boba Spot Fremont
This is the perfect app for boba enthusiasts looking to indulge in the treat in Fremont, California. The app includes an interactive map that showcases information about different boba shops within the city.
For this first project, I chose to limit the scope to Fremont to keep the app highly specialized, with opportunities to expand to different areas in future apps.
Research
I identified my target audience to be teenagers and young adults who drink boba regularly (at least once a week.) Then, I conducted a simplified version of user research—I asked ten individuals representing this demographic a series of questions, including their age and technology skills as well as questions related to boba, such as how often they consume the drink and what they would look for from a boba shop information app.
Based on the research I gathered, I created a persona to guide my wireframes and app design.
The visual system
I decided on my three product descriptors: modern, minimalistic and informative. I wanted to prioritize digestible information as well as ease of use, so I wanted to keep my visual system very simple but also contemporary and sleek to fit my target audience.
So, I limited the range of colors for the color palette; besides white, black, and tonal shades of gray, the palette includes magenta as one accent color. As for type, both my display and body typefaces are clean and modern as well. Kiro includes squared characters and looks heavily digital nand futuristic, while Acumin Pro is a more traditional sans-serif typeface that is easy to read.
The logo consists of simple lines, coming together to form a boba drink.
Finally, I created a few icons to include in the user interfaces. I modeled these after the lineart style of the logo.
Wirefrraming
I used Adobe XD for the wireframing process. I designed the main interfaces: the loading page, the map, the filter, and the information pages for each boba shop.
Main UI screens
Interactive prototypes
A crucial part of the UX/UI process is building and testing working prototypes. Below are three user flows I created to test out my system. Feel free to enter them and explore the guided flows—you can mouse around and discover what you can interact with.
Final thoughts
This was my first ever UX/UI project as well as my first time using prototyping software such as Adobe XD. It was definitely difficult at times because I had to learn the software and complete this project at the same time, within a span of a couple weeks, but given my lack of experience, I’m pretty satisfied with the outcome. I took this class because I wanted to learn more about this area of design, everything from the initial research process down to prototyping and user testing, and I felt this project definitely helped me do so.
One thing I would’ve liked to do differently is to iterate more on the page layouts—to explore how elements were arranged on each screen.
