From defining a company wide product process to learning, building and implementing my designs using Shopify's Liquid language, my work a Vetevo was hugely varied.

Role

Senior UI/UX Designer

Date

July 2020—October 2021

Responsibilities

  • Full content audit of 50+ products
  • Migration from WYSIWYG app to a structured layout
  • Continuous A/B testing on key user journeys
  • Design specification for reusable Shopify sections
  • Assisting junior designers and interns

Tools

Sketch, Shopify Liquid, CSS, UsabilityHub,

Optimising the purchase funnel — Step 1: Identifying content management issues

I started this role the same day as a CRO specialist, and as a team of 2, we were tasked to increase the conversion rate of the Vetevo store. We soon established that the infrastructure was not suitable for us to perform experiments, make UX improvements, or even visual changes to the product pages unless a consistent template was created for all products. We also identified severe issues with the content that was being displayed, as well as how it was being managed by the content team.

For example, each time a new product was to be added to the site, an existing product detail page was duplicated - this included the content of the page, then any new content that was to be added was done so directly to this page. With the range of products being ~55, this resulted in many content inconsistencies. If one content block was being displayed on 5 different product pages, all 5 of those instances would need to be manually updated if there were any changes/typos. The same process applied for new content, this would be added manually, one product at a time.

Product page duplication was causing many inconsistencies.
Product page duplication was causing many inconsistencies.

Not only that, we also discovered that if a user were to visit a specific product page on a tablet device for example, they could potentially see a totally different product if they were to visit the same page when viewing on a mobile or a desktop.

An issue that no doubt resulted in an indeterminable amount of broken user journeys, aiding to the overall low conversion rate.

After doing the initial analysis of the product pages, we concluded the following issues:

  • No single source of truth for product page content
  • Duplicated content spanning across multiple pages
  • Labour intensive process to add new products/update content
  • An unknown number of broken user journeys from the parent collection pages
Depending on your device, you could end up viewing a different product when visiting the same url.
Depending on your device, you could end up viewing a different product when visiting the same url.

A complete content audit was carried out for over 50 products, which resulted in having 2 types of content:

  • Product specific content (High value: Required on product pages)
  • Generic content (Low value: Best suited for an FAQ/Knowledge base system)

After consultations with the team in the laboratory as well as product stakeholders, we managed to reduce the page content of key products by 65%.

I then started to work on ways to visualise specific types of content, as well as finding, and building, a solution whereby product content could be managed within Shopify itself, and not via third party WYSIWYG add-on application. Upon agreeing on a page structure that would work across multiple SKUs, the template was launched and we successfully migrated all product content into Shopify; meaning we could start to run experiments across multiple pages at once; something that was not previously possible.

This process was initially carried out on all product pages. After a successful migration, we followed the same process with collection pages, low traffic pages such as the company, careers and laboratory pages, as well as the company homepage.

Design specification for reusable Shopify sections

Whilst optimisations continued on other areas of the purchase funnel, Shopify released a feature which meant we could introduce reusable components across the site. I began to work on specifications for a number of components that would later be implemented for us by an external Shopify agency.

This process involved a number of considerations for each component; name, content options, alternative layout options as well as options to change the design. The image below highlights the options for the product row component.

Vetevo — Specification document for the Product row component
Vetevo — Specification document for the Product row component

After completing the specifications for all the components, I worked on a number of designs that would highlight the flexibility of what I had outlined in the specification. Designs for desktop, tablet and mobile were all supplied for development.

Vetevo — Example of the product row flexibility
Vetevo — Example of the product row flexibility

Various screenshots