top of page
PROJECT NAME
ANDREWS SHOPIFY STORE
✅ Shopify Theme Development
✅ SEO Optimization
✅ Business Analytics
✅ Prototyping
📈 Increased conversion by 21%
Company: Andrews
Role: UX Designer
THE PROBLEM
Due to the Covid lockdown of their brick and mortar stores, Andrews needed to revisit their e-commerce site and maximize it’s potential as their sole way of staying connected with customers.
MY ROLE
I served both a consulting and task oriented role for this project. I was trusted to make UX related suggestions to better improve the experience for their customer and elevate the site both aesthetically and functionally. Once the solutions were approved by the CEO, I was then also responsible for implementation which required developing the Shopify theme.
MY IMPACT
The updated features lifted conversion by a combined 65%.
MY TASKS
TASK NAME
MEGA MENU
DESIGNERS MENU
Roughly 80% of Andrews shoppers were beginning their journey on the homepage and leveraging the mega menu for their next steps. The Designers drop down initially only showed an alphabetical range, and they all linked to a directory list of Designers.
TOP SEARCHED DESIGNERS
Looking into what designers were being frequently searched allowed me to understand which to prioritize in the Designers drop down.
NEW MENU DESIGN
Using the data of frequently searched, I created a column of Featured Designers where we could highlight them and have them easy to access (data screenshot and menu taken at different times). Using the alphabetical directory, the hierarchy was maintained while grouping the designers as a one-click menu. This made the Designers page redundant, allowing easier maintenance for the Merchandising team and also allowing the customers to more quickly get to the brand they wanted.
TASK NAME
PLP OPTIMIZATION
THE ORIGINAL PRODUCT LISTING PAGE
The original product listing page was very basic, with the Category title (What’s New) and a limited Filter and Sort. This made is challenging for users to know what options they had should they want to filter. The breadcrumbs were inaccessible which was something I proposed changing. As well as being able to highlight products with differing product flags for visual interest.
THE NEW PLP DESIGN
✅ the column on the left replaced the original Filter drop down, allowing the customer to see the customizable filtering options
✅ breadcumbs were darkened to increase accessibility and compliance
✅ a product flag was added to the top left corner of the product image to highlight Sale items and New items
✅ a product flag was added to the bottom right corner of the product image to highlight additional colour options that might not be included in the photo
TASK NAME
PDP OPTIMIZATION
THE ORIGINAL PRODUCT DESCRIPTION PAGE
The original product description page required the customer to open the size dropdown to see what sizes were available, leading to a list of sizes and which were sold out. It was an unnecessary click and particularly frustrating for customers whose size was not available.
This format was the same for colour variations, requiring the customer to open the dropdown to see what additional colours were available when applicable.
THE NEW PDP DESIGN
✅ all the available sizes were pulled out of the dropdown so the customer could see them all on page load
✅ the selected size was defined by the black underline, indicating which size would be added to the bag
✅ sold out sizes were easy to see in a greyed out state
TASK NAME
PDP OPTIMIZATION
THE ORIGINAL DESIGNER PAGE
Once a user selected a Designer from the list, they would land on a Collection page dedicated to the brand. On mobile, the bio took up most of the screen and showed limited product cards.
THE NEW DESIGNER PAGE
I truncated the Designer information and included a “Read More” to trigger the drawer. This allowed for more of the product cards to be visible on load and give the customer control over whether or not they find the description relevant.
TASK NAME
RE-TARGETING EMAIL ELEVATION
THE ORIGINAL RE-TARGETING EMAIL
The re-targeting emails were lacking the elevated branding seen elsewhere on the site. It provided little product information and was hard to read with centre aligned text.
THE NEW EMAIL
Left aligning the copy made the re-targeting email easier to read and provided more information about the cart and options on how to complete the purchase.
TASK NAME
STYLIST PAGE ELEVATION
THE ORIGINAL STYLISTS PAGE
Andrews is known for their knowledgable and personable stylists. So much so that they are featured prominently on their website and social media. In order to get to know the Stylists and perhaps discover who to connect with, the original page wasn’t communicating the same friendliness that someone could expect from the service.
THE NEW STYLISTS PAGE
The updated Stylists page showcases colourful and friendly photography of the team, with the name and location kept from the original but each card is clickable leading to the personalized page of each Stylist.
RESULTS
CONCLUSION & LIFT
This project was unique in the sense that the objective was less about conversion (while important) and more about elevating the site to reflect Andrews’ upscale retail environment. Since Andrews relies on their loyal and returning client base, the website needed to deliver the high end experience their customers were used to while still being configured within their existing Shopify theme.
Combined changes increased conversion by 65%
The tasks implemented above along with other UX recommendation changes including making the site more accessible, SEO optimization changes and leveraging Lighthouse ratings to increase site speed, resulted in a +65% conversion increase in the span of my working on this project.
bottom of page