Design direction as a step before design system
Long-lasting design systems need solid foundations. Sometimes this requires taking a step back.
When a company grows from startup to scale-up, the time comes when you can finally breathe out a bit. You take a look around and see all the mess acquired during the fast-paced times of growth. You start to notice inconsistencies all-around, the tech and design debt. The processes which helped move fast during volatile times turn out to be inefficient in the longer term. Naturally, the desire arises to clean all of this up and set it up for scale. That is usually the time to start building a design system.
Hundreds of articles describe how to start a system and which steps to take. It seems straightforward: rationalise foundations, build basic components and document all that. Pretty much every company starting a system goes through this.
This makes sense, provided you know how you want the product to look like. For instance, you may already have a basic UI Kit or some groundwork for the component library.
But what if not? What if after a rapid startup phase you realise that the app is a mosaic of bespoke styles? How do you even begin crafting components when there’s no common logic to suggest how they should look and feel?
When we kicked off the work on the design system at Beamery, we discovered lots and lots of inconsistencies in styles. Normally, as a next step, we needed to conduct “rationalisation”:
- take an inventory of the current state
- figure out use-cases and requirements
- discover common patterns
- strip out bespoke and inconsistent styles
But we realised it’s hard to decide which styles to keep or remove when there’s no clear rationale. The process of rationalisation has to rely on a common idea/principle. Otherwise, we’d have to make arbitrary, subjective decisions, which doesn’t sound like a solid foundation for the system.
We realised the need for a more high-level approach. Something to guide us: principles and vision to refer to. There was a need to take a step back and define the general design direction. It would be easier to move forward knowing where we want to go.
Design direction
When kicking off a large project at Beamery, we start with defining the desired outcomes. What is that we want to achieve? For us, it wasn’t design direction for its own sake. It was something that this direction would enable. We wanted to:
- make the design more aligned with the company’s brand
- modernise the UI to be more in line with industry trends
- unlock the development of the design system
Having these goals defined helps us remember what we are optimising for, and move more deliberately. However, each of them raises its own additional question: what are the attributes of our brand? What does “modern UI” mean for us? We tackled these questions in a design sprint format through a series of workshops.
Brand attributes
After analysing brand guidelines and speaking to the Marketing team, we formulated some keywords — adjectives that appeared the most often. These would become a foundation for brand attributes.
Further conversations with representatives of different functions (from the company’s leadership to marketing designers) helped narrow down the list to four main attributes:
Some manifestations of these attributes were already evident in the main brand elements. Primary Violet/navy colour tone and strong typography associated with “reliable”. Soft rounded shapes of the logo connected with “helpful”. All these would become inputs for future visual language.
Modern UI
We started with a moodboarding exercise where designers captured various examples of “modern UI” (with a focus on enterprise/b2b) as each of us sees it. After discussing each board individually, we put together a list of common themes — the elements of the “modern UI”. They became another input for the design direction.
Clean & clear
- Clean, decluttered and minimalistic UI.
- Focus on the most important.
Colour
- The vibrant, vigorous colour palette.
- Deliberate use of colour on a monochromatic UI.
Typography
- Bold font styles.
- Careful balance of various typographic styles.
Focus
- Simple and structured layout focused on the main goal.
- Contrast between the background and content areas for better focus.
In the next workshop, designers individually sketched ideas for the style relying on what we’d discovered before. Everyone was free to ideate holistically or within the context of a particular product. This allowed exploring a broad range of potential directions.
Elements of the new style started to develop.
It was important at this point to ensure that the emerging style was in sync with our end goals: become more aligned with company’s brand and modernise the UI.
The resemblance was visible between some elements of the new style and key attributes of the brand. Soft shapes and rounded corners exemplified “Helpful”, whereas colour scheme and type styles correlated with “Reliable”.
Putting the mockup of the new style among products we consider “modern” allowed us to benchmark the direction. Do we fit in here? Do we still look like Beamery?
Next, we started converging on a single direction. Each designer created a concept of their product using all the available inputs.
As a result, we stress-tested the style and discovered several open questions broken down into three groups:
- to discuss
most prominent questions, which need all-around evaluation - to consider
reasonable suggestions, not necessarily actionable - to implement
no-brainers, take into action now
When tackling the open questions, we utilised the concept of “signal vs noise”, where “signal” is something that supports your direction and “noise” is a distraction. An example of a “signal” would be the idea to apply a subtle blue tint to our neutral colours. This would bring a largely monochromatic UI in balance with brand elements such as headers.
After the last step, we had an agreed direction and a backlog of questions to clarify it further. All was ready for the final pitch to the company’s leadership.
Outcomes and learnings
Within a month we managed to formulate the basis of the new design direction: principles, style elements, even some basic components. This has become a solid foundation for the new design system.
It might be hard at times to convince designers to start using a new style. There’s always some inertia in the way. Yet, we’ve noticed that designers started proactively creating concepts using the new direction. As they were involved as co-creators from the very beginning, they had a sense of ownership and pre-existing endorsement.
Getting a leadership buy-in about a global redesign might be challenging. It looks like a scary investment without a clear gain. There are so many uncertainties about this kind of project. That’s why we kicked off with a clear problem definition that resonated with stakeholders deeply. We collected evidence that the problem exists and provided a step-by-step plan for resolving it.
As soon as we gained leaders’ interest, we had maintained it with regular updates. Utilising weekly Product Forum meetings we presented the results of each step to a group of product managers, designers and executives. This helped navigate the direction in a way that resonated with people and made them excited about the upcoming change.
Want to work alongside some great humans and inspiring leaders to solve big problems? We’re hiring! Click here to join the #BeamTeam and change the future of work.
