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:
HSamuel sought to replatform their existing website and content management system (CMS) to enhance the overall user experience, improve performance, and provide flexibility for content teams to optimize customer-facing elements. The goal was to upgrade both the backend and frontend systems to address limitations related to user experience, SEO, and website speed.
Problem Statement:
The existing website was slow, challenging to update, and had limitations in terms of mobile responsiveness.
Additionally, the outdated CMS restricted the team’s ability to efficiently manage content and introduce new features.
Project Goals:
– Enhance website speed and performance
– Build a fully responsive website with a focus on mobile optimization
– Boost user engagement and conversion rates
– Implement a scalable CMS that allows for quick and easy content updates
Process
Research:
Analysed user behaviour using tools like Content Square and UserZoom to identify pain points.
Conducted stakeholder interviews to align business objectives with project requirements.
Performed a competitive analysis to benchmark industry standards.
Reviewed platform capabilities to ensure alignment with business goals.
Planning:
Created a project roadmap with clear milestones and deliverables.
Collaborated with developers to assess technical requirements and platform options.
Established key performance indicators (KPIs) to track success.
Audited content pages based on user views and SEO, removing outdated content.
Design:
Developed wireframes and high-fidelity UI designs using Sketch.
Conducted usability testing sessions to gather feedback and refine designs.
Designed new, flexible components for content management.
Transitioned the design library from Sketch to Figma post-project.
Development:
Worked closely with developers to ensure smooth integration of design and functionality.
Provided HTML and CSS snippets for bug fixes and custom components.
Implemented new CSS styles to support content flexibility across the sit.
Testing:
Comprehensive QA testing to verify responsiveness, accessibility, and the absence of critical bugs.
Reviewed all customer-facing content and assisted with final bug fixes.
Launch:
Coordinated with the eCommerce team for a phased launch.
Monitored site performance and gathered user feedback post-launch to quickly resolve any issues.
Solution:
The website was redesigned with a mobile-first approach, creating a responsive and intuitive user interface. The team migrated to a modern, scalable CMS, allowing for easier content management and future growth. The site was optimized by auditing and removing unnecessary content, ensuring better performance and user experience.
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:
Emphasizing user-centered design is essential for improving user engagement and overall experience.
Strong collaboration between design, development, and marketing teams drives project success.
Continuous testing and iteration are critical for addressing user needs and optimizing site performance.
Homepage
Primary call-to-action emphasis was given to image category slider, recognising their high click-through rate on the homepage.
A fresh design for the hero section was optimised for mobile-first usability carousel while maintaining scalability for desktop by removing the carousel and showing all three tiles of content.
Category Page
Collaborating closely with SEO specialists, we developed landing pages for each category to guide users toward the most frequently selected subcategories while meeting traffic objectives.
Each page was tailored to user behaviour. For instance, the diamonds page prioritises subcategories before price, based on data showing that the majority of shoppers going through this journey.
Product List Page (PLP)
The revamped PLP prioritises user engagement with quick-access links and the most-used filters displayed prominently. A horizontal scroll was introduced on mobile, ensuring products remain visible above the fold.
New accordion-style filters, organised by usage and category, improve navigation. Additional features include a wishlist heart icon and a compare function, enabling customers to analyse product specifications side by side.
Product Details Page (PDP)
A crucial step in the customer journey, the PDP highlights detailed product imagery with mobile friendly scrolling pips. Features such as Save to Wishlist, Share, and Shop Similar are integrated into the design.
Key actions like Notify Me for out-of-stock items and Add to Basket are presented as primary CTAs for prominence. Product details and specifications are accessible through accordion menus to optimise load times while ensuring easy navigation.
Brand Page
Recognising that some customers have a specific brand in mind, these pages are tailored to showcase brand specific content.
Customer Service Hub
A self-service Customer Service Hub streamlines customer support by enabling users to find answers without waiting on phone lines.
The redesigned hub organises resources into a centralised, user friendly structure, offering direct links to additional services and addressing frequently requested needs.