I gathered visual references from similar industries and potential partner brands to define a style direction that aligns with both our product values and the expectations of our B2B audience. These references helped establish a visual tone that felt both credible and connected to the ecosystem we were entering.
Observe the Pilot Tool & Identify Atoms
I audited the entire website, documenting every instance of recurring UI patterns and broke them down into their visual "atoms": colors, typography, spacing, and icons. This helped me identify common building blocks and prepared the foundation for scalable component design.
Based on the design tokens (colors, typography, spacing), I built modular components such as buttons, radio buttons, checkboxes, dropdowns, and cards. Each was structured to be flexible, reusable, and easy to maintain—ready to scale with the product.
I applied Figma's Auto Layout to every component to ensure they adapt to different content lengths and layouts. This not only made the design more flexible, but also helped speed up future edits and layout changes with minimal effort.
I used Figma Variants to organize different states of each component (e.g. default, hover, active, disabled), and Variables to manage tokenized styles like colors and spacing. This approach made the system more scalable and efficient—enabling both developers and future designers to work faster with fewer errors.
Web Content Accessibility Guidelines (WCAG)
I followed key WCAG guidelines to make sure the system supports accessible and inclusive experiences. This included ensuring tappable areas were large enough, using sufficient color contrast, and applying larger text styles where needed for readability.
Focus Area:
Sufficient tappable areas
Minimum text size for readability
Accessible color contrast ratios
