Creating Consistency, Efficiency, and Confidence Through Scalable Design Systems For Freedom Financial Internal Teams

Imac mockup with design system on screen

Date Completed

April, 2022

Overview

Design systems serve as the backbone of professionalized software development, creating a structured workspace where projects are designed with precision, consistency, and scalability. By standardizing components, styles, and workflows, they ensure that teams can focus on innovation while maintaining high-quality outcomes.

The Everest Design System was crafted as a showcase of Everest Studio’s expertise in delivering professional-grade design systems. Serving as a model for companies seeking to modernize their design workflows, this system illustrates how a well-executed design system can empower their organization to create software with efficiency and confidence.

As the sole designer, I built the system in Figma with 809 rigorously defined components and comprehensive style libraries. The system was engineered to align with industry best practices, offering a blueprint for how companies can establish a professionalized workspace for their software projects. This environment fosters collaboration, eliminates redundancies, and ensures scalability for future needs.

Although the system was not deployed internally, its development reflects the broader value of design systems in transforming digital workflows. Research from Figma and Telus demonstrates measurable benefits, such as:

A 34% increase in designer efficiency, equating to 212 hours of output weekly.
6,480 hours saved annually by eliminating inefficiencies.

These results exemplify the transformative potential of design systems, underscoring their role as foundational tools for companies aiming to achieve excellence in software development.

The file

The embedded Figma file below offers an interactive view of the Everest Design System, showcasing the complete library of components and styles. Designed for ease of navigation, this file allows readers to zoom, scroll, and explore the system in its entirety. The curated page preview highlights all the components at a glance, while the navigation button in the top right enables further exploration.

Top Right Navigation Button: The navigation button in the top right corner allows for detailed exploration of the entire Figma file, enabling users to review every component and style included in the library.

Initiating and Structuring the Project

As part of this project, I was tasked with designing a robust and scalable design system with minimal initial direction. To ground the work in best practices, I began by reviewing primary design systems from major platforms including Google, Apple, Microsoft, and IBM. Given Everest’s focus on mobile-first products, I drew especially from Apple’s Human Interface Guidelines and Android’s Material Design system to identify relevant components and interaction patterns. These references helped shape a practical and versatile system tailored to Everest’s client work—one that could support real product needs while communicating a high level of design maturity in a client-facing context.

Key Actions

Component Identification: Produced an initial list of essential components, balancing commonly used elements with client-specific needs.
Prioritization: Selected components that would deliver the greatest impact for the time investment, focusing on high-usage elements.
Collaboration: Led meetings to present and refine the component list with the other designer on the project.
Peer Review: Scheduled and conducted structured review sessions to ensure the technical accuracy and usability of components.

Lessons Learned

Decisions about component structure—such as creating single configurable components versus individual variants—were often driven by time constraints. However, the collaborative peer reviews ensured that all components met rigorous standards for functionality and consistency.

System Planning Table

The System Planning Table provides a comprehensive cross-reference between the components included in Everest’s design system and those found in leading design frameworks like Apple’s Human Interface Guidelines and Material Design. By systematically aligning our components with these industry standards, we ensured consistency, compatibility, and relevance while maintaining the flexibility to address Everest’s unique project needs.

Meeting Client and Organizational Needs

The Everest Design System was crafted to tackle two key objectives: addressing client challenges and enhancing Everest’s organizational strategy. Clients often grappled with inconsistencies in their designs, technical errors in production, and a lack of streamlined workflows. The design system directly resolved these issues by providing a centralized, error-free workspace where every component and style adhered to rigorous standards.

Addressing Client Needs

Clients benefited from a system that minimized errors and provided a structured approach to design. For example:

Consistency: Standardized components ensured branding consistency across all applications.
Efficiency: Designers could quickly assemble interfaces by selecting pre-configured components and styles, reducing project timelines.
Adoption: The system was intuitive, enabling clients to expand and maintain their design environments confidently post-handoff.

Organizational Impact

Beyond solving client issues, the design system positioned Everest as a leader in scalable, professional design solutions. It became a key marketing tool during client engagements, showcasing Everest’s ability to deliver cutting-edge, efficient design workspaces. This competitive edge helped Everest stand out in a crowded market by highlighting their commitment to creating adaptable, scalable systems that empower teams.

Creating a Professionalized Figma Workspace

The Styles and Use Cases list embedded in this section demonstrates the meticulous planning and precision behind the Everest Design System. These styles serve as the backbone of design projects, providing structured definitions and clear use cases. Their purpose extends beyond visual uniformity; they guide decision-making, ensuring that each element used in the system adheres to functional and aesthetic principles.

