Ahmad Tea
PROJECT TYPE
Platform Design
SKILLS
User Experience
User Interface
Design Direction
Ahmad Tea is a global tea company based in London, England. It sells a range of tea bags, specialty teas, and gifts in over 80 countries.
I designed the website for the US market by creating a user experience that catered to Ahmad Tea’s various range of teas by correlating the aesthetic and function to that of their global site. I focused on creating a fresh and rich look for their products by utilizing different lifestyle images that invoked the colors of the tea. This method created a nexus between color and tea type, allowing the customer to associate the brand with certain products.
Color System
Applied the brand’s signature color, Classic Dark Green, for graphic and text segments such as notification banners and CTA buttons and created a tea leaf illustrative icon that pops up when hovering over menu categories.
Font System
Utilized modern, yet timeless, fonts such as Futura PT for body copies and Playfair display for titles or headlines to mimic the packaging font of the products and create a further connection between the products and the website.
Home Page
Placed the full-screen hero module above the fold to allow the brand to introduce best sellers, new arrivals and highlighted collections. Added collection feature functionality and hyperlinked retail store carousel modules below the fold to enable customers to quickly look through tea collections and get access to the store locator page in case they are interested in purchasing the products in-person.
Collection Page
Created functionality to filter between tea bag and loose leaf and also added additional filtering buttons below the top header images to allow categorization by tea type. This layout ensures that customers can shop on one page without having to revert to the navigation page to find variations of a certain product. Designed simple circular badges such as the “Try me iced” badge to inform customers of available options.
Enabled customers to search for local stores on the store locator page to see where to buy directly.
Helped customers learn about how to prepare tea and caffeine level for their best tea tasting experience on the product page.
Provided a tea/latte recipe to facilitate a more interactive user experience in a dynamic layout.
Added cross sell module to promote products between each brand story module.
Provided customers with available recipes with different teas and enabled customers to preview the description of the recipe while hovering.
Created a simple and easily accessible mini cart that slides out by clicking shopping basket on the top navigation.
Product page
Organized all selectors (including Package type, Size and Quantity and Add to bag buttons) to mitigate confusion for customers. One example was integrating the two types of packaging options into one product detail page to reduce the steps needed to make a purchase. Also illustrated representative icons to allow customers to visualize tea preparation and caffeine levels.
Brand Story Page
