Intergrating an Acquisition with Growth Design and Design Systems

Helping Connecticut Save for the Future

Redesign state retirement savings program’s website to increase financial literacy for the residents of Connecticut for savers and employers.

image of landing pages mobile and desktop

The Challenge

As part of Vestwell's effort to unify the newly acquired state savings program clients and support Unified Log In, a single platform for employers and savers, our team was tasked with redesigning the Connecticut Office of the State Comptroller’s savings program.

The redesign aimed to modernize the look while keeping the existing site map.

Role

Product Designer

Responsibilities

Product Design, User testing, Design Systems

Team

Design Manager,

2 Product Designers,

Tech Lead,

1 Engineer,

1 Copywriter

Tools

Figma, Lyssna, CSS

Links

Live site arrow_forward

Final Solution

MyCTSavings Website Home Page

Defining Success

The Marketing Communication sites help direct users to Unified Log-in, our success criteria is the client’s satisfaction which varies from client to client.

For My CTSavings, our client wanted the website to be a point of showcasing existing branding and messaging of the program.

Key Guidelines

Brand Colors, Timeline, Client Feedback, State Regulations, Legal Compliance, ADA Compliance

Targeted Users

We targeted users who are included in the process of setting up and contributing to an autoira savings account. Our primary users were savers and employers with payroll providers and other family as secondary.

Impact

17,000 new users

as of 30 days after launch

twice as fast

design and development using the design system

$23,000 reduction

in cost a year using the design system

Redesign Comparison

MyCTSavings Website Home Page

Before

arrow_forward
MyCTSavings Website Home Page

After

Defining the Problem

Claiming an acquisition

MyCTSavings, an autoIRA program, is part of Vestwell State Savings (VSS), which manages over 17 state savings programs, including ABLE programs and 529 plans. Following a recent acquisition, VSS consisted of several disparate brands that needed to be unified into a cohesive product.

Growth and Scalability

These savings programs vary widely in complexity and maturity, requiring a redesign that could accommodate the increasing depth of information employers and savers need to make informed decisions for their future and their loved ones.

Where do we begin?

Simplfying the sitemap

Updated with users in mind. We kept the sitemap in tack, but with slight modifications.

Things changed

Working with PMs and our engineers, to understand the existing site more we evaluated what parts of the site map could be changed and how we might adjust content for our new design.

  • Removed Spanish pages from the top nav and added a Spanish toggle button to translate the website for Spanish speakers.
  • Removed "us" from About us and Contact us.

Refined sitemap

sitemap of spanish

Simplifying catergory headers and removing the Spanish section to create a translation option

*Resource and FAQ are nested togglable pages.

Clear Hierarchy

Breaking down information into flows

The past design lack of hierarchy, our first step was creating a userflow of what content users might needed to know first and added hierarchy with typography, size, color, and icons.

Savers Userflow

MyCTSavings Website Home Page

Creating the Design System

Designing the Templates

After creating what the base design was, our Design Manager created a based template and design system to jump-start design of the website.

My Impact

As the base design system was very fundamental, I expanded the design system into a more detail breakdown with added components where there were none.

design system cover with components

Frontend collaboration

Since the previous design lacked a design system, a part of my work was creating the css for tokens and components that would work with our engineer.

Types of Designs

User Flow directed hierarchy

We created 4 different types of layout templates based on type of page. Pages are given visual hierarchy based on order in user flows.

MyCTSavings Website Home Page

Landing Pages

MyCTSavings Website Home Page

Featured Pages

MyCTSavings Website Home Page

General End Point Pages

MyCTSavings Website Home Page

Accessory Pages

Major changes I worked on

1

Navigation

Expansion of navigation for ease of search through different tabs. Everything is in one place for the user to scan through pages.

2

Color and Accessibility

Addition of colors adjust of color palette to make brand more accessible.

3

Localization

Options to translate to a user’s native language helps ensure the user understand the information.

4

Responsiveness

Special attention was taken when design the mega navigation for the mobile breakpoint.

1. Navigation

Expanding the navigation menu

Initially the website had an dropdown menu with menu items that are pages of themselves with other nested sections within it.

Why we changed it

Changed to the mega nav to make navigation more accessible and easy to scan. It allows our client to grow and add pages.

Expanded the width of our pages to accommodate for room to grow.

add graphic to show the dropdown
MyCTSavings Website Home Page

Side car navigation

The side car navigation works as a hover or clicking the arrow to dropdown nested content.

arrow_forward
MyCTSavings Website Home Page

Mega navigation

The mega navigation works by clicking the menu button to open an expanded menu with all menu option choices.

2. Color and Accessibility

Color was a big part of the client’s brand identity.

