Visma | Visionplanner
User Experience design & Designsystems
Wayfinder
During my tenure at Visionplanner, I spearheaded the implementation and development of Wayfinder, our comprehensive design system. Operating within the accountancy sector, Visionplanner specializes in crafting essential yearly documentation for clients.
The primary objective of the Wayfinder application is to streamline processes and uphold a reputable stance within the accountancy industry. Initially, a key challenge revolved around users grappling with the multitude of styles present across our product range.
To foster greater user confidence and cohesion, we embarked on a mission to consolidate disparate styles into a unified design system. Wayfinder emerged as the singular solution, harmonizing the entire product portfolio of Visionplanner. This strategic move also involved transitioning our product strategy to a platform-as-a-service model.
Establishing Brand Consistency: Colors and Basics
Our journey began with a collaborative effort between our team and the marketing department to establish a cohesive style guide. This involved aligning the brand identity with the product's visual elements to ensure consistency across applications, websites, and customer interactions.
Ultimately, our aim was twofold: to instill trust among our users and to demonstrate our commitment to incorporating their perspectives into our design decisions.
Optimizing Layouts: Grids & Spacing
Achieving consistent spacing was a priority, and to accomplish this, we implemented a systematic approach.
Crafting Consistent Typography with Figma Styles
We meticulously defined styles and semantic variables for each font and context in which it was used. This provided designers with clear guidelines for selecting the appropriate font and style from our cohesive design system.
Furthermore, by utilizing the same fonts across both marketing and product design endeavors, we ensured alignment between graphic design elements and product interfaces.
Streamlining Iconography
Upon joining the company as product designers, we observed that product owners were primarily responsible for creating icons. Recognizing an opportunity to enhance their workflow and promote best practices, we provided them with a standardized example of icon creation.
As our design system matured, we opted to integrate Material Design icons into our repertoire. This decision stemmed from the realization that many of the icons we required were similar in nature, and in
Atomic design
Atoms
Atoms are the basic building blocks of UI design. These are the smallest, indivisible elements such as buttons, input fields, labels, icons, etc.
Molecules
Molecules are combinations of atoms that work together as a single unit. For example, a search bar (composed of an input field and a button) or a navigation menu (composed of menu items).
Organisms
Organisms are groups of molecules functioning together to form a more complex component that serves a specific purpose within a UI. Examples include a header (composed of a logo, navigation, and search bar) or a sidebar (composed of various widgets).
Templates
Templates represent the layout or structure of a page or section of a UI. They define the arrangement and composition of organisms and molecules within a specific context.
Pages
Pages are instances of templates filled with actual content. They represent the final stage where all the components are combined to create a fully functional UI.
By breaking down UI design into these smaller, more manageable components, atomic design promotes modularity, reusability, and scalability. It also facilitates collaboration among designers and developers since components are standardized and can be easily shared and reused across projects. Additionally, it encourages consistency and maintainability by enforcing a structured approach to UI design.
Take a Peek Inside Wayfinder
Dive in and explore! Wayfinder's user-friendly design covers everything from colors to buttons, shaping your digital experience to make life easier.
Details
Within the details, we have a list of all the components that are available in the design system.
The components are organized into atoms, molecules, organisms, and templates, following the atomic design methodology. Typically, each component category would be detailed on its own page. However, for illustrative purposes, we've consolidated them into a single file here.