Redesign state retirement savings program’s website to increase financial literacy for the residents of Connecticut for savers and employers.
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
Team
Design Manager
2 Product Designers
Tech Lead
1 Engineer
1 Copywriter
Tools
Figma
Links
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.
Brand Colors, Timeline, Client Feedback, State Regulations, Legal Compliance, ADA Compliance
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.
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
Before
After
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.
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.
Updated with users in mind. We kept the sitemap in tack, but with slight modifications.
Simplifying catergory headers and removing the Spanish section to create a translation option
*Resource and FAQ are nested togglable pages.
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.
After creating what the base design was, our Design Manager created a based template and design system to jump-start design of the website.
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.
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.
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
1
Expansion of navigation for ease of search through different tabs. Everything is in one place for the user to scan through pages.
2
Addition of colors adjust of color palette to make brand more accessible.
3
Options to translate to a user’s native language helps ensure the user understand the information.
4
Special attention was taken when design the mega navigation for the mobile breakpoint.
Initially the website had an dropdown menu with menu items that are pages of themselves with other nested sections within 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.
The side car navigation works as a hover or clicking the arrow to dropdown nested content.
The mega navigation works by clicking the menu button to open an expanded menu with all menu option choices.
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.
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 GuideSince the brand colors were vibrant highly saturated colors, we adjusted the tint or shade to balance the color palette.
Expanded colors came from the originals
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.
Using the original colors was not accessible, the adjusted colors increased contrast to make the design more accessible.
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.
Savers Pages
Employers Pages
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.
Navigation translates with Español button
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
all 28 Pages designed
MyCT's colors and unique options both employer and saver personas shaped the design.
Some clients partnered with other client and this affected the branding.
Quick solutionsThe 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.
Some of the launched sites
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.
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.
The site launched with an adapted side-car navigation
After finalizing the website pre-launch, the client asked for some features that were out of scope to design and develop.
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.
During my 3 months at Vestwell, I launched 5 sites, learning to effectively use the design system to manage multiple clients simultaneously.
Emphasizing key elements for marketing communications sites and honed my ability to juggle client expectations while explaining the varying stages of site redesigns.
Working with a dedicated copywriter who specialized in legal language and localization, ensuring accurate and compliant content.
More time to understand the nuances of marketing communications to spend time understanding what data metrics we could use to better the design.