A major element of the design was to utilize all the colors, while making the website accessible for all users.

Why we did it

Considering accessibility it opened more opportunities for the business to use their colors in different ways.

This led to updating their style guide to maintain consistency across the brand.

Style Guide arrow_forward

Color expansion

Since the brand colors were vibrant highly saturated colors, we adjusted the tint or shade to balance the color palette.

color diagram

Expanded colors came from the originals

Client Communication

See it to believe it!

As an exercise to explore using their colors in their full strength, I created a color study presentation to help visualize how low contrast would affect the website.

Color Contrast Ratio Analysis

accessibility color visual

Using the original colors was not accessible, the adjusted colors increased contrast to make the design more accessible.

3. Localization

Designed to accommodate multiple languages

In our current version, we have condense the information and translated it into a major pages.

Since launch, 1.4K+ users have visited the Spanish pages trending with majority of users looking at the Employers page.

sticky notes with text representing the notes from user interviews

Condensing information

sticky notes with text representing the notes from user interviews

Savers Pages

sticky notes with text representing the notes from user interviews

Employers Pages

Technical Constraints

For the sake of technical constraints, English employers and savers pages are combined into 1 Spanish employer page and 1 Spanish savers page. Complete localization of all pages is roadmapped in.

The Employer and Saver pages were prioritized to give an overview and the essential information with an FAQ page to supplement.

In future versions, we would ideally have all pages translated.

MyCTSavings Website Home Page
arrow_forward
MyCTSavings Website Home Page

Navigation translates with Español button

4. Responsive design

Lesson Learned

While I was translating the mobile version of the Spanish designs, I realized that Romantic languages tend to be longer when translated.

This require special attention to smaller texts to adjust spacing and padding.

sticky notes with text representing the notes from user interviews

Removing text to simplify the experience

MyCTSavings Website Home Page

Home page

MyCTSavings Website Home Page

Mega navigation

MyCTSavings Website Home Page

Employers page

MyCTSavings Website Home Page

Saver page

Is it actually better?

User Testing

From the intitial design mocks and prototypes, stakeholders were still on the fence about implementing the new navigation.

  • I created a test in Lyssna and tested 25 users.
  • I tested the 2 prototypes of the side-car and mega-nav.

Results

Users took half the time completing tasks with the mega-nav design.

Users rated the mega-nav slightly more intuitive by 0.04 points.

add graphic to show the dropdown

Overall Design

The design was completed in a little less than a month from conception to launch. The design consisted of 28 pages.

all 28 Pages designed

Other Considerations

MyCT's colors and unique options both employer and saver personas shaped the design.

Client brand relationship challenges

Some clients partnered with other client and this affected the branding.

Quick solutions

The current technical constraints and I had the opportunity to design solutions for the latest launches that would have our long term solutions would be roadmapped in.

Launched Sites

Main Image
Thumbnail 1 Thumbnail 2 Thumbnail 3 Thumbnail 4

Outcomes

Client Feedback

The client’s response was overwhelmingly positive and only emphasized specific color/copy changes. As a team working with the client, we created new ways to use their colors and branding through the site.

Takeaways

  • Learned how to identify what is critical to focus on with a client
  • Defined success criteria for Marketing Communications site
  • Learn more about the process of from design to development

Limitations

code Need for resources

Due high demand of marketing communication sites, we were unable to launch a few things. Our sole engineer had many things to prioritize on the roadmap.

list Mega navigation

The site launched with an adapted side-car navigation

speaker_notes Clients asks

After finalizing the website pre-launch, the client asked for some features that were out of scope to design and develop.

handshake Managing acquisitions

The marketing communications sites were an acquisition from Sumday and will be further integrated into the Vestwell ecosystem.

Some specifics of the Unified Log In will be shifted and updates in other marketing communications for other programs would evolve the site more.

Reflections

During my 3 months at Vestwell, I launched 5 sites, learning to effectively use the design system to manage multiple clients simultaneously.

campaign

Marketing communications

Emphasizing key elements for marketing communications sites and honed my ability to juggle client expectations while explaining the varying stages of site redesigns.

assured_workload

Language & legal compliance

Working with a dedicated copywriter who specialized in legal language and localization, ensuring accurate and compliant content.

rocket_launch

The sky’s the limit

More time to understand the nuances of marketing communications to spend time understanding what data metrics we could use to better the design.

Recommended Works

a vr scene in a room with a chemistry equation on the board and a large human scale glass container with particles in it moving.

Known Source Redesign

Redesigned user experience for e-commerce marketplace to promote credibility and trust...

a vr scene in a room with a chemistry equation on the board and a large human scale glass container with particles in it moving.

Samsung Research America XR Design

Designed user experience of social interaction for an AI-powered digital human...