Formative: Design System
Continuously evolve and maintain product, design documentation, and brand
Role: Lead product designer and art director
Formative Team: Design director, lead product designer, marketing manager
Methods: User research, competitor analysis, task flows, sketching, wireframes, mood boards, visual design, prototyping, event tracking, animation
Project Tools: Figma, Pendo, Lottie, ClickUp
Being in a start-up environment, it is important to create guidelines that empower teams to produce and evolve materials.
Brand Guidelines
As the product immensely transformed over a small amount of time, the goal was to transform a few scattered documents into a fully matured system. Here were some principles in the foundation building:
Define a consistent visual language for the brand
Formative had many residual brand directions over a course of a decade. It was important to emphasize which aspect to maintain vs abandon.
Enable an open design system for collaboration
Once its foundations are set it is important to embrace scalability and complexity.
The idea was to empower builders to create consistent, high-quality experiences.
In many ways, I helped spearhead the beginning efforts of a single source of truth. Design systems are inclusive and should continue to include all teams through growth.
Govern continuous evolution
-
Screen Mock-Ups: Insuring how the product appeared on external materials (i.e landing page, marketing materials, experiential booths, social media).
Illustration Style: Establish when to use illustration vs photography to best demonstrate emotion and inclusivity.
Color: An area that had greatly evolved through product adjustment and had yet to be updated in Formative identity work.
We produced a new Formative landing page with the help of marketing to increase user retention and duration of stay.
The website redesign happened in 3 stages over the course of 3 weeks.
The design director, marketing managers, and I facilitated and produced:
Wireframing + Conceptual Ideation
The final direction would implemented after the exploration
Preliminary Attitudinal User Research
Discuss photography vs illustrations communication effectiveness
Language + Content Production
We created initial static motion and later our motions team would put in place the animations
My main role involved auditing the app, recreating components, preparing roadmaps, managing the designers, reviewing additions, discussing implementation engineers, creating documentation, and training teams in the usage of the system.
Brand System
Every aspect of Figma was overhauled during my first few months at Formative. The intial ground work for the organization was to establish:
Enable building at the foundational and component level.
Primary Accessible Building Blocks
Establish Figma pathways for squads to review ongoing and archived innovations.
Team Eco-systems
Establish file naming conventions with ticket information for immediate recognition.
Organization Conventions
-
![]()
Atomic Design Methodology
Atoms are the basic building blocks of all matter. For core elements and tokens, the first priority was establishing a foundational library.
-
![]()
The 8pt Grid
Spatial systems are important to any build. We created a linear 8pt system with common device sizes to aid in responsiveness studies.
-
![]()
Organisms, Templates, and Beyond
I would inspect code and rebuild common components which led to supplemental templates. These efforts cut cost and time of build for design teams.
With development, I spent several weeks auditing and consolidating the very unorganized approach to color styles to build cohesive tokens with our updated color system
I take great pride in component-building strategies. Our team's build method focused on a component’s ease of use verses complexity.
Areas of focus during component building are:
Use and state by enabling variants
Scalability by manipulating auto-layouts
Style connection (i.e color/type) for design token enablement
In addition, I created a system for product announcements using our illustration styles
A design system becomes more impactful with its counterpart – a manual.
For all internal teams, the manual guided users around usage and contextual examples. We detailed both simple and complex components in the system.
The prerequisite to building the design system for the product was getting everyone in the organization on board.
Component Process
-
![]()
Click Up
Via Click Up we managed all component and feature related tickets. There we managed a space for front-end task related to standardization and accessibility.
-
![]()
Github
Design had access to Github to aid in version control and collaboration of builds (UAT).
-
![]()
Chromatic
Supplemented team UI testing and approval before deployment and Storybook addition.
-
![]()
Storybook
Storybook allowed the final repository of UI. Allowing development to have an understanding of use outside of Figma.
-
![]()
Figma
The main program used by UXD to circulate new ideas and production documentation. Balsamiq was not used by UX.
A motion system in the final piece of a great design system
While Formative currently does not have in-depth documentation, I am actively working in the space to create micro and macro animations.
The product’s ability to accelerate learning was an area of focus in brand exploration.
This is a constant area of focus and more implementation will occur over the year of 2023. Below are some of my initial explorations to redefining the formative identity.
The visual system and implementation are just a few parts of my responsibilities at Formative. I actively help iterate and enable on improvements and future features as Lead Product Designer.