[Digital Product] Apply a new visual system and enhance the user experience.

The leadership wants to apply the new corporate visual system to our product website. The issue is that we are in the same industry but sell different products and target different audiences. Our challenge is to adopt a new visual system and tailor the UX to our customers. However, this is also an excellent opportunity to modernize our product, the presentation-layer design, and the information architecture, boost self-service efficacy, and improve task success rates. Another challenge is the design limitation. The leadership wants to unify the front-end code to reduce the technology solutions team's workload. So, design changes will be limited.

Project Details

1. The Problem & Challenge

Clearly articulate the limitations of the previous state or the business challenge.

• Problem Statement: "The previous Healthy Paws digital presence's complex navigation, generic overall presentation, and poorly structured content created obstacles for users, particularly existing customers attempting core self-service tasks."
• Key Challenge 1 (IA): How to structure the complex ecosystem of product information so users can quickly find their specific path.
• Key Challenge 2 (Trust): How to modernize the visual design to feel premium and contemporary while maintaining the high degree of financial trust and stability the brand represents.

2. The Design Process

A. Discovery & Research

• Methodology: "We conducted a comprehensive audit of the previous site and performed stakeholder interviews (Legal, Marketing, IT) and quantitative analysis (using Google Analytics/Hotjar) to identify the highest drop-off points in the user journey."
• Key Insight: Prospects jumped right into the acquisition funnel, then exited after receiving an insurance quote.

B. Strategy & Architecture

• Solution: We conducted user testing and placed highly searched information right underneath the Call-To-Action UI. This approach immediately increases page scrolls by 80%, delays funnel entry, and consumes product information before enrollment, resulting in a 3.8% increase in enrollment.
• Output: Information Architecture maps, user flows, and wireframes focusing on the critical product information task flows.

C. Execution & Design System

• Solution: The great thing is, we already have the visual system to utilize. So we can focus on the core user flow and restructure the information using new UI components. We also decided to incorporate the existing brand color scheme, new brand font, and UI styles into the visual system for consistency. This ensured visual consistency for brand alignment and accelerated design delivery timelines.
• Focus Area: From the preliminary research, 80% of participants had trouble scanning the navigation menu due to its complexity. So, we decided to emphasize the design of the mega-menu components to house high information density in an organized, scannable manner. Also, we tested the new button color and font size to see if it's causing any friction.

4. Results & Impact

We learned a lot through qualitative pre-launch user testing and saw promising results.

• Metric 1: Task Completion: The redesign of the main utility navigation resulted in a projected 8.2% increase in lead generation and a 1.7% increase in enrollment.
• Metric 2: Engagement: Optimization of the IA and content flow reduced the exit rates by 12.3%.
• Metric 3: Adoption/Efficiency: The implementation of the new visual system and template allowed engineering to deploy new features in subsequent phases 30% faster due to standardized components.

5. Lessons Learned & Next Steps

• Reflections: The complexity of balancing the corporate visual system with our UI system stems from the fact that our brands are completely different markets and audiences. However, I found a way to restructure the IA and content flow based on the user research. The user completed the core tasks in this new experience.
• Future Scope: Although the results seem promising, they are based on pre-launch qualitative testing. A quantitative test was not part of the roadmap. I will understand more once I have enough data from real user behavior after the launch.

Next Project →