Identify and implement improvements or new features to enhance the usability, accessibility and consistency across digital platforms
Duration
Sep 2022 - Now
Areas of responsibility
User research, Data analysis, Industry Research, Persona creation, Workshop facilitation, Prototyping, User testing
Project 01
E-commerce website: Web Refresh
The story
The project began with an alignment of perspectives between customer feedback and the leadership team. Insights gathered from customer feedback revealed issues impacting task success, time on task and user errors rates. Meanwhile, changes in business objectives sparked a need to revamp our website, aligning it more closely with our target customers and business goals, ultimately boosting website conversions.
With a cohesive vision among the E-commerce team, we systematically revitalised key pages like Product Detail, Product Listing, Basket, and Checkout in phase 1 of the Web Refresh, delivering a comprehensive upgrade to our website.
The project engaged two UX Designers, myself included, along with Product Owners, Developers, Testers, Data Insights, Customer Service, Legal, Loyalty, and Marketing teams.
Discovery & Key insights
Gathering customer feedback from tools like Usabilla and User Testing, examining customer data from Contentsquare and Google Analytics, and evaluating the UX design within our team, we have identified key pain points and various areas for improvement across the site. These include information overload, ineffective information hierarchy, unclear instructions, inconsistent design styles, and sluggish site speed.
Design & Validation
Before embarking on the design process, we assessed the tasks and established a timeline for prototype delivery. As we crafted various pages, we conducted competitor analysis and researched the latest trends in the skincare industry. Adopting a mobile-first approach, our design efforts were centred on creating a simple, efficient, and accessible shopping journey. Following design iterations, we conducted A/B testing and user testing to validate our designs.
Product detail page (PDP)
Size selector & Price display
-
The previous design placed too much emphasis on the display of prices, making them more prominent than sizes, and occupied too much space. The new design is cleaner and easier to understand.
Product listing page (PLP)
Quick filters
-
Instead of hiding the filter options behind a button, we now display some of the frequently used options above the product tiles for enhanced usability and efficiency.
Basket
Progress bar for free delivery/ promotion tracking
-
We have replaced the usual promo banner with a progress bar. It helps users track their spending for free delivery or promotions, encouraging more purchases as well.
Basket
Promo code field & Checkout button
-
For desktop and tablet users, we made the Promo code field and Checkout button sticky on the right-hand side of the screen. This ensures they're always visible without the need for excessive scrolling.
-
For mobile users, we are testing various approaches like relocating them to the top of the page or making them sticky at the bottom.
Checkout
Step tracker
-
We added a step tracker to the checkout process, displaying the number of steps and indicating the current step for clear instruction and navigation.
List & Map view of store locations
-
In the old design, users struggled to navigate the small pop-up displaying the list and map view of store locations. In the updated version, we moved both views below the search bar for easier access and improved visibility.
We have implemented numerous changes on these pages. Here are just a few examples.
Outcome
While further changes are in progress, we have already witnessed an increase in conversions on these pages. Moreover, we have observed a significant 27% surge in revenue compared to the latest 2023 forecast.
Design guidelines & Personas
Managing the design guidelines has become more complicated. In addition to maintaining the existing component library, I continually update and integrate new components, ensuring they are organised in a clear and developer-friendly manner.
In response to the evolving business strategies landscape, we tailored personas to assess our current services and identify potential future design opportunities. I created five distinct personas based on their loyalty level, behaviours, and connection with The Body Shop. Additionally, we considered their backgrounds, frustrations, wants, and needs.
Moving forward
For phase 2, based on our data analysis, we prioritised improving the checkout process, sign-up and sign-in journeys, refining filters and sort-by functions on the Product listing page, and enhancing the homepage.