Bare Beginnings: Design System for a B2B Web Platform

About

This design system was created from scratch to accomodate the translation of the native app to a fully responsive web platform. 

My Role and Contribution

As one of the two founding designers, I spearheaded the creation and management of a comprehensive design system, significantly elevating interface consistency and streamlining collaboration. This reduced design-to-development handoff time by 80%, enabling faster and more efficient feature deployment.

Goal

The main goal is to deliver resuable components that could be used to building templates, pages and components across the whole platform for growing and appending new features.

Project Type 

Design System Development

Tools

Figma, Adobe Illustrator

Role
UI Designer (Visual Design, Interaction Design)

Team
Myself (UX/UI Designer) and one more Midweight UX/UI Designer

Duration
Ongoing

Typography

The typography was carefully selected from several alternatives, with Open Sans ultimately chosen due to its optimal numerical spacing. Additionally, we implemented varying font sizes to ensure readability and adaptability across responsive screens.

Buttons

Buttons within the design system include multiple variants, each clearly labeled with descriptive captions for improved user interaction and accessibility. Additionally, the primary colors for buttons were thoughtfully chosen from the pre-established brand palette.

More components

Since the design system includes numerous components, I prioritized selecting those most frequently used and consistently replicated throughout the interface.

Still growing, still designing... 

The process behind the system.

1. Embracing Iteration for a Scalable UX

As the design system continues to evolve and expand, more components are continuously being introduced. To manage this growth effectively, it's essential to regularly assess and refine the library.

“You don’t build a design system. You grow one."

- Nathan Curtis (Design System Expert)

Creating a UX design system isn't a linear journey of “start at A and end at Z.” Instead, it's cyclical, iterative, and adaptive. It requires constant adjustments based on feedback, evolving requirements, user needs, business shifts, and technical constraints.

Challenges we faced 

1. Constantly Changing Requirements
Product goals frequently shift, requiring regular reconsideration of design decisions.
Business priorities evolve, prompting continual refinement.
2. Feedback Integration
New feedback continuously emerges from users and stakeholders, requiring ongoing revisions.

Our approach

To address the complexities of evolving design systems amidst changing requirements in an agile environment, I applied specific strategies reinforced by practical examples and systematic reasoning:

1. Iterative Reviews & Adjustments
I implemented bi-weekly review sessions involving cross-functional teams, during which we critically assessed component usage analytics, stakeholder feedback, and user testing results.

For example, when analytics showed limited interaction with our navigation components, targeted user feedback indicated the need for simpler labeling and interaction cues. Acting on this, we iteratively adjusted the navigation elements, resulting in increased user engagement and satisfaction.

2. Scalability & Adaptability
To ensure components were adaptable for varied contexts, we utilized an atomic design approach, developing small, reusable "atoms" that easily combined into more complex components. For instance, we built button and input components with flexible states and variants, enabling rapid adaptation for new features without extensive redevelopment, significantly reducing development time and resource allocation.

3. Evolving Documentation
Recognizing that documentation must evolve alongside the design system, we adopted a "living documentation" model using Storybook - this was managed directly by the Front-end devlopment team. Each component update triggered an automatic documentation revision, enriched with usage guidelines and rationale based on recent learnings. F

For example, after usability testing revealed confusion around form components, we refined our documentation with clearer usage scenarios, increasing developer understanding and consistency across implementations.

4. Cross-team Collaboration & Alignment
Regular workshops and "design jams" were organized to foster collaboration between designers, developers, and business stakeholders. During a recent project, a design jam facilitated alignment on an updated checkout flow, where collective insights led to simpler interactions, ultimately boosting conversion rates. Continuous alignment prevented miscommunications and ensured shared understanding across iterative development cycles

5. User-centric Approach
I consistently integrated user perspectives through structured usability testing and feedback loops at every iteration. For example, iterative testing of a dashboard interface highlighted navigation difficulties. Responding quickly, we simplified the layout and interactions, directly increasing user task efficiency by 25%. This proactive, user-driven approach assured that system evolution continually aligned with genuine user needs and preferences. 

2. Optimizing Figma for Developer Experience

 Before. Initially, our approach was to consolidate everything into a single Figma file for designer convenience. However, this strategy eventually led to reaching Figma's maximum storage limitations, causing performance issues and workflow disruptions.

After. The Figma file was re-organized with developers' workflow and accessibility in mind. Components were categorized logically, clearly labeled, and grouped based on usage and technical relevance. Biggest change is that they are now categorised under their own page. Therefore, constant publishing must be ensured

"Developers are primary users too—they frequently navigate the design file. Organizing the workspace to cater explicitly to their needs significantly streamlines their workflow."

Interested in working together? Get in touch!

Krisha Angeli Pardillo
+447947948622
krishaangelipardillo@gmail.com