Building A Design System At A Prop Tech Startup

Perch’s design system was fragmented and lacked consistency. As a result, our product, design, and engineering teams lacked a shared foundation around process, design language, guidelines, and UI pattern libraries. This created inefficiencies for each team, as well as inconsistencies within our product.

We needed a comprehensive design system that would allow us to use the same elements over and over, reducing the need to reinvent the wheel and thus risking unintended inconsistency from 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.

2022-04-05 16_17_43-Perch Design System - Figma

Background

Perch is a Canadian proptech startup whose mission is to help Canadians build wealth through real estate. Perch makes the process of buying a home simpler and easier, and helps you save money on your mortgage. Once a homeowner, we enable you to build wealth by maximizing home equity.

Perch has built and launched multiple tools and products aimed at building what we believe is the mortgage experience Canadians deserve.

The problem

As Perch’s product offerings grew, members of the design team who were assigned different project tasks were facing issues in coordinating efforts and maintaining consistency across projects and screens. Designers and developers did not have a single source of truth to turn towards, and this led to a lot of wasted design and development resources around miscommunications. 

My role

During my first quarter at Perch, one of my critical points of focus was the development of a comprehensive design system that would alleviate strain on design resources, and allow us to focus on larger, more complex problems.

Through collaboration with the engineering and product teams, I spearheaded the creation of the foundational patterns, UI components, tools, and documentation that empowers Perch’s strategic design vision. 

My goal in this project was to create a centralized design system that would:

  • Align our teams by giving them a more structured and guided way to build products.
  • Speed up our design and development process: with a ready-made library and patterns teams can create and test layouts much faster.
  • Improve brand perception and user trust through consistent experiences that work for everyone and allow users to accomplish their goals.
  • Promote accessibility of our products by building accessibility and inclusion into our component libraries, both from a design and code repository perspective.

Buy in, collaboration and reviews

In order to ensure the success of this project, it was important to get stakeholders on board before we started building our design system.

Team heads were made aware of the current pain points and the anticipated benefits of building a design system. As a startup with limited engineering resources, it was important that the design system we built could be implemented by the resources on our engineering team. To ensure this and inspire a sense of co-ownership throughout the entire process, we involved engineering into the conversation early on so they could pitch in on what could be implemented effectively. We arrived at decisions collectively and aligned on details such as component design, documentation, and tools. In addition to weekly reviews, we communicated frequently via Slack where we posted design system updates and requests for asynchronous feedback. These practices allowed us to collect everyone’s perspective and bridged the gap between design and engineering.

Building the Perch Design System

When it came to building the Perch design system, it was important that we kept our focus broad and thought about the idea of design systems. Our design team had two talented junior-mid level designers and their biggest roadblock was the lack of a process and a common understanding of what makes design great at Perch. 

The road to building the Perch design system started with the idea that at the broadest level, a design system is a living entity containing the common linguistics, principles, and tools to help teams build products coherently.

Building blocks

Visual language

Perch’s brand colours

The visual design language is the core of a design system. Perch had an existing well-defined visual language that was created as part of Perch’s rebrand in 2020. Visual design language is made up of four main categories, and Perch had three of these defined in its existing brand style guide.

  • Colour: Our primary brand colour is Perch Green. Our secondary brand colours are our Perch Teal, Perch Blue, Perch Mustard and Perch Orange. We set up these colours within our Figma Design System style guide and included a set of system colours and gradients.
  • Typography: Beausite Classic is our brand typeface. The Bold weight would be used for anything that is intended to have a large visual impact (eg. headlines, banners, signage, etc.) or in any situations where an additional weight is required. The Regular weight would be used for all text in both digital and print material. Using the Bold and Regular weights to create a consistent look and feel across all material would ensure a strong and unified brand identity.
  • Sizing and spacing: The system used for spacing and sizing looks best with rhythm and balance. A 4-based scale was decided on as it is growing in popularity as the recommended scale due to its use in iOS and Android standards, ICO size formats, and even the standard browser font size.
  • Imagery: The key to success with imagery in visual design language is having a plan and sticking to it. Our existing brand style guide had image guidelines, however there were no existing guidelines for icons and illustrations. These guidelines were created and a library of icons and illustrations were included in the new design system to provide designers with a reference point for imagery in product.

Screen sizes, breakpoints and grid definition

During the early stages of Perch, there was a communication gap between design and development and this resulted in extreme inconsistency in the way Perch products were designed and developed. Junior designers were overwhelmed by the varied selection of screen sizes and grid systems in existence and were unaware of how they could select the right grid system for their projects.

