PROBLEM:
No Design Standards
Solution. A design system that sets the standard.
I helped create Flora, MongoDB’s design system, from scratch. With over 570 design tokens, a codebase synced with the Figma designs, and a revamped design team ethos, we were able to create a highly useful design system for multiple teams.
Foundational styles for the design system. Color palette scales, typography scales, sizing and spacing, shadows, grids, and theming choices.
Flora's atomic components, such as buttons, inputs, tabs, cards, code panels, alerts, interrupts, icons, tags, badges, and tooltips.
Token Studio was the bridge between Figma and the code base. All token decisions were made by designers and passed over to Storybook through a conversion script.
PROBLEM:
NO DESIGN TEAMWORK
Solution. Assemble a team, build trust, repeat the process.
The design team used Flora to create CMS components that we combine together to quickly create pages. I redesigned our team process to be more clear and efficient, resulting in faster publishing times, greater design consistency, and an efficient codebase.
I took on larger strategic projects as a designer, but then also offered design guidance, career advice, and process improvements to my team.
In partnership with the development team, we created a set of CMS components to streamline page creation. Each component has multiple variants, giving us flexibility in assembling a page.
We made great efforts to simplify page creation with external stakeholders. Some key items being copy documents that outlined word counts, fields available, and screenshot previews. Secondly, a dedicated Figma file.
PROBLEM:
No TESTING OF NEW IDEAS
Solution. Partner with growth team, then dare to dream.
On top of the brand transformation, we continued to experiment on key journey pages, such as the Homepage, Registration, and our products. The experiments let us flex creative freedom, and learn some valuable lessons along the way.
The brand transformation was a year-long project. It launched on November of 2021. The site at the time was getting around 1.2 million visitors per year.
We set up 40+ experiments for the homepage. Through this process we significant decreased bounce rates, created a framework for personalization, and we saw improvements to conversion rates, page interactions, and scroll depth.
Registration is another significant experimentation page. There were a number of challenges we aimed to overcome, and we ended up significantly increasing conversion rates.
www.mongodb.com
