Building A Design System At A Prop Tech Startup
Perch’s design system was fragmented and inconsistent, causing inefficiencies and inconsistencies in the product. A comprehensive design system was needed to establish a shared foundation for process, design language, guidelines and UI pattern libraries, reducing the need to recreate elements and minimizing inconsistency in design and development.
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Perch.
Perch is a Canadian proptech startup that aims to assist Canadians in building wealth through real estate. They strive to simplify the home buying process and help save money on mortgages. Additionally, they offer tools to help homeowners maximize home equity. Perch has developed and launched several products to create the ideal mortgage experience for Canadians.
As the company’s product offerings expanded, the design team struggled with coordination and consistency across projects. Without a shared foundation for process, design language, and UI patterns, communication issues between teams led to wasted resources.
My focus during my first quarter at Perch was to develop a comprehensive design system to alleviate these issues. Through collaboration with the engineering and product teams, I created a centralized design system that aligns teams, speeds up the design and development process, improves brand perception, and promotes accessibility.
Buy in, collaboration and reviews
Internal stakeholders were made aware of the current pain points and the anticipated benefits of building a design system. I involved engineering in the process early on to inspire a sense of co-ownership and ensure that the design system built could be implemented by the resources on the engineering team. This was achieved by collectively arriving at decisions and aligning on details such as component design, documentation, and tools. The team communicated frequently via Slack, which allowed us to collect everyone’s perspective and bridge the gap between design and engineering.
Building the Perch Design System
I focused on creating a comprehensive design system that would include common linguistic, principles, and tools to help build products in a consistent and coherent manner. This was particularly important for the junior designers on the team who were struggling with a lack of process and understanding of what makes design great at Perch.
Perch’s visual language
Perch had a well-defined visual design language that was created as part of its rebrand in 2020. The visual design language is divided into four main categories, which include colour, typography, sizing and spacing, and imagery. Perch’s primary brand colour is green, and it has secondary colours as well. The brand typeface is Plus Jakarta Sans. The design system also included image guidelines and a library of icons and illustrations for reference.
Screen sizes, breakpoints and grid definition
To define screen sizes, breakpoints, and grid systems, data was gathered from the marketing team on the most commonly used devices and screen sizes by users. Based on this data, a responsive grid system was defined for three selected screen sizes, with elements of columns, gutters, and margins, using the recommended Bootstrap breakpoints.
Icons and illustrations
Perch icons & illustrations
Perch lacked consistency in icons and illustrations, which were crucial elements in its design system. With limited resources, I adopted Font Awesome icons (regular-outline) and selected an illustration style that fit with the Perch brand. Guidelines were created for future illustration designs, such as using a single uniform line, colour offset, and using SVGs instead of raster images. I also documented use cases for illustrations to ensure all current and future designers understood their use.
The writing for user interfaces in Perch was approached with a focus on being purposeful, essential, meaningful, and timely, like poetry. I worked with the marketing team to understand the target audience and the brand voice. The brand voice was still evolving and the provided references and examples were used as a guide. To ensure consistency, I created a set of 15 UX writing guidelines along with examples as a reference during review sessions for Perch products and projects.
UI components and patterns
Perch UI components on Figma
The purpose of this exercise was to address the design inconsistency in Perch products caused by misunderstandings and unaligned teams. To save resources, in consultation with the engineering team, I decided to customize Bootstrap’s design system. I focused on customizing UI patterns, typography, icons, and color schemes to tailor Bootstrap to fit Perch’s brand, while acknowledging the issue of Bootstrap being too visible.
My aim was to build a design system that provided guidance, and set our teams up for success. To achieve this, a set of design standards were established to outline how design should be carried out at Perch.
The design process at Perch was previously unpredictable due to a lack of common understanding of good design. To solve this, I established three design principles to guide our work. First, decisions are data-informed and based on research. Second, design uses current knowledge and bridges any gaps for users in an intuitive way. Third, design should be simple and clear, focusing on making the product useful, understandable, unobtrusive, and honest.
Perch’s approach to product design focuses on understanding users’ needs and finding solutions to meet those needs. However, without a structured process, this approach was not being implemented effectively. To remedy this, I outlined a set of key guidelines. The design team should start by understanding the context for the product’s existence and the business objectives. They then should conduct user research to understand user needs and come up with design solutions through 5 phases: Empathize, Define a point of view, Ideate, Create user flows, Prototype and test. The final prototype should be handed off for development, but as product design is an ongoing process continuous testing, iteration, and gathering of user feedback should continue after shipping.
Documentation and version control
Documentation serves as a comprehensive guide for the design team and all stakeholders involved in the development of a product. Proper documentation helps maintain a single source of truth, reducing the possibility of misinformation and ensuring informed decisions. Perch uses Notion as its tool for housing all design system and project documentation.
Perch Design Notion board
We use version control to manage multiple variations of important documents and keep a clear record of their development throughout a project. For briefs and research docs, we use a numbering system to track versions, while for Figma files, we use Figma’s version history feature.
The design system in action
The implementation of a new design system resulted in a positive impact on the product-development timeline and reduced design and technical debt and code redundancy.
The Client Portal redesign was an important project that benefited immediately from the new design system, leading to a more efficient design and development process and reduced frustration regarding design and product inconsistency.
The creation of a design system is a continuous process that requires ongoing maintenance. It’s probable that the design system at Perch has undergone considerable changes since I last updated this portfolio entry.
A well-designed system helps in scaling design patterns and components, ensuring consistency and quality across all experiences, and increasing the speed and creativity of designers while preserving best practices. At Perch, the design system was built through collaboration, with all team members playing a crucial role in promoting and supporting its use, making it an integral part of the company’s culture.