My Role
Senior Product Designer
Project Duration
6+ months
Platform
Web & Mobile (iOS, Android)
Tribe’s design language was inconsistent across its products and assets (website, mobile app, portal, and marketing assets). Much of the design up to this point was hard-coded by the founding developers, leading to difficulties in scaling new products, onboarding new team members, and introduced inconsistencies between platforms, pages, and assets.
We had recently started redesigning our mobile app with other products following, this was the perfect opportunity to introduce a scalable, unified design system, utilising recent usability testing and research efforts. I was part of a small team as a product designer, working closely with another designer, and both mobile and web developers to ensure both design and technical implementation were aligned.
Our goal was to create a flexible yet robust system that could guide future design decisions, reduce inefficiencies, and scale as the team grew.
Goals
Working closely with the development team and stakeholders, we identified four core objectives that would guide our design system development:
Consistent Language
Establish a consistent design language that aligned with Tribe’s mission and brand.
Reduce Time
Streamline the design and development process, reducing time to create new features.
Accessible Design
Implement accessibility standards to ensure inclusivity across all elements.
Scalability
Build a scalable system that was easy to maintain and expand as needed.
To tackle this challenge systematically, we needed to first understand the full scope of our design inconsistencies. This meant diving deep into our existing products, documenting patterns, and identifying where our design decisions were creating friction for both users and developers.
We started auditing existing design files, web components, and graphical assets. This allowed us to uncover key issues that were affecting both internal workflows and the overall user experience.
Through our comprehensive audit, patterns began to emerge that highlighted not just surface-level inconsistencies, but deeper structural challenges that were impacting our ability to scale:
Findings
Through our initial discovery phase and stakeholder interviews, several critical areas emerged that would define the success of our design system:
Lack of Patterns & Consistency
No reusable components existed. Design decisions were made ad-hoc, making it difficult for new team members to understand the rationale behind spacing, colours, and component usage.
WCAG Compliance Issues
The design suffered from poor accessibility, including low contrast, legibility issues, and overlooked technical considerations, all which negatively impacted the user experience.
No Documentation
There was no centralised resource outlining how to use elements and components, leading to inconsistencies in colour schemes, spacing, and animations across our products.
Key Focus Areas
Based on findings and discussions, we identified the following areas of focus:
Accessibility
Improving compliance with WCAG standards and ensuring consistency across platforms (Web, iOS and Android).
Components & Patterns
Creating a cohesive library of reusable components with clear design boundaries using design tokens.
Guidance & Documentation
Building a set of guidelines to help new and existing team members understand how, why, and when to use the system.
Scalability & Maintenance
Ensuring the system could grow with Tribe, including processes for version control and ongoing updates.
We researched several public design systems for inspiration, such as Atlassian, GOV.UK, and IBM’s systems, all of which provided valuable insight into creating a versatile design system for both mobile and web platforms.
A small team of three; myself, another designer, and a front-end engineer collaborated and collated visual inspiration from existing products, mobile apps, branding, and marketing materials. We combined the best attributes that resonated with Tribe’s audience and worked closely with stakeholders and the CEO to align the design system with Tribe’s business strategy.
I also advocated for migrating the company from Sketch to Figma, as this allowed us to build on our component foundations whilst improving collaboration, something which we struggled with using Sketch.
We started by defining the foundational elements that would inform every aspect of the system:
Voice & Tone
We crafted a tone that was clear, practical, and simple. Aiming to create a welcome, not overwhelming experience. This aligned with the emotional state of some users relying on the platform for critical support services, usually in time of need.
Colour
We refined the existing palette to improve contrast and align with WCAG standards. This ensured consistency across digital products and marketing materials.
Typography
We decided on Proxima Nova for its legibility and personality, creating a type scale that was flexible for a variety of screen sizes.
Spacing
To maintain consistency across devices, we implemented a 4-pt spacing system, which allowed for flexibility and finer detail in designing both smaller and larger components.
Elevation & Shadows
Depth played a critical role in guiding users focus, we defined a set of rules for using elevation and shadows to create clear visual hierarchies.
Components
We began by auditing existing components and identifying what could be reused and improved. This helped us avoid overloading the system with unnecessary elements while ensuring flexibility for future growth.
We created internal documentation for guidance, code examples, and usage instructions to ensure seamless adoption across the team.
While building the system was a significant achievement, its true value would be measured in how it transformed our product development process. The impact was both immediate and lasting.
Improved Efficiency
The design system drastically reduced the time needed to build new features, enabling the team to launch updates faster and more consistently.
Usability Improvements
Usability testing post-implementation showed a 350% increase in product usability, driven by the enhanced consistency across the platform.
Scalability
The design system provided a solid foundation for future product updates and allowed for easier onboarding of new team members.
The design system remains a living project, with regular updates and continuous feedback from users, internal team members, and stakeholders. As new needs arise, we refine components, encouraging careful breaking out of the system when the needs fit, refining components and ensuring the system evolves around our growing product suite.