Building a company-wide design system from scratch in an agile way.
With Crowdhouse in 2018 and 2019.
I joined Crowdhouse to improve the product experience and design features inspired by the company’s vision: render the Swiss property market transparent, efficient and accessible.
© Photo by Crowdhouse
About Crowdhouse
Crowdhouse offers accessible investments in Swiss real estate. Founded and profitable since its 2015 start, it has grown to over 140 employees and placed nearly 1 Billion CHF of real estate with investors through our platforms.
I teamed-up with researchers, developers, managers, salespersons, real estate advisors and customers to improve the product experience and design new features.
Create solid foundations for the future
As our product gained complexity, the product team realised that neglecting to invest in our design system was coming back to haunt it. It was one of those projects all the time postponed for priority reasons. As we migrated our front-end from legacy technologies to React, we saw that it made sense to align components from a visual and interaction standpoint to create a single source of truth.
Design systems are organisms that span the lifetime of a company. Making a design system is an endless process. This project was about breaking ground and laying the foundations that have taken us into the present and will take us to the future.
Innumerous button styles
Project goal
Our team goals for the design system was a design language and reusable components that would increase our design and development velocity, incorporate learnings from customer research into the product and reduce our time spent reinventing the wheel on solutions.
Fast Benefits
Provide near-term benefits to product and engineering roadmap.
Paths to Success
Improve information architecture, wayfinding and usability.
Consistency
Reduce product complexity and provide more clarity.
Useful
Provide solid documentation for internal and external use.
The design team in front of the Crowdhouse ecosystem
My role
With the help of two primary designers, I planned and co-managed the creation of the Crowdhouse design system, and worked to envision and document the system.
After reading, taking in a bunch of information to understand how other companies approach and solve similar problems and how we can make it happen as a small team. We decided to use the Brad Frost’s atom approach as a way to find mutual understanding between engineers and designers.
Diagnosis
We first collected all our product materials, style guides and other reference documents so we were able to diagnose the weaknesses of our existing design language and components.
Diagnosis of our existing materials
Set a framework first
Based on our company mission and understanding of customer needs, the design team worked with company leadership to create design principles. The principles are the foundation of what our customers feel when they use our product and how we make it happen. As a design team, they help us make tough decisions and measure success.
Crowdhouse design principles
Design priorities
We focused first on three high-impact choices: typography, color, and holistic experiences in order to kickstart our design system; it helped us to see concrete improvements very quickly, which was motivating for the team.
Key elements
Rules and documentations
To bridge the gap between design and code, we used Figma for end-to-end design handovers with design rules inclued. After the components creation with the help of our engineers, we were able to try, test and document them directly in our playground tool called Storybook. As soon as the components passed all the required tests in our staging environement, we released them to the master design system.
From Figma to Storybook
What I learned
Sit next to your engineer. Avoid the waterfall approach and reduce the time and the costs of production. Involving engineers to the early stage of a design process helped me to learn and understand where the edges and constraints are. Working closely with them allowed me to try the components sooner in staging environement as well.
Test, test and test. Until the components have been fully tested in a staging environment, chances are high that I missed potential use cases during the creation of them. This crucial phase, often skipped because of lack of a dedicated person or a too big insurance about the robustess of the components, could cause damages and expensive costs to the product. I understood the importance of the testing phase and now include it in every project.
© 2023 Maxime Amoudruz