Developing a marketing site design system for Ellevest, a gender-aware investing platform.
View project details

Ellevest is a gender-aware investing platform that takes a goals-based approach to financial planning for women. Their marketing site is their main tool to deliver their key differentiators and funnel prospective clients into one of their two offerings.

Their current design process for maintaining or building pages on their site resulted in each page being more-or-less custom built. Bandwidth combined with lift was resulting in consistency and usability issues. The original proposal from their development team was to transfer their marketing site components into a Webflow component library.

Solving for consistency, efficiency, and usability my proposal was to create an updated and scalable design system before formalizing those components in Webflow.

This would, in turn, increase consistency on the marketing site, improve user experience and responsive design, and increase efficiency in the design, production, and development processes.

Site wide systems and styles
Once the audits were conducted the first design phase was establishing a style guide within Webflow’s client first framework.

One of the largest foundational changes was swapping out an outdated percentage based layout for a 12 column grid system and redefining breakpoints as well as the site’s approach to responsive design.

Each additional area provided further opportunity for improvement to accessibility, usability, and user trust.

Primary colors
Secondary colors
Background colors
Functional colors
Figma color styles
AAA + AA WCAG compliance testing
Fixed aspect ratio component
Icon library

Component specific
After the site-wide systems and styles were formalized I then started to work through components in batches using the prioritization established by the initial audits.

Net new components
Highly variable content components

The result was a holistic marketing site design system with an updated approach to responsive design, a set of design components built in Figma for internal designers use, and documentation for both the internal cross-functional team as will as for the external development team. This would then be build out as a Webflow component library using the client-first framework.

Read the full process write-up