Connectr’s business was scaling quickly and so implementing a design system at this time was important to manage the growth and help create consistency and cohesion between products.
Connectr is a company that makes mentoring software that drives real results in DE&I, Retention and Engagement. They currently have two web apps with a range of features - one for candidate engagement, and the other for employee engagement.Recently, Connectr launched an admin portal that empowers customers to track engagement and impact in real time, and create and manage module content for their users.
Lead Product Designer
Tech Lead
Front End Engineer x2
UI design
System design
I learnt that there was a disconnect between the Figma design system and how the engineers worked. In order to increase buy-in from the engineers, I needed the redesign to become part of their workflow.
My plan was to make a design system squad made up from the Tech Lead, at least one Front-End Engineer, and myself. We were to meet bi-weekly to work step-by-step on the design system. The design system would first live as Figma files and later we’d utilise Storybook for a live and working design system.
With the engineers involved, I knew this would mean greater buy-in and adoption. As for integrating into their workflow, I would embed Figma into Trello, allowing Engineers to review design files without ever leaving their normal process.
I also wanted to create design tokens to define design decisions and to use components as it would save us a lot of time. For our designers, this meant being able to focus on the big issues, rather than minor details. For our developers, translating designs into code became easier and quicker. In general I feel that consistency improves the quality of a product and makes it easier to use.
I decided to structure the new design system in a format inspired by the famous atomic design methodology, with a Foundations > Components > Patterns > Pages hierarchical structure. I took advantage of Figma’s component library feature and had a single library of components that fed into all design system files, and later product files too.
The foundations section is extremely important as it influences everything.
After lots of research I decided to use a 4x baseline grid for our design system. This would influence the size of every element in our system so that everything would line up to the baseline. Once this was decided, I was able to define a sizing scale, a typography scale, a spacing scale, and values for styling elements such as corner rounding and shadows. These design decisions were all captured using design tokens, which would help create the consistency we required.
The foundation section held guidance for elements such as breakpoints, states, touch targets, typography, iconography, animation, accessibility, etc.
One of the bigger challenges was colour. Connectr is a white-label product which allows customers to use their own branding to personalise the platform. They’re also a WCAG 2.1 AA certified product so colour contrast is always front of mind. We developed a dynamic UI that would change depending on the customer’s colour choice, ensuring that there was always sufficient contrast to make it accessible.
As part of the foundation section I used a spacing system in order to define padding and margin for all components. The system uses pre-defined spacers applied to all components from every level. The spacer system was made up of ‘stack’ spacers, for applying space below or above components, ‘inline’ spacers, for applying right or left of components, and ‘inset’ spacers, to apply space around the inside or outside (padding/margin) of a component.
I used the 4x sizing scale to define a scale for these spacers. I limited the number of spacers to reduce decision-making; the fewer spacers there are, the easier it is to make a decision about which to use. I went with a geometric scale as it fitted nicely with the 4x scale, while dramatically reducing the number of options. Geometric scales are also regarded as aesthetically pleasing. I made one exception, which was to include a 24px size as I felt the gap from 16 to 32 was too large, and 24 is of course on the 4x scale anyway.
2, 4, 8, 16, 24, 32, 64
I applied these spacers to our components from the smallest atomic level, so that decisions around spacing were already made for designers when using our new system. Simply pulling a component from the library made the design process much more efficient.
We restructured this section of the design system in a smarter format, combining existing elements that were working well with many new components.
For example, the cards in our system used lots of individually defined components with a variety of information, such as time, date, associated person and star rating. We decided to unite them under the name ‘widgets’ – a snapshot of information summarising contents of the card. They are now styled and treated identically, giving them a much cleaner, ordered look.
I was also inspired by the Adobe Spectrum design system, in particular how it categorised components by ‘Inputs’ and ‘Feedback’. This is something we adopted for our system too.
This project is still in progress. We are continually testing out the Foundation and Components sections of the design system, such as Cards and Widgets. Hence we have a good idea of how our full page designs will look even though we haven’t finished writing the guidance.Below you can see ‘before and after’ views of the current live product, as well as the predicated final look after applying the new system.The next step is to make our way through the Patterns section before finally moving onto full-page designs.
Next Steps We are close to finishing the Figma part of the process, and, once that’s complete, we can move onto thinking about how to implement into Storybook. The engineers plan to use our new design tokens and rules in a sandbox environment to test how they will affect the product, before we actually go ahead and make the switch. This has already started and we’re working in tandem as I finish the Figma guidelines.
One of the biggest learnings was the importance of the initial framing of the project. It was also vital to bring people on board to secure buy-in. I did a huge amount of research into various design systems and learnt a lot from this.
There is now clear buy-in from the engineers and excitement around the project in general; after all, these are decisions that they’ve helped to make and will greatly improve the consistency and quality of their products.
Although there is no live impact yet, I believe this project will help shape the future of Connectr products, ensuring they deliver a consistently high-quality service to users.
