Challenge
The Roche Diagnostics website followed an outdated UI and an inconsistent design system that didn’t align with the parent brand, Roche. The content and navigation lacked clarity. The product presentation strategy had become misaligned with evolving user needs and business objectives. As a result, user engagement was declining sharply.
Agile Methodology
PHASE 1 - DISCOVER
Data analytics to understand
what was working well and wasn't
Guided the analytics strategy and research to measure website performance.
Using key metrics like bounce rate, exit rate, conversion rate, scroll depth, click engagement, and average active time, I evaluated the performance of pages across the Roche Diagnostics website and critical user journeys.
Tools used: Google Analytics, Adobe Analytics, and Contentsquare.
Observations and Prioritization
Data Insights laid the foundation for qualitative analysis.
- User engagement was alarmingly low, with a site bounce rate of nearly 80%, highlighting a critical experience breakdown.
- Pages were then prioritized for further user research based on the degree of disengagement and their business importance.
Conducting qualitative tests
Delivered 20+ analytics research reports,
translating complex data into actionable insights for data-informed design decisions.
Usability testing
Insights from the analytics study shaped usability testing tasks to identify root causes. Improvements were prioritized based on problem severity and alignment with business goals, ensuring a focused approach to addressing key user pain points effectively.
Tree testing the IA
41 healthcare professionals revealed that the IA is overly complex and primarily caters to advanced users. Of the 13 tasks observed, key issues included unclear navigation, scattered click paths, and challenges in locating "Services" and "Products" from the homepage.
Discover Phase Insights:
Qualitative and Quantitative Analysis
PHASE 2 - DISCOVER
Defining User Persona
Built from qualitative, quantitative, user research, this persona captures the needs, behaviors, and motivations of our primary users. It served as a reference point for validating design decisions and prioritization.
Task Flows
Built from qualitative, quantitative, user research, this persona captures the needs, behaviors, and motivations of our primary users. It served as a reference point for validating design decisions and prioritization.
Built a Design System with atomic framework
All New
Rebranded Experience
Purpose driven website header
Challenge: Header engagement was low, with only a few menu options receiving clicks, while the logo was frequently mistaken for a navigation item due to similar styling, causing user confusion.
Despite high interest in Products and Services, the header failed to support clear discovery and intuitive navigation.
Solution
-
Isolated the logo to the left to improve clarity and reduce accidental clicks.
-
Restructured navigation into primary and secondary menus based on user intent and click behavior
-
Introduced dropdown-based primary navigation to help users scan categories
-
Added secondary quick-access links (Search, Login, Location Selector, Contact) to enable direct actions without disrupting core navigation.
As a result,
-
Post-launch analytics showed increased header engagement and reduced homepage drop-off rates.
-
User interactions became more evenly distributed across navigation options
-
Led to improved discovery and multiple user flows adopted across the site.
Redefined the product category pages
Challenge: Products were grouped into multiple categories and subcategories, but the website lacked category based navigation. Users relied heavily on search and landed on long listing pages, making it difficult to find products quickly. This led to increased frustration and drop offs.
Responsiveness of Complex Components
Challenge: While filter component worked well on desktop, on mobile they occupied excessive screen space, pushing content down and forcing users to repeatedly scroll between filters and results.
Consistently validating iterations
Multiple A/B test was conducted in the live production environment to determine which journeys, design templates, and UI components worked best for website visitors.
After the designs went live, I conducted another round of analytics testing to assess the results.
Outcomes aftrer 3 months of launch
From Bounce to Boost
Knowledge Sharing
That’s me on a mission to share the importance of UX analytics with my colleagues at work!
Learnings and Responsibilities
As part of a team collaborating with the client, we revamped the entire website, rebranding, creating a design system, redesigning UI elements, developing components, page templates, and countless hours of brainstorming.
Rebranding, UI evolution
and quality design delivery
Gained hands-on experience in end-to-end website rebranding, including research, design system creation, UI redesign, component development, and collaborative brainstorming.
Collaboration and business value creation
Collaborated with cross-functional teams to refine designs for AEM development, gaining hands-on experience in project planning, stakeholder meetings, and visual design refinements.
Spearheaded UX analyticsto deliver actionable insights
From setting up of analytics platforms and processes to deriving actionable insights from user interactions, I could turn data into valuable experience recommendations that could drive impactful results.
Disclaimer
The following project involved collaboration with a prominent pharmaceutical company. Due to strict adherence to non-disclosure agreement (NDA) guidelines, the details of the project cannot be disclosed. The purpose of this discussion is to highlight the general concepts and methodologies without revealing any specific information or breaching confidentiality obligations. The website reference above is for illustrative purposes.
More Projects
Research · Interaction Design · Design System · UX & UI Design · Client Work
