Project Overview:
Role: UX Designer
Duration: 1 Year 6 months
Team: Collaborated with UX Team, Product Managers, Developers Ecommerce and Marketing Teams
Tools Used: Figma, Sketch, Adobe CC, Content Square, UserZoom, Adobe Analytics, HTML, CSS, Jira.
Background:
Ernest Jones needed to replatform their existing website and CMS to improve user experience, increase performance, and give flexibility to content teams to enhance the customer facing experience. The goal was to transition both the back and front end of the website to eleviate constraints around the user experience, SEO and speed performance.
Problem Statement:
The existing website was slow, difficult to manage or update on a daily basis and restricted around mobile capacity.
The content management system (CMS) was outdated, limiting the team’s ability to update content and implement new features.
Project Goals:
- Improve website speed and performance.
- Enhance a responsive website with a strong focus around mobile.
- Increase user engagement and conversion rates.
- Implement a flexible CMS that allows for fast easy content updates and scalability.
Process
Research:
Analyzed user behavior using Content Square and UserZoom to identify pain points and areas for improvement.
Conducted stakeholder interviews to understand business goals and requirements.
Conducted competitive analysis to benchmark against industry standards.
Analysed new platform capability.
Planning:
We developed a project roadmap with clear milestones and deliverables.
Collaborated with developers to assess technical requirements and platform options.
Defined key performance indicators (KPIs) to measure project success.
Analysing all content pages by user views and SEO value and removing legacy out of date content.
Design:
Developed wireframes with full UI using Sketch.
Conducted usability testing sessions to gather feedback on designs.
Design new components that allow for content flexibility.
After Completion of the project, moving our design library from Sketch to Figma.
Development:
Worked closely with developers to ensure seamless integration of design and functionality.
Provided HTML and CSS snippets for bug fixes.
Implemented new CSS for custom components allowing content flexibility.
Testing:
Conducted extensive full QA testing to ensure the site was responsive, accessible, and free of critical bugs.
Testing all customer facing content and assisted with content and bug fixes.
Launch:
Coordinated with the ecommerce team to during the phased launch.
Monitoring site performance and user feedback post-launch to address any issues promptly.
Solution:
Redesigned the website with a mobile-first approach, ensuring a responsive and intuitive user interface.
Migrated to a modern CMS that allows for easy content management and future scalability.
Optimized site size, evaluating all the pages that were set to be migrated and cutting unnecessary content.
Impact:
Reduced page load times.
Made a better experience for our primary customer base on mobile.
Improved conversion rate.
Relieved day to day content workflow issues.
Align legacy style branding to up to date branding.
Learnings:
The importance of user-centered design in improving user experience and engagement.
Effective collaboration between design, development, and marketing teams is crucial for project success.
Continuous testing and iteration are key to addressing user needs and improving site performance.
Homepage
Category links were given the primary CTA treatment as one of the highest clicked items on the homepage.
A new homepage was designed to maximise a clean brand image with obvious selections for customers. It is built for mobile with the flexibility for it to scale to desktop.
Category Page
Working closely with our SEO specialists we needed to create a landing page for each category that would both help users find the highest selected sub categories whilst supporting our traffic requirements.
Each category page was personalised and in this example there was an emphasis on brands before style as our data supported that a high majority of customers shopping for watches have already chosen a brand.
Product List Page
The new product list page had a priority of our quick links that has a high engagement from users highlighting the most used filters with a horizontal scroll on mobile so we could have products above the fold.
The PLP now has new accordion style filters ordered by use depending on the category. Wishlist heart icon was also added to this stage in the journey with a supporting compare function that allowed customers to see a detailed analysis of product specification and features.
Product Details Page
One of the most important pages in the customer journey. Product details in jewellery needs to emphasise images. Using pips for mobile to show scrolling, an ability to save to wish list, share and shop similar all sit within this section of the page.
A notify me to out of stock products and add to basket need to be represented with a primary CTA to stand out on the page. Easy accessible product information and specification sits within accordions to assist with load speed whilst allowing the user to ease of access to each section.
Brand Page
As some users have brands in mind it is important to support a premium brand specific tailored to each brand.
These pages have bespoke created components highlighting brand specific features and in this case you can see specific Omega series links to dedicated PLPs.
Customer Service HUB
A self serving customer service HUB is always a good way to help customers find what they need without having to wait on phone lines to speak to a represetitive.
By recategorising from our old customer services area we have made a central HUB that allows for direct linking to our additional services as well as the frequently selected requests.