Sun's Organic Garden

Designing an online shop for organic Chinese tea and herbs.



How might we make it easy for Sun's customers to browse and shop for tea online?


5 weeks


Joanna Choi (UX/UI Designer)

Stacy Lee (UX/UI Designer)

Amelia Oon (Illustrator)

Christine Pourheydarian (Web Engineer)






Stakeholder Interviews

Competitive Analysis



Low-High Fidelity Wireframing



Style Guide


Defining the scope

Sun's Organic Garden is a tea shop in Chinatown that sells high quality, organic loose leaf tea. The store is known for its stellar customer service and quality in ingredients. As a result of the Covid-19 pandemic reducing foot traffic in the physical store, the owner of Sun's Organic Garden reached out to create an online store .

  • Goal: Get customers to successfully purchase items on Sun's Organic Garden's online store.
  • Customers: 50% are baby boomers and 50% are millennials who are tech-savvy. Customers typically find the store via Yelp and Google reviews.
  • Brand: handwritten, organic, positive, bright, personal touch
  • Requirements: Must follow Core DNA's best practices for an e-commerce site

Understanding the competitive market

To organize the store's information and products, we analyzed three existing tea stores. We examined August LA's site for its simplicity and David's Tea and TenRen's tea for their similar section of Chinese teas. Below are similarities and differences in features among the competitive landscape.



Starting with the must haves

We began our low-fidelity wireframes by first including the best practices from Core DNA's e-commerce site recommendations. We reviewed the low-fidelity wireframes with the client to make any additional edits before moving into a higher fidelity.

Design Challenge: Defining the mega menu

In the header navigation bar, we created a mega menu for the Teas category. By having the mega menu open upon hovering on the Teas category, users can see and decide how they want to sort through the teas in one easy click. After multiple rounds of iterations from low to high fidelity, we created two mega menus: one for customers to Explore traditional tea and one for customers to quickly see the tea options by category.

Creating the brand

The client wanted a website that was organic, positive, and had a personal touch. We created a moodboard for inspiration and developed a color palette and typography that would convey the store's brand. To maintain consistency among the website pages and across social media, we developed the following style guide. It includes Sun's Organic Garden's logos, typography, color palette, and our inspiration.


Since the completion of the design, the engineer has been building the website in Weebly. In addition, an SEO marketing expert is working with the client to increase online engagement. After the online store goes live later in December 2020, it would be interesting to analyze how customers navigate the website. Had there been more time to work on the website design, I would have conducted user interviews with current and prospective customers to understand different mental models for tea categorization.


©2020 Designed & Built by Joanna Choi 🌸