Boba Shop Website

The Challenge

This UI mockup explores how joyful, functional design can enhance small business visibility specifically for a locally owned boba tea shop. I was drawn to the challenge of merging expressive, bubbly visuals with a clean, intuitive interface that supports both e-commerce and community storytelling.

Small boba shops often rely on in-store charm to convey personality, but I wanted to capture that energy digitally. From hand-drawn tapioca icons to color palettes inspired by taro milk tea, every detail was created with intention.

This concept piece was built as part of my "After Hours" portfolio which is a space for playful ideation and design storytelling outside the corporate brief.

The Method

Like designing a moodboard in motion, I began by imagining the personality of the shop: vibrant, youth-driven, and deeply local. I then wireframed an ordering experience that included:

- A sticky navigation bar

- Headers that react to hover states

- Landing page with a clear call to action button

To maintain narrative clarity, I balanced colorful UI elements with a spacious layout and minimal text. This project was less about data and more about evoking the feeling of walking into your favorite shop after school.

The final mockup blends flat illustration with clean, responsive design, a visual experience that feels both handcrafted and digitally fluid.

The Outcome

Designing this UI reminded me that good user experiences tell a story. Even when the end goal is to sell a drink, the interface should welcome users, reflect identity, and make people smile.

This project allowed me to deepen my skills in UI storytelling and expand the visual language I bring to product design, one pixel and one pearl at a time.