Fluxx Design System
PROBLEM SPACE
Disperse UI across the Fluxx platform has lead to some inconsistent interfaces for users.
SOLUTION
Build a robust and researched design system that improves user experiences and simplifies front-end development.
MY ROLE
Product Design and Prototyping
DURATION
2022-ongoing
TOOLS
Figma, GitHub & Miro
building design tokens
Following the principals of atmoic design I wanted to ensure that our design system color, typography and spacing was highly considered and researched before we began to build initial components. We wanted to ensure the design system once implemented was aligned with Fluxx’s current design architecture, through the following focus areas.
Sets of system colors that were separated into “functional” and “expressive”. Functional being tested for accessibility compliance and used widely across the system. While expressive was a pallete for our marketing team and any decorative elements within the site.
Robust spacing guidelines, first defined by our REM base we were able to build an incremental scale (1-8) that our engineers could easily translate into CSS.
Variable web font, selecting something variable was important for our team. This made it simple for our engineers and provided a ton of uniform options for the UX team
formalizing components
Once the tokens were defined and reviewed, I built, organized, and categorized 100+ individual components and their variants. To capture active, hover, selected, and inactive states across buttons, modals, flags, search bars, text inputs, and alerts, to name a few. These were reviewed and built by our engineers to allow for further testing.
thinking big with design patterns
Focusing on areas that impact our users most, we built mock forms with our components. We started with forms because they are the primary tool used to review grant requests and proposals. It was an essential place to begin for the industry we serve. We then worked with our engineers to build and test a live form moving the process outside Figma and into code.
With the form example built, our next steps are to begin the research phase to review the forms and components in the current system for usability, accessibility, and clarity. Iterating on the system quickly based on the feedback provided.
