Cup & Leaf

Cup & Leaf is a blog for a premium tea company. I designed the company’s full blog and Shopify store with the goal of selling tea by driving traffic to the blog articles.

The Objective

The goal of the site was to generate revenue via the sale of their luxury tea. The site also needed to feature informative articles about all things tea (i.e. health benefits and how-to guides), as well as tea reviews. The final product included the homepage, a reviews homepage, individual reviews pages, individual articles pages, and the full Shopify store.

My Role

I was the co-creator and UI/UX designer. I designed each iteration, user tested, communicated milestones to the CEO, and built the final product.


March 2018 - May 2018

Challenges I Faced

This was my first time designing a complete site from scratch. Other than the general guidance from the CEO in terms of what fundamental pages needed, all decisions were left to my discretion.

Establishing an appropriate voice and a personality for the site was the most difficult part. A website should not only inform users or boost sales, but it should also capture the user's attention by creating a pleasurable experience.

Further, this was my first time designing and building in Shopify. From understanding conversion metrics to customizing liquid files within the theme, everything was a new hurdle to overcome.

Things I Learned

Designing around the target customer.

Cup & Leaf targets those aged 25 to 60 years old with average to above average income. A minimalist layout and theme was best to appeal to this demographic because it's easy to navigate and understand. The grid layout of equally-sized cards is easy on the eyes, and the font pairing of Arapey and Lato establishes a clean hierarchy. Further, the information featured appeals to every age, from trendy luxury tea to general wellness solutions.

Implementation in Webflow & Shopify.

Prior to this project, I didn't have any experience with implementation beyond building a few basic projects in HTML/CSS. Learning how to build sites that look nicer, have more advanced features, and reduce time spent learning how to code was extremely useful for future projects. Further, learning how to alter theme files in Shopify is useful for any designer because it's such a popular and powerful platform for e-commerce companies.

Designing to boost sales.

The primary goal of the site is to maximize revenue through tea sales. I designed and built the blog and store to include marketing tactics such as pop-ups, checkout messaging, banners, reviews, and more. Further A/B testing will be performed over the coming months.