Wayfinder 

A design system developed by a Slovenian bleeding-edge cloud solutions company to scale up sales, customer deployments, and internal tools.

CLIENT

3fs NORDIC AB

MY ROLE

UI/UX Design

Wayfinder / Design system / Cover

Problems

  • With multiple ongoing initiatives and projects, 3fs struggled to maintain consistent designs and clean code across the organization, leading to inefficiencies and inconsistencies.
  • The existing prototyping processes were not cost-effective, and hiring more personnel couldn’t address the underlying issues, which were spreading to other areas.
  • Taking a pre-built design system wouldn’t be enough; it needed to be compatible with existing solutions and workflows to ensure successful adoption.
  • Urgent matters often took priority over long-term initiatives, making it challenging to dedicate resources to the development of a design system.
  • The desire for a unique and visually rich design system had to be balanced with technical performance requirements.

Goals

  • Cost savings
    >  help achieve significant cost savings by streamlining design and development processes across multiple initiatives
  • Consistency and efficiency
    >  enhance design consistency, code cleanliness, and cost-effective prototyping and improve the overall efficiency of internal tools and client projects
  • Clear foundations
    >  establish the system’s foundations in an accessible and future-proof manner, benefiting higher-level components and users
  • Data visualization enhancement
    >  address the unique UX considerations related to complex, professional, cloud-based software, simplify data presentation and interaction through tailored data visualization guidelines

Wayfinder / Design system / Website

Wayfinder in use for the marketing website.

Wayfinder / Design system / Webapp

Wayfinder in use for a data-driven webapp.

The Design Process

Recognizing the need

3fs, an innovative and dynamic environment, struggled with design consistency and code cleanliness due to numerous ongoing projects. Prototyping was costly and inconsistent. The realization that a design system could save costs and ensure consistency convinced the CEO to greenlight the Wayfinder initiative.


Gathering insights

To prepare for Wayfinder’s development, the team lead conducted an inventory of existing software, analyzed workflows, gathered input from the staff, and collaborated with the IT team. These insights proved crucial in making informed architectural decisions, reducing costs, and expediting Wayfinder’s initial adoption. While 3fs had already undergone rebranding, transitioning into product development required substantial effort.

Wayfinder / Design system / Structure

Structure explainer for 3fs employees.

Wayfinder / Design system / Distribution

Distribution explainer for 3fs employees.


Building a strong foundation

We collaborated closely to establish Wayfinder’s core components – grid, spacers, typography, colors, icons, …. This took time and several iterations, but it paid off as it set a strong foundation for higher-level components and overall user satisfaction. Additional valuable insights were gained after the MVP release of Wayfinder. It helped us with the component scope and the decision to make default choices as smart solutions to common use cases.

Wayfinder / Figma - Storybook

Designers’ tools (left, Figma) in sync with engineers’ output (right, Storybook).

Wayfinder / Design system / Figma files

Design files and code base share a matching file structure, making it easier to browse, share, and track assets.

Wayfinder / Design system / Zeroheight / Online brand manual

Zeroheight documentation tool as a single source of truth, using the same underlying logic.


Tackling data challenges

3fs specializes in complex, data-intensive software solutions requiring special UX considerations. Data is useless without the ability to visualize and act on it. As one of the main value propositions, the design system aimed to simplify and improve presentation and interaction with data. We added components gradually, as needed, and only for cases that repeatedly appeared in 3fs teams’ custom implementations.

Wayfinder / Design system / Infographics

Digital data presentation follows company data visualization and infographic guidelines.

Wayfinder / Design system / Table

Aiming for better user experience with complex data tables.

Wayfinder / Design system / Inspect

Exploratory interaction – data transparency with pop-up visualisation.


Embracing education

Building our own design system didn’t just give us a complete ownership, but it also provided an invaluable educational opportunity. It was a playground for learning design principles, collaboration, and technical skills. It encouraged a culture of knowledge sharing, adaptability, and improved communication within the team.

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from - Youtube
Vimeo
Consent to display content from - Vimeo
Google Maps
Consent to display content from - Google