As a Shopify web designer, I worked with our development team to improve the UX of the Chester Zoo Gift Shop through user-first web design to improve conversion rates.
Online shopping is becoming one of the fastest growing trends worldwide. Just four years before the COVID-19 pandemic, the total value of global ecommerce transactions was 2.5 trillion dollars. When the first lockdown hit in early 2020, many people shopped online for the first time. As a result, global ecommerce transactions went up to 5.9 trillion dollars in 2022.
Even as things are getting back to normal, it looks like the trend of shopping online is here to stay. Once you get a taste of that convenience, it’s tough to go back…
Ecommerce also offers accessibility to everyone, thanks to services companies like Shopify or Squarespace, and digital marketplaces such as Amazon or Alibaba.
Shopify e-commerce for Chester Zoo
There are many ways to support Chester Zoo on their mission to prevent extinction. Visitors can donate in multiple ways through the website, including through every purchase made on their online gift shop.
Chester Zoo commissioned Ultimate and our Shopify web designer specialists to redesign their ecommerce site to optimise and increase conversation rates. We also had to create a seamless journey and connection between the Chester Zoo main site and the Shopify online shop.
SHOPIFY ECOMMERCE UX REVIEW
How to choose the right Shopify theme
Shopify is an ecommerce platform that allows retailers of all sizes to build online shops with an extensive suite of services, including checkout payments, shipping, marketing, and customer engagement tools. These templates are an overall design and layout of the front end. They determine how your online shop looks.
We conducted an in-depth review and comparison of the current theme against other templates that included the most popular ecommerce features. We focused our analysis on three main aspects:
- Ecommerce tools and features to improve the user experience.
- Content that engaged with users.
- Design features and the level of flexibility available to customise the theme.
Current theme review
Envy was the Shopify theme used on the old Chester Zoo gift shop. It offers an intuitive design with four visual styles templates. The theme is great for flash sales as it has been designed with features for running time-based promotions. Some of these features include; a countdown timer, display discounts, promo banners and popups or free gifts.
In order to understand the features included in the theme, we duplicated the old shop to test the available components and sections. We also tested the full user flow for the checkout process, and compiled a list with recommendations for improvements:
- Design customisation.
This theme can be easily customised to reflect the Chester colours and typography. However, editing code is necessary to better reflect the branding. - Filtering features.
More advanced filtering options could be added to better improve the UX, such as adding product type or price, as well as the ability to sort results options such as by best selling, featured, alphabetically or top rated. - Listing product pages.
Having the ability to add ratings and reviews would count above the product price.
An integrated modal “quick view” is available to visualise the product details on the same listing page. The modal also allows users to complete other actions like selecting “add to cart” or “buy now”. - Product page and checkout
Adding more actions like a “add to wishlist” button would be beneficial.
Having the ability to add ratings about the product price, and a review count can help users decide which product is perceived to be better.
Including a shortcut link on review count allows the user to navigate to the review section.
Customer Reviews are important. Customers rely on online reviews as a valuable source of product information.
The ability to highlight the charity message of Chester Zoo in the product benefit section allows a reminder that part of the cost of the product is invested in the mission of preventing extinction. This allows for the introduction of cross selling during the checkout process.
Alternative Shopify themes
We also compared the current theme with other alternatives that included the tools needed to maximise the conversion rate: advanced filtering, SEO, promotions, flexible and customisable sections, etc.
The first one, Wookie, is a great theme for versatility with an extensive library of prebuilt layout pages and content blocks for any specific needs and requirements. The wide variety of layouts and sections make this theme highly customisable. The second theme, Boost, is great for editorial content with feature-rich sections to support brand storytelling.
All three themes include all the popular ecommerce features. We chose Boost as the final Shopify theme because the new gift shop needed longer-form text sections and video content to show and explain the product benefits: how every purchase can help with their conservation projects around the world.
UX recommendations to increase the conversion rate
With a final theme chosen, we created a list of actionable recommendations for design improvements and a better Shopify ecommerce UX:
- Clear product categories
From soft toys to botanic gins, the Chester Zoo online shop has a wide range of products. We suggested that a reduced number of main categories be accessible from the main navigation, with a dropdown feature added to expand the rest of the product sub-categories. - Fast search function
We suggested that the search bar be accessible from every page with suggested matching results dynamically pulling through as the user types a query. - Advanced filtering
We recommended filtering options on product list pages, prioritising price range as the most important factor for the customers to narrow the search.
We suggested that a dynamic sorting function be added to change results immediately once the user chooses an option (featured, price, best selling or top rated). - Better product images
We recommended that we reshoot the product range to allow for high quality images with intricate product details more visible. This was to enhance the online UX ecommerce experience.
We also suggested that the hero and CTA images be curated in a more creative way to get customers excited. - Reward customer reviews
Reading reviews has become one the most valuable sources of product information. The previous Chester Zoo gift shop didn’t show reviews, which we felt should change so that we can help users make decision about what to buy. We recommended that the new ecommerce site encouraged customers to write reviews by offering discounts or gifts in return. - Brand storytelling
We recommended that it be made clear what the shop is about with compelling and strong copywriting. Call to action and products benefits should be added to highlight the message that every purchase helps the zoo on its mission to prevent extinction. The Shopify theme chosen also has flexible sections such as longer-form text and video. This allows for more immersive content to support this brand storytelling. - Follow up on abandoned cart
We suggested sending reminder emails to customers who didn’t complete the purchase. These emails are a marketing opportunity to include discount or any other relevant messages. - Frictionless checkout
We suggested that the show only essential information required to complete the purchase. This minimises the navigation options to return to the online shop.
UX/UI DESIGN
Styling the new Shopify theme
UI and component styling
The Shopify theme chosen contained four versatile styles. We selected the one closer to the Chester Zoo brand look and feel. We focused on the first key aspects of the UI styles: colour scheme and typography.
Shopify provided a theme customisation interface where we could apply direct styling changes without editing code. The colour scheme was customised in different UI elements, such as buttons, links, backgrounds and text. The playful Chester Zoo fonts were defined for text elements, such as headings, paragraphs and navigation.
The Chester Zoo brand is full of irregular and organic shapes. In order to ensure consistency with the brand, the code needed to be edited. We edited sections and many UI elements, such as buttons, CTAs and forms.
Abandoned basket
Follow up emails on abandoned carts was one of the key UX recommendations to improve the conversion rate. These emails provide a second chance to convert customers. They not only have the potential to recover lost sales, they also contribute to customer engagement and personalisation opportunities.
This proactive way to engage customers helps to create a connection with the charity mission of the zoo. They create compelling messages and CTAs to the sections of the gift shop where customers can learn more about this conservation work.
Tailoring messages based on the products left in the cart was a marketing opportunity to offer specific discounts and incentives.
Prototyping
We designed directly the high-fidelity key wireframes of the booking process for mobile and desktop. This ecommerce site didn’t need the evolution from low-fidelity to high-fidelity wireframes because we had to redesign these key wireframes on a new Shopify theme keeping the overall structure.
CONTENT CREATION
Compelling copywriting and product photography
Another important aspect of this project was the content creation. We wanted to use images and compelling copywriting to create a connection with the charity mission of the zoo. The chosen Shopify theme had to be optimised for editorial content, with longer-form text sections to support the Chester Zoo brand storytelling.
Regarding the photography, Ultimate commissioned photographer Alex Wright to create high quality product images with more detail visible. We also created a photography style guide to produce hero and CTA images to get customers excited.
WEB DEVELOPMENT
Deeper customisation on the Shopify theme
Editing code
The CZ brand contains irregular and organic shapes which make it unique. Our development team edited the code to ensure consistency with these branding patterns. We rolled this out across all the components sections and many UI elements, such as buttons, CTAs and forms.
Using the code editor to make changes to HTML, Liquid and CSS file, we modified aspects of the layout, styles and functionality.
Payment getaway integration: stripe
We also had to add extra functionality with third-party integrations such as stripe. This is a popular online payment gateway that provides a set of APIs and tools that enable businesses to securely process online transactions.
Why not check out the new Chester Zoo gift shop? Or for more information on our UX design for ecommerce, read more here.
