Brand Manual & Design System

Swoop Funding_

Brand Manual, Design System, Components/

2024

Swoop Funding, a leading financial technology company, recognized the importance of delivering seamless and intuitive user experiences across its ecosystem of products. To achieve this goal, Swoop embarked on a journey to create a unified Design System that could be applied across its main projects: the Marketplace for Businesses, the Broker Portal for Brokers, and the Advisor Portal for Advisors. This case study explores the successful implementation of Swoop’s Design System and its impact on user experience.

In addition to the implementation of the Design System, Swoop Funding recognized the importance of a comprehensive Brand Manual to ensure consistent application of the brand across all touchpoints. The Brand Manual served as a guide for internal teams, external partners, and stakeholders, outlining the principles, guidelines, and assets that define the Swoop brand identity.

Project

Role

Product Designer

Period

4 years

Tools

Jira
Confluence
Sketch
Photoshop
Figma
Miro
Notion

Challenges

Before the implementation of the Design System, Swoop faced several challenges: 

Inconsistency: Each product within the ecosystem had its own design language and components, leading to inconsistency and fragmentation in user experience.
Time-to-market: Developing and updating user interfaces for multiple products was time-consuming and inefficient, delaying the delivery of new features and improvements.
Scalability: As Swoop’s product offerings expanded, maintaining consistency and coherence became increasingly challenging, hindering scalability and growth.

Approach

Swoop adopted a systematic approach to create and implement its Design System: 

Research and analysis: The team conducted user research, including interviews and usability testing, to understand user needs and pain points across different products.
Collaboration: Cross-functional teams, including designers, developers, product managers, and stakeholders, collaborated closely to define design principles, patterns, and components.
Iterative development: The Design System was developed iteratively, with frequent feedback loops and user validation sessions to refine and improve the design solutions.
Modular design: The Design System was designed with modularity in mind, allowing for the creation of reusable components that could be easily customized and integrated across different projects.

Implementation

The Design System was applied across Swoop’s main projects in the following ways:

Marketplace for Businesses:
- Consistent Visual Language: The Design System established a consistent visual language, including typography, color palette, and iconography, creating a unified look and feel across the Marketplace.
- Reusable Components: Modular components, such as buttons, forms, and cards, were created and reused throughout the Marketplace, ensuring consistency and efficiency in design and development.
Broker Portal for Brokers:
- Streamlined Workflows: The Design System optimized user workflows and interactions within the Broker Portal, making it easier for brokers to navigate and perform tasks efficiently.
- Accessibility: Accessibility guidelines were incorporated into the Design System to ensure that the Broker Portal was accessible to users of all abilities.
Advisor Portal for Advisors:
- Tailored User Experience: The Design System allowed for customization of components and layouts to meet the specific needs of advisors, providing a tailored user experience.
- Responsive Design: The Design System included responsive design principles, ensuring that the Advisor Portal was accessible and functional across various devices and screen sizes.

Results

The implementation of Swoop’s Design System yielded several key results:

Enhanced user experience: The Design System led to a more cohesive, intuitive, and user-friendly experience across Swoop’s ecosystem of products, resulting in increased user satisfaction and engagement.
Improved efficiency: By standardizing design patterns and components, the Design System streamlined the design and development process, reducing time-to-market for new features and updates.
Scalability and consistency: The Design System provided a foundation for scalability and consistency, enabling Swoop to maintain a unified design language across its growing portfolio of products.
Positive feedback: Users and stakeholders responded positively to the improved usability, consistency, and efficiency of Swoop’s products, citing the Design System as a key factor in their satisfaction.

Swoop’s Design System has played a critical role in elevating user experience across its ecosystem of products, including the Marketplace for Businesses, the Broker Portal for Brokers, and the Advisor Portal for Advisors.

Product logos

Trusted Advisor Badge

Unified design language

By prioritizing collaboration, modularity, and iterative development, Swoop has successfully created a unified design language that enhances usability, efficiency, and scalability, positioning the company for continued growth and success in the financial technology industry.