Clement & Pekoe is a Dublin-based coffee shop and tea emporium that has been trading for over fifteen years. In 2022 I worked with them to refresh their online store and develop a custom Shopify site that could better support the growing importance of ecommerce.

Year

2022

Sector

Retail

Tools

Figma
Shopify

Workplace

Year

2022

Sector

Retail

Tools

Figma
Shopify

Workplace

Sector

Photography: Johnny Mallin

Mockup of a laptop showing a section of the clement and pekoes's website, namely the shop page with a grid of loose tea images
Mockup of a laptop showing a section of the clement and pekoes's website, namely the shop page with a grid of loose tea images

Challenges

The existing site needed to serve two distinct purposes: selling their range of teas, coffees and related products online, while continuing to provide useful information about their physical cafés.

The challenge was to give ecommerce a much stronger presence without allowing it to overwhelm the character and informational needs of the stores. I also identified opportunities to simplify the content architecture, clarify product categories and introduce a more conventional navigation structure.

detail from the our coffee's section on the about page, with an image of coffee packets stacked on shelves and a list of coffee roasteries that they stock
detail from a product page, showing loose tea in a circle with infromation about it and an add to cart button
detail from account login page
detail from account section on the site showing previous orders
detail of the cart page with a product in it
detail from the our coffee's section on the about page, with an image of coffee packets stacked on shelves and a list of coffee roasteries that they stock
detail from a product page, showing loose tea in a circle with infromation about it and an add to cart button
detail from account login page
detail from account section on the site showing previous orders
detail of the cart page with a product in it
Full lenght screenshoot of the homepage
Full lenght screenshoot of tea classes page
Mobile version of the teas section on the homepage, showing a grid of products
Mobile version of the locations section on the homepage with an image of the front of one of the cafes and the opening times and location
Mobile version of homepage landing section with gallery showing barista pouring a coffee and intro text to the site

Decisions made

Through a collaborative process, I refined the product range into four key categories and restructured the content hierarchy to place ecommerce elements at key points throughout the experience.

I introduced a clearer navigation system and streamlined the overall user journey, creating stronger pathways to products while retaining the information needed to support their physical locations.

Full lenght screenshoot of a product page showing coffee specific details
Full lenght screenshoot of tea shop page, with a full grid of products
Mobile version of a product page showing a herbal tea and the description
Mobile version of the cart page with several products in it
Mobile version of the top of the about us page, with an intro text and an image of their own brand tea range

Outcomes

The resulting site presents Clement & Pekoe in a more direct and accessible way, creating a simpler shopping experience while maintaining the character of the business and making its products available to a wider audience.

Additional Contributors

Photography: Johnny Mallin