Skip to main content

Finding the way to scalability




Information technologies


  • Product & team lead



Designer and developer creating a product

How a Slovenian company at the bleeding edge of cloud solutions is using a homebrewed design system to scale-up sales, customer deployments, and internal tools.

By pitching a business case

Design system is essentialy an internal product, and needs investing into. Developing key performance indicators and defining value propositions was key to getting the initiative off the ground.

By messiness in early stages

Debates weighing details vs. performance, user experience vs. developer experience, personal ambition vs. business reality are inevitable on every system build.

By being considerate

You can build the coolest system in the world, but if it's not compatible with existing solutions and workflows, its adoption will suffer. Transition periods are a fact of life.

By dedicating resources

Working on yourself is always the hardest. Urgent matters get priority over long-term initiatives. Keeping the team together and focused has been crucial.

By striking a balance

Unique, rich visual language will make products stand out. But it can come at the cost of technical performance. It takes mature, open-minded designers and developers to deliver both.

By inclusive scoping

Solving all problems a product team may face is cost-prohibitive. Mandating the use of an overly limiting system is counter-productive. It is crucial to involve users in decision-making.

The whole story

Example of a website.

Wayfinder in use for the marketing website.

Example of a webapp.

Wayfinder in use for a data-driven webapp.

The gist of it

3fs is a highly dynamic, innovative environment. Multiple initiatives are in the pipeline at any time: 3fs marketing assets, numerous internal tools, research & sales prototypes, several client projects, etc. As a result, it is hard to keep designs consistent and code clean. Back then, prototyping has also not been as cost-effective as it could be.

One could hire more people to compensate, only to see issues appear in other areas. Instead, our internal projection clarified that huge savings quickly offset the up-front cost to develop a design system in time and resources down the line. It finally convinced our CEO to greenlight the initiative, and Wayfinder (the system's eventual name) was born.


in realistic savings on resources needed to prototype & launch each new product.


days to create the first ever demo of a high-fidelity prototype with our components.


people to kick-start the initiative, and deliver the minimal viable design system.


months to design and build the beta launch, ready for testing and refinement in real use.

Doing the homework

We first inventoried our existing software, analyzed sales and production workflows, surveyed our staff for tooling preferences, and talked to our IT operations team about the optimal approach to collaboration and distribution. These insights were vital for informed architectural decisions down the line, making the first build more cost-effective and accelerating Wayfinder's initial adoption.

3fs has also been amid a rebranding initiative that introduced a unique verbal and visual language. This prior work would simplify the graphic design of the system to a degree. However, expanding into the product development domain turned out to require a non-trivial amount of work.

A diagram of design system structure.

Structure explainer for 3fs employees.

A diagram of design system distribution.

Distribution explainer for 3fs employees.

Setting the foundations

Matej Žvan, the Wayfinder engineer, and Jurka Mihelin, the Wayfinder designer, worked closely to ensure Wayfinder's foundations grid, spacers, typography, colors, icons, and pictograms were done in an accessible, future-proof way. A lot is at stake, after all. Every higher-level component will be affected, and subsequently all of their users. It took considerable time and multiple iterations to get the foundations right, at times frustrating the team. But it was all forgotten when our later work showed it was a worthwhile effort.

When doing our “homework,” we gained a lot of valuable insights on the component scope for the MVP release of Wayfinder. Teams welcomed the idea that we make default choices, especially if they are smart solutions to common use cases. They still wanted to adjust the components, but endless choices were seen as an anti-pattern. Utility functions like input validation in form fields were also noted as productivity boosters.

Data visualisation and infographics templates.

Designers' tools (left, Figma) finally catch up to engineers' output (right, Storybook). We were thus able to create data-driven, variable components in Wayfinder that are 1:1 equal for both disciplines.

A complex data table.

We organized design files and code base into a matching file structure and release numbering. It made the system browsable, shareable & traceable per asset, in both domains.

A pop-over visualisation of data distribution.

Having a single source of truth in Zeroheight documentation tool, with both sets of assets using the same underlying logic, drastically improved team communication and collaboration.

The challenge of data

3fs specializes in complex, professional, cloud-based software: enablement services in the telecommunications sector, IoT platforms for medical environments, research tools for large data sets, and similar. They come with special UX considerations, particularly in presentation and interaction with data. One of the main value propositions from the design system team has been to simplify and improve that.

We worked with studio AA, responsible for 3fs branding, to expand it with tailored data visualization guidelines. But implementing them as reusable, programmatic components is a much larger, more complex task. So we took the pragmatic, demand-driven approach: adding components as needed, and only for cases that show up repeatedly in 3fs teams' custom implementations.

Data visualisation and infographics templates.

3fs data visualisation and infographics language begun as a limited exploration by studio AA, but then got ported to the digital product domain and greatly expanded. Both the light and the dark theme were considered.

A complex data table.

The good ol' workshorse: the data table. We put a lot of thought into making them pleasant to the eye and easy to use, since so much human-data interaction is done throught them.

A pop-over visualisation of data distribution.

Exploratory interaction with data is often neglected. We enabled data transparency and serendipity with pop-up visualisation pattern, featured in Wayfinder's guidelines.

An educational experience

We did consider repurposing another design system in the beginning. But, in addition to giving us full ownership, a complete internal build presented an invaluable educational opportunity. We often encountered design systems at our clients in various stages of maturity. Having our own inner “playground” helps 3fs acquire a more profound knowledge of intricacies that come with building and maintaining a design system for digital products, thus offering a better service to our clients. close

Design systems substantially reduce the scope and complexity of UI work on individual products. But UX work cannot be streamlined like that: the challenges it solves are unique to each use case, rather than systemic.
Slack chat with PM at 3fsAfter a team implemented poor UX with great UI

More success stories

Factory robot and two people.

Case: Kolektor

Future of robots, on the line

Developer provisioning IoT data plans

Case: Ericsson

Global local IoT connectivity

Team working on IoT prototypes

Case: Ericsson

Hello, Thing!

Reader enjoying a newspaper infographic

Case: Dnevnik

Telling stories with data

Get in touch

Let's have a chat

Book a free call

Use email instead

Connect online