MyCTSavings Redesign
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.
The Challenge
As part of Vestwell's effort to unify 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
Team
Design Manager
2 Product Designers
Tech Lead
1 Engineer
1 Copywriter
Tools
Figma
Links
Final Solution
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
$23k
cost reduction a year using the design system
twice as fast
design and development using the design system
17k new users
as of 30 days after launch
Before
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.
Iteration and ideation
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
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.
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.
Landing Pages
Featured Pages
General End Point Pages
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.
Side car navigation
The side car navigation works as a hover or clicking the arrow to dropdown nested content.
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
Color expansion
Since the brand colors were vibrant highly saturated colors, we desaturated them adding either white or black to add contrast.
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
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.
English employers pages are combined into 1 Spanish employer page
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.
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.
Removing text to simplify the experience
Home page
Mega navigation
Employers page
Saver page
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
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.
Mega navigation
The site launched with an adapted side-car navigation
Clients asks
After finalizing the website pre-launch, the client asked for some features that were out of scope to design and develop.
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
Marketing Communications
We launchd 5 sites in the 3 months I was at Vestwell, I learned how to utilize the design system to help me tackle multiple clients at once. I learned a lot what to emphasis for marketing communications sites.
As there are multiple clients who get the same sorts of sites, I had to learn how to juggle expectations and explain if other sites were at different points of being redesigned.
Language and Legal compliance
I was so glad we had a copywriter to help be an expert on exact verbiage of legal language and localization.
The sky’s the limit!
I wished to be able to spend more time understanding how all marketing communications worked to better design that would be reflected better each each type of savings program page.