Key Highlights of the Styles Resource

The Styles and Use Cases list embedded in this section demonstrates the meticulous planning and precision behind the Everest Design System. These styles serve as the backbone of design projects, providing structured definitions and clear use cases. Their purpose extends beyond visual uniformity; they guide decision-making, ensuring that each element used in the system adheres to functional and aesthetic principles.

Comprehensive Definitions: Each style is defined with precision to communicate its purpose. For example, headings like H1 and H2 are labeled with their function in page hierarchy, while button styles include feedback states like hover, pressed, and disabled. This level of detail ensures that all designers—novice or experienced—understand the specific applications of each style.

In-Context Use Cases: The system’s styles are accompanied by use cases to clarify their intended applications. Designers can reference these in the Figma interface, directly within the context of their design work. For instance, hovering over the Caption (12/16) style provides a tooltip explaining its role in delivering contextual support for images or charts. Similarly, buttons like Outline Bkg Pressed include use cases emphasizing visual feedback for user interactions.

Extending Branding Through Figma Styles

The Styles page of the design system extends the branding guidelines of a company into the Figma workspace, ensuring that every decision a designer makes aligns with the established visual identity. By integrating typography, color palettes, and spacing directly into Figma as predefined styles, the system provides a seamless connection between branding principles and practical design execution.

Enhancing Flexibility with Layout Tools

The design system’s Spacing and Grids page provides the structural foundation for consistent and scalable layouts. Anchored by an 8px grid system, it ensures precise alignment across designs, promoting visual harmony and professionalism. Pre-built tools, including flex-based grids and reusable spacing components, simplify layout creation while preserving consistency.

These tools empower teams to streamline their workflows and establish a shared understanding of layout standards. By embedding these resources into the design system, the workspace becomes an environment where precision and creativity coexist, supporting the efficient delivery of high-quality software products.

System Features and Capabilities

The Everest Design System was more than a collection of components—it was a comprehensive toolkit designed to streamline workflows, reduce errors, and promote consistency across projects.

Simplifying Designer Workflows

With 809 components, the system standardized patterns and established constraints, allowing designers to:

Work with rigorously vetted components.
Avoid inconsistencies through predefined styles for every detail, such as button states, leading and trailing icons, helper text, labels, placeholder text, primary and secondary styles, and more.
Quickly configure the component for its specific use.

For Example

A designer creating a form for an internal application can seamlessly use components from the library, confident that each element is pre-configured with correct states and established design patterns. This approach significantly reduces the time spent re-creating components from scratch or searching for previous work, while eliminating the need for extensive peer reviews to ensure consistency. The design system streamlines the process, allowing designers to focus on innovation rather than rework.

Sizes: Small, Medium, or Large
States: Default, Hover, Pressed, or Disabled
Types: Primary, Secondary, or Text
Styles: Simple, Leading Icon, or Trailing Icon
Text: Enter the copy of the component from the properties panel

Empowering Teams Through Scalable Variant Naming

The image showcases the detailed variant naming structure within the Everest Design System. This foundational work defines the selectable properties of components, such as spacing, visibility, and grid alignment, creating a seamless and intuitive design process. The variant naming strategy serves as a vital resource for both designers and developers.

By adhering to this standardized structure, teams can confidently add new components to the library while ensuring consistency across projects. This scalability empowers internal teams to evolve the design system as needs change, maintaining its integrity and efficiency over time.

Reflections & takeaways

Designing and implementing the Everest Design System was a transformative project that underscored the value of thoughtful collaboration, scalable design solutions, and user-focused workflows. By addressing inefficiencies and inconsistencies in the existing process, the system empowered internal teams to work more efficiently while maintaining brand integrity across projects.

One of the most rewarding aspects of this project was seeing how a well-structured system could bridge the gap between branding guidelines and practical design execution. The integration of use cases directly within Figma elevated the system from a static set of rules to an active tool, fostering better decision-making and enabling faster onboarding for new team members.

This experience also reinforced the importance of collaboration with cross-functional teams. By working closely with engineers, product managers, and stakeholders, I ensured that the system met the needs of all contributors while remaining flexible for future growth.

As I move forward, I bring with me a deeper understanding of how scalable design systems can drive organizational efficiency and deliver lasting value. This project has prepared me to take on similar challenges, leveraging my expertise in creating systems that are not only functional but also empower teams to excel.