Due to limited design and development resources, we could not design for all devices and screen sizes. Therefore, in order to define screen sizes, breakpoints and grid systems, we reached out to the marketing team to provide us with analytical data on what screen sizes and devices were most used by our users. Based on these insights, we defined a responsive grid system for 3 selected screen sizes, that adapts to screen size and orientation, ensuring consistency across layouts. Our responsive grids comprised three elements: columns (areas that the content occupies), gutters (gaps between columns) and margins (spaces that add padding between the page contents and the viewport edges). We used default Bootstrap breakpoints as recommended by the engineering team.

Icons and illustrations

Perch illustration style

Icons are a crucial part of any design system or product experience. Existing Perch icons were inconsistent across product as designers had no specific guidelines for icons. While icons are a fundamental part of a good design system, as a startup with a small design team, we did not have the resources to design custom icons. Thankfully, the internet is filled with comprehensive icon collections that we could adopt into our design system. In consultation with engineering, we decided to use Font Awesome icons as these were well-designed and included a wide range of icons. We installed the Font Awesome Icon Figma Plugin so designers would be able to find icons within Figma instead of having to switch platforms to look for icons. 

We audited existing illustration styles that were inconsistently used on the website and honed in on one style that fit well with the Perch brand. In order to ensure consistency as we scaled up, we created two basic guidelines for illustration design.

  • While creating new illustrations to add to the collection, ensure they match the new, defined style. This includes the use of a single, uniform line, rounded corners and a teal offset. 
  • Use SVGs instead of raster images.

We also included use cases for illustration in our documentation so our designers understood how and where they could use illustrations and where they would have to use images. 

Editorial guidelines

Writing for user interfaces is a bit like writing poetry: every word must have a purpose, every sentence must be essential, meaning matters, and timing is everything. We started by collaborating with the marketing team to understand more about our target audience and the brand voice that’s used for marketing. It was important to keep in mind that our brand voice was still evolving and any references and examples provided were a guide for where we’d like to eventually be. We included a set of 15 UX writing guidelines along with examples so we had a reference point during our review sessions for the various Perch products and projects in progress.

UI components and patterns

Perch UI components on Figma

One of the main reasons that creating a Perch Design System now was so important was because design inconsistency was a major bottleneck for the team. We had multiple shades of grey, different font sizes and different colours of primary buttons in our products. These were the result of misunderstandings due to lack of clear direction as a result of unaligned teams and designers. Additionally, the development of a product across different platforms further increased those inconsistencies, resulting in a disconnected user experience.

When we decided to build Perch’s design system, we knew that we did not want to design our UI components from scratch as we did not have the design or engineering resources to be able to do so. After multiple discussions with the engineering team, we narrowed down on customizing Bootstrap’s design system. This was because the engineering team was using Bootstrap’s front-end framework to build our designs and it made most sense from a time and resource standpoint to adapt and customize the existing, well-documented Bootstrap design system. We acknowledged that one of Bootstrap’s biggest cons was that it was too visible and spent our resources on customizing UI patterns, typography, icons and colour schemes to tailor Bootstrap to Perch’s brand.

Rules

One of the goals of this project was to build a design system in a way that included the design team, supported them with guidance, and helped them and Perch succeed. To do this we created a set of standards that explained how design would function at Perch.

Design principles

Without a common understanding of what makes design great, everyone was left to act according to their gut feelings. This made the outcome of the design process entirely unpredictable, and caused issues in the quality of the work output.

Design principles act as standards for the design team and help us measure the quality of our work. They replace subjective ideals with clear standards that help team members make user-centered design decisions.

We established three design principles meant to unite our team and guide us towards the ultimate goal—creating a great user experience for people who will use the product that we’re creating.

#1 Our Decisions Are Data-Informed.

We make user-centered design decisions based on data coupled with instinct. If designers found themselves stuck during the design process, they were asked to go back to the research docs and review the data and insights that have been collected to inform their design.

#2 Design Using Current Knowledge

The biggest challenge in making a design seem intuitive to users is learning where the current and target knowledge points are. 

What do users already know and what do they need to know? Before they start building interfaces, the design team is pushed to ask these two questions.

As they start designing interfaces, designers are encouraged to check that their design meets one of these two conditions:

Condition #1: Both the current knowledge point and the target knowledge point are identical. When the user walks up to the design, they know everything they need to operate it and complete their objective.

Condition #2: The current knowledge point and the target knowledge point are separate, but the user is completely unaware the design is helping them bridge the gap. The user is being trained, but in a way that seems natural.

#3 Design Less, But Design Better

In other words, simplicity and clarity lead to good design. The design team uses these 4 questions as an anchor point to assess their designs:

  1. Does my design make the product useful? Good design emphasizes the usefulness of a product whilst disregarding anything that could possibly detract from it.
  2.  Does my design make the product understandable? Good design clarifies the product’s structure. Better still, it can make the product talk. One of the key reasons for someone to use Perch is that our product makes the process of home ownership simple. So, concentrate on the essential aspects, and do not burden the product with non-essentials.
  3. Is my design unobtrusive? The core purpose of Perch is to help people arrange a mortgage. Products like Perch, that fulfill a purpose are like ‘tools’. They are neither decorative objects nor works of art. The design should therefore be both neutral and restrained, to leave room for the user’s self-expression.
  4. Is my design honest? Perch is built around helping the client by offering independent and transparent advice. Do not use design in an attempt to manipulate the user with promises that cannot be kept.

