Tea Ecommerce
Tree-to-Cup is a new purveyor of premium artisanal tea and needed a product eCommerce page designed, along with logo design for their new site. The business owners placed high value on their customer’s experience with their website and desired a functional design with ease-of-use as a top priority.
“A cup of tea is a cup of peace.”
Leaves to Love
Scope of Work
User Interface
Branding
Tools Used
Figma
Adobe Illustrator
Adobe Photoshop
Discovery & Development
I began by identifying the client’s aesthetic to create a mood board that would guide my design process. From there, I did some sketching to create a vision for components of the website and logo. Putting all the pieces together, I created the brand logo for Tree to Cup.
Planning the Interface
I began ideation for the layout with simple sketches to help get my thoughts flowing. Next, I pulled ideas from several sketches and combined elements to create an initial wireframe. I planned the wireframe based on best practices in UI design and the client’s preferences and requirements.
Elements important to include on the product page were:
customer reviews with a standard rating system and easily viewable
suggested similar products to browse
option to purchase item once or subscribe to regular deliveries all available on the main product page
Initial Design
First Mockup
My initial design followed my wireframe plan pretty closely for layout. The client provided product images and we agreed a white background would best showcase these photos. I accented the white with the orange and green shades from the mood board and used the neutral taupe shade in the top navigation and the footer to help support the warmth of the palette.
For typography, I combined serif and sans serif typefaces to best express the feeling and aesthetic that client desired. The serif typeface was fitting to support the elevated, upscale look of the product, while the sans serif typeface works for a modern, functional interface.
Refinements
Upon review of my initial work, the client requested more color and decorative elements in the design to add character. They also asked that the thumbnail images of the main product be larger to place more emphasis on the top level items. I thought those were great edits and I also felt the design needed more white space and breathing room. I incorporated these changes in the final design.
Final Design
The finished product page captures the feeling the client wanted. The layout is open and inviting and the interface is easily functional for a positive user experience. The addition of decorative elements of the willow leaf print and tea stains add color and character. The client was pleased and felt the design captured their brand.
Reflection
Creating this eCommerce page had additional challenges beyond the standard “Add to Cart” button in incorporating a subscription feature. It was good for me to think through the complications of making that work. I really enjoyed the process of developing this brand and learning more about artisanal teas.
