Carl Elliott

Overview

Swoop's internal Broker Portal, created six years ago, had undergone numerous feature additions over the years. This resulted in the design files and what was live looking completely different from a visual perspective. 

Why is this a problem?

This inconsistency led to discrepancies between the live portal and the designs created by the design team. As a result, designers often had to either incorporate elements from the live version into their Figma designs that were missing or modify the designs to reflect updates not yet implemented in the live portal. In short - it was an absolute nightmare for design and engineering.  

The proposed solution

I collaborated closely with another UI designer to develop the Swoop 2024 design system, which aimed to streamline the handover process between design and engineering teams.

This would ensure:
- Less errors in build
- Improved design consistency
- Faster handover and development of designs

Not just a set of components

Together with the another designer, we integrated user research into the Design System. We conducted several prototype usability studies and discovery exercises that informed the development of the component library and interaction patterns.

A critical aspect was designing with real data in mind. While low-fidelity wireframes often use placeholder text, I ensured that real data values were integrated during the finalization of components and screens. This approach allowed me to pre-emptively address potential challenges, such as:

• Different types funding need data
• Understanding the funding process for say Unsecured finance vs Property finance

Using real data instead of placeholders helped me navigate these scenarios early in the design process.

Laying the foundations

One of my initial tasks was to determine the typography and colour palette. I presented several options to the leadership team, aiming to convey a modern, vibrant brand that resonates with both corporate clients and small Brokerages. Understanding that the product will sometimes be white-labelled, I designed with empathy—ensuring the platform’s tone reflected guidance and support but still maintained a professional finance look and feel.

I set up foundational elements, including a series of page templates. Following best practices in dashboard UX, I explored various approaches to information architecture, navigation, and sidebar configurations. Collaborating with front-end engineers, we defined the grid for key breakpoints, leveraging Tailwind CSS for consistency.

Developing components

I initiated the development of an evolving set of components based on the Atomic Design methodology. Continuous collaboration with developers ensured that naming conventions and component organization aligned seamlessly for both design and engineering teams. 

Accessibility Baked into the Process

Building the Design System from scratch allowed us to integrate accessibility from the outset.

Some key principles I focused on included:

• Checking color contrast across various backgrounds and interaction states (including an in-depth analysis of accessibility standards for disabled buttons).
• Ensuring appropriate font size and touch targets on mobile devices.
• Including text labels alongside icons in mobile navigation.
• Maintaining consistency across layouts and similar UI elements.

While there is always room for improvement, establishing these practices set a solid foundation for future adherence to accessibility standards.

Pragmatic Creativity

Pragmatic creativity—a concept I adopted from BBC’s Design System—perfectly aligns with my approach to developing the Design System. While iterating on complex screens, I sometimes had to step outside established rules to think creatively. This involved both adding new components and reevaluating existing patterns, balancing flexibility with the need for consistency.

Asynchronous Communication

A successful Design System goes beyond a set of components; it requires adequate context for various internal users. I aimed to:

• Provide rationale behind design decisions in discussions with the leadership team.
• Showcase behaviors, interactions, and various states during developer handovers.
• Cite research sources and alternative options for future designers and the broader Product team.

Given the remote nature of our team, asynchronous communication was essential. I focused on delivering necessary context around designs without adding to the document overload that often burdens teams.

My handovers included contextual notes within Figma files, video walkthroughs of specific interactions, and visualizations of expected behaviours. When new components were added to the library, I linked relevant screens to those components, ensuring developers had a reliable source of truth.

Results

The Design System was instrumental in ensuring a successful rollout:

• It provided a cohesive look and feel for the brand.
• It established a structure and principles for addressing conflicting requests from the broader team.
• It streamlined the design process, which was essential for the design team.
• It accelerated design-to-market timelines, offering developers a single source of truth and a repository of reusable components and patterns.