Design processes

Perch’s approach to product design is focused on understanding people’s needs and discovering the best solutions to meet those needs.

Understanding business needs

Not having a clear goal from the start or even a clear understanding of the project will lead to negative consequences. Before we start designing a product, we ensured that the design team understood its context for existence and the business objectives and be able to answer the following questions first:

  • What problem are we solving? (UX+Technical Constraints)
  • Who has this problem? (User Needs)
  • What do we want to achieve? (Business Goals)

Answering these three questions helped us understand the user experience of a product as a whole, not purely the interaction (feel) or visual (look) part of design. 

Coming up with design solutions

Finding a solution to the problem was done in five phases:

Empathize by learning about the people for whom you are designing this product/feature for: Good user research is key to designing a great user experience. Conducting user research enables us to understand what our users actually need. 

Define a point of view that is based on user needs & insights: Identify the persona that best represents the different user types that might use a product in a similar way. Create a list of pain points & needs for this persona’s goals in the context of the problem.

Ideate: Get the team together and ideate by brainstorming and/or brain dumping and come up with as many creative solutions as possible.

Create user flows: Before we start creating any wireframes or mock-ups, the design team is assigned tasks to create user flows on Figma Jam that shows the complete path a user takes when using a product. The user flow lays out the user’s movement through the product, mapping out each and every step the user takes—from entry point right through to the final interaction. 

Creating user flows lets us see if we’re on the right track. It often sparks different ideas that we wouldn’t have otherwise come up with. Lastly, and most importantly, user flows easily communicate the flow of the product to our stakeholders and provide a general view of how the interface we’re creating is intended to work in its most efficient form. This provides a step-by-step breakdown of what the user will see and do in order to complete a task. This visualization of the product ensures everyone is on the same page—which allows for a more productive and rewarding work environment.

Prototype and test to gather feedback: We use the “Dogfooding” method to test out our product as we design. In this technique, once the design team has iterated on the product to the point where it’s usable, we test it in-house to find the most critical issues.

The final version of a prototype is handed off for development.

Ship, Test, Iterate, Ship

Just because a product officially launches doesn’t mean the product design is over. In fact, product design is an ongoing process that continues for as long as a product’s in use. To ensure further success of our products, we put in place measures for conducting usability tests, metric analysis and collect user feedback to guide subsequent versions of the product. 

Documentation and version control

The purpose of documentation is to provide practical guidance not just for the design team, but for everyone else involved in the development of the product. It helps us keep a single source of truth for our projects. When every step of the design process is properly documented, there’s no room for misinformation to creep in and cause bad decisions.

As part of the design system setup, we adopted Notion into Perch’s toolkit and housed all documentation for our design system and projects in Notion.

Perch Design Notion board

Throughout the course of a project, we often juggled several folders and files—each one equally important for either reference or the actual project. Therefore, it became imperative for the files to be up to date to minimize and even possibly avoid errors when designing. We decided to use version control to manage multiple variations of the same document, particularly when it is important to keep a clear record of how the document was created, developed and changed over time.

For briefs and research docs, we established a numbering system to track versions. For Figma files, we decided to use Figma’s version history feature to track versions.

The design system in action

Once the basics of our new design system was in place, we were able to experience a positive shift in our product-development timeline and eliminate design and technical debt and code redundancy.

We had two key projects that saw immediate benefits from the new design system. The Realtor Portal was a major project that had suffered from design and technical debt prior to the establishment of the design system. This was corrected during the course of the project as the design system was built simultaneously and adopted into the Realtor Portal. 

The Home Renovations Calculator, a smaller tool, was built in an extremely efficient manner by making use of the design system. The team, which previously suffered from frustrations relating to design and product inconsistency, recognized the ease at which the home renovations calculator could be built once we had the right systems, tools and processes in place.  

Scaling and maintenance

Creating a design system is not an overnight task or a time bound project. It is also never truly finished due to its ever-evolving nature and the need for ongoing maintenance.

A healthy design system will make it easier to scale design patterns and components alongside a growing design team. It will ensure consistency and quality across all experiences, and increase the speed as well as creativity of designers without losing best practices or consistency within the product.

Everyone on the Perch team is encouraged to take part in stewarding the design system. Our design system was created on the foundation of collaboration with every team member playing a key role in evangelizing, promoting, and supporting the design system in use. This ensures that the design system lives as a central part of Perch’s culture.