Challenge

Improve an outdated and inconsistent web experience across 3 different subdomains. Multiple site approach causing consistency issues for like content due to fragmented approach to the regulatory review process.

Opportunity

• Simplify sitemap and navigation by eliminating duplicate content
• Improve and modernize design based on user research and analytics
• Build a design system to govern a more cohesive and structured design experience
• Align design and development to a consistent methodology
• Guard against version control issues while working on multiple sprints
• Improve developer handoff that leads to less dev and QA time

Role

Design Lead: Responsible for the whole end-to-end experience

Research and insights

User research was conducted to gain deeper insights into what our users found valuable and we tested different user pathways throughout the website leading to high value actions including our main KPI of registration for our CRM streams. This research and review of our analytics, led to a number of insights that informed our designs including the following:

Wireframing

These key insights were central in defining our approach to each page within the site. Here are just a few of the different improvements we made in the new experience:

• UX and strategy teams collaborated to define the story flow and hierarchy of each page
• Deprioritized lower impact pages to in-page navigation rather than continuing to overwhelm users with too many nav choices
• User journey pathways were defined throughout the site
• In-page navigation was established for navigation to lower value pages
• Reduced Sign Up experience from 6 pages to 1 by utilizing multiple step forms that dynamically populate subsequent sections based on key selections

Visual design

Based on the wireframes, research insights and brand guidelines we explored different visual designs for a homepage and secondary page. Photography, illustration, and icon elements were adopted from the overall brand for consistency with other branded materials in market. We explored some variation in prominence and hierarchy of elements to achieve two different design directions.

To create designs for all pages of the site we split them up into three groups so that we could introduce continuous feedback and refinement through the course of our full design process. With Abstract we were able to gather stakeholder feedback simultaneously and more quickly than with our previous method of building presentation documents in Acrobat. We also consulted with our client services and strategy counterparts to ensure we understood the requirements and were keeping our changes within the scope of the project. Some of this was done through ceremonies three times a week while other more in-depth conversations happened as needed.

New ways of working

Another challenge for this project was our shift from designing in Photoshop to Sketch. This presented an opportunity to infuse more product mindset into the team to support our system approach. I hosted several training sessions to supplement team learning and teach both how to work in our Sketch files and how to edit the library in Abstract. The learning curve was steep but the team was enthusiastic to learn a better tool to design for the web and welcomed the challenge.

Results

The launch of the new site was a major milestone for the brand. The new look of the site replaced a design that was five years old that contained a number of outdated design patterns. We pioneered new workflows with our internal team as well as the external development team and set a promising foundation for future sprints to iterate on existing content and functionality.

• Increased efficiency in review and approval of cross-audience content such as Savings & Support and Important Safety Information
• Adopted new Sketch/Abstract design workflow
• Systematic approach to consistent UI patterns throughout experience
• More detailed design handoff utilizing Jira and Zeplin
• Completed 12 sprints since launch in 2020

What’s next?

Just like any other product, we need to iterate and improve it over time. While numerous business needs drive the content of the site, we continue to make recommendations to improve other aspects of the experience including:

• Encourage opportunities for user research
• Mobile design approach still has opportunity for improvement
• Redesign opportunities for content that has grown beyond the scope of original designs
• Audits needed to improve accessibility
• Regular performance audits needed
• Maintaining a backlog of feature improvements and recommendations