Meet helium, a design system for Impraise
As a B2B start-up company, building a design system is not easy. You probably already noticed the fresh new look from our marketing website and product platform. Here we will show you why we started, what problems we tackled, and how we reached our goals.
For those who don’t know Impraise yet, Impraise is a B2B platform focusing on performance management. We are a start-up that is leading the modern performance review platforms. The helium project is an important part of our platform as we aim to build “super-power” for our product and development teams.
Why the design system?
There are several reasons that we started to build our design system. For us, the most challenging part of this project is that nobody has sufficient time to fully contribute to this project. We are still a start-up company that mainly focuses on building new upcoming features and continuing delivering values to our customers. For us, the design system is really an “expensive” thing.
However, we also realized that, in the long term, our team can benefit a lot from this project. The design system can bring us structured design components. Therefore it can enable us to speed up the product development process. Besides, with the new design system components, we can manage consistency across the whole platform well.
As in 2018, Impraise launched the new brand and published a new marketing website. This finally triggered our design system project to kick off. Also, we have a good starting point, which is to align with the new Impraise brand so as to make a consistent and complete customer journey for our customers.
How did we get there?
As mentioned before, the design system project is quite an “expensive” one for Impraise. However, we managed to have a small group of designers and developers together to spend around 30% of our time building this. The project has gone through 3 phases.
Phase 1: Concept exploration.
In the beginning, none of our design team members have solid experience in building a design system project. Some of our designers had experience with maintaining a design system before. So the first thing our design team did was exploring methods and tools for building a design system. At the same time, we started to benchmark on good examples of design systems (e.g. Google Material Design, IBM Design, Atlassian Design, etc).
With some basic knowledge in this field, our design team started to work together with the marketing team to explore new UI styles that align with our new brand. We organized several small workshops to discuss how to connect the style of our brand with the style of our product and sit down together to sketch out some of the main pages together. Our early exploration work covers most of the main pages in our platform, including reviews, goals, and feedback pages.
Phase 2: Design.
The first thing we came up with was a style guide with all the basic elements inside, such as color, fonts, buttons, etc. We build a basic sketch library and start to test those elements out for more pages. We did iterations on the style guide for several times until we reached to a point that most of the elements work quite well on most pages.
At this point, we also started to involve more and more front-end developers in the project. They helped to reach into the current code base and map code elements with design elements. What we found, which is a very tricky example, was colors. The colors in the codebase were pretty messy. Every time we have new colors, a line of new code was added. Thus we ended up have around 60 colors in total for the whole platform. Our design team started to look into the color code and start to research on the most efficient way to tackle colors. There are similar problems like this. Tackling this kind of problem required very close collaboration across design and development teams. We managed to try some design components and test them on our platform. The end result was quite exciting. We decreased the color types in the codebase to around 15 and slowly started to replace every color in our platform.
A style guide was never enough, as it didn’t define how to use those elements. As a next step, we started to draft out a basic design guideline file from the style guide. The new file includes a grid system, color, typography, spacing, basic patterns, and a complete list of components library. We shared this in Zeplin internally and started to gather feedback on them, mainly from developers and designers.
Phase 3: Development.
The development of the design system has never been an easy job. First, we started several sprints on changing all the basic pattern (color, fonts, buttons, forms, cards, etc.). At the same time, we started to apply new design patterns in our new features, just every time we build new features, we take some extra time on fixing some design system patterns. Later in 2019, we launched 1:1, goals, and some other related features with a brand new look and feel in our platform. Besides, we started to scan all the pages in our platform and log in to the design system “bugs” if we noticed something was not consistent with the new design system. Then we tackle those design system related bugs during our bug-crushing days. Within around 6 months, with all developers and designers, we develop a health platform that is easy to extend and modify.
How can it help now?
The design system project is still underway right now, so far, it has already made a great impact on shaping our product design process, and influencing the productivity of product development.
A solid design system has ensured our product continues to have good UX quality, which works as a key competitive factor in today’s B2B-platform world. The design system helps to maintain both visual and interaction patterns consistencies in the Impraise platform. We later start to build a design system code library, thus developers can even pick up some small features on their own without sacrificing UX quality.
When we look back on many features we released in the past two years, goals and OKRs, ask for feedback, and reviews. The design system project has been speeding up our product development efficiency a lot. A good example is the recent release of Pulse Survey. Our development team picks up this feature on their own using the design system and build the feature in less than a week.
Acknowledgment
Great thanks to our design team members, and those who have been supporting and facilitating during this project. We will continue working on extending the design system project to a design language system including our design principles, UI/UX guidelines, marketing, brand, and more. We will also work on making the whole process even faster by developing a complete code library. Last but not least, we will continue to deliver good UX and value to our customers!
