Designing Visma’s
Website
A website solution to help editors maintain content more efficiently and ensure consistent design across all pages.
The goal:
• Create a clearer and more unified design process for editors.
• Simplify content maintenance and reduce update time.
• Ensure the design and navigation adhered to Visma’s design system.
_edited.png)
My Role
"A Website for Better Usability and Editor Efficiency"
I led user interviews, created wireframes and prototypes, and conducted usability testing to iterate the optimal solution. I collaborated closely with the product managers to ensure accurate implementation.
Role
UX team lead for reserach, design & prototyping
Collaboration
Product managers, UX team
Tools
Figma, Miro, HubSpot CMS, Trello, Lyssna
Period
Jan - Jun, 2025
The Problem
Users struggled to maintain design consistency, and the navigation structure made content harder to discover. Manual workflows slowed down the creation process and often led to errors.
Key problems:
-
Unclear navigation hierarchy
-
Inconsistent application of brand guidelines
-
Manual processes were inefficient and error-prone
Research & Design Process
- Interviews & Observation with 8 users (marketing, development, visual designer, digital marketing, campaign specialist and customer experience director)
- SWOT analysis of the documentation and websites
- Competitive analysis
1
Discovery
Data analysis showed
The existing documentation was fragmented and overwhelming, spread across multiple platforms. It wasn’t tailored to different user roles, which made it difficult to navigate, understand, and apply consistently. In addition, manual workflows consumed unnecessary time and reduced overall efficiency.
Key challenges:
-
Lack of clear hierarchy in navigation and content organization
-
Inconsistent branding across pages
-
Time-consuming and error-prone manual updates
As a result, editors often struggled to find the information they needed, maintain brand consistency, and work efficiently. 100% of the users did not used the documentation.
Requirements → Design Solutions → Impact
Requirement
Clear hierarchical structure
Visual examples of how modules should (and should not) be used
Search function
Step-by-step guides
FAQ section
Inspiration / Best practices
Concise, user-friendly language
More visual content, less text
Design Solution
Introduced modular navigation with consistent levels
Added “do/don’t” guidelines
Designed a global search across documentation
Created visual tutorials
Built a dedicated FAQ with common issues and solutions
Added a section with industry-specific examples
Rewrote content with shorter headings and smaller text blocks
Integrated icons, grids, and card layouts
Impact
Easier content discovery, reduced confusion
Increased clarity, fewer mistakes by editors
Faster access to relevant content
New editors could get started more quickly and independently
Reduced need for external support
Helped editors apply modules creatively and consistently
Improved readability, especially for non-technical users
Faster scanning, improved usability
2
Visual Identity
Respect Visma Brand and
Design System
We tried to innovate in terms of concept and animations but we needed to respect Visma guidelines to make sure we were not breaking any of their design system’s rules.
Typography
Colors
RGB
255, 255, 255
RGB
239, 239, 236
RGB
0, 0, 0
RGB
0, 82, 84
RGB
249, 182, 180
3
Ideate
Let’s Create
I started with sketches and wireframes to visualize an improved navigation structure. Prototypes were created and iteratively tested with users to ensure the solution met their needs and was intuitive to use.
Sketches
This section presents the initial sketches developed based on the defined scenarios and requirements. I explored different structural approaches with low-fidelity wireframes in Figma. We used DOT-voting with the team to select the strongest concepts, which we then refined and developed further.
Wireframes
After numerous meetings and discussions with the product managers showing the Low Fidelity, as well as extensive work on wireframes, we have selected a few key concepts to move forward with in the next phase.
Low-fidelity wireframes were created in Figma to explore different structural approaches.
 |  |  |  |
|---|---|---|---|
 |  |  |  |
Usability Testing
I conducted usability tests with five editors in Lyssna.com, measuring task completion times and gathering qualitative feedback. Results showed reduction in content update time and significantly improved user satisfaction.
During the usability testing sessions, some difficulties were identified by the users as they interacted with the prototype. These issues were important to address and were manageable within a short timeframe. As a result, we updated the prototype to resolve the problems encountered by the users.
Final Design
The high-fidelity prototypes included:
-
A clear navigation hierarchy for faster content discovery
-
A consistent color palette and typographic hierarchy aligned with Visma’s brand guidelines
-
Microinteractions for a more responsive, engaging experience
Step by Step to
"Find Video Module"
To improve usability, I created three ways for users to access the ‘Modules’ section, ensuring quick reach from different contexts.
Cards with labels and icons were used to create a simple and effective way of visualizing information.
The Video module uses cards with images and labels to make content easy to scan. It highlights best practices, what to avoid, and ends with common questions to guide the user.
 Step 1 - Landing Page |  Step 2 - Modules overview |  Step 3 - Video module |
|---|
Step by Step to
"FAQ, Search & Support"
Users can access the FAQ in two ways: by typing a question or browsing visual cards with icons and labels.
FAQ entries are displayed as cards with images, labels, reading time, date, and a brief description.
If users don’t find what they are looking for, they can use the search function, which suggests similar questions to guide them further.
 Step 1 - FAQ overview |  Step 2 - FAQ Questions |  Step 3 - Search |  Step 4 - Support |
|---|
For support, users are offered multiple ways to get help. The design guides them through hierarchy, where card sizes indicate importance, the largest card representing the primary option they should try first.
Final Outcome
The new website offers an intuitive navigation structure and a clear design aligned with Visma’s design system, making editors’ work easier and ensuring a consistent user experience. Editor feedback has been very positive, and the implementation has led to more efficient workflows. Editors reported smoother workflows and greater confidence in maintaining design standards.
The design delivered clear improvements:
-
Improved navigation hierarchy enabled faster content discovery
-
Cohesive visual identity strengthened brand consistency
-
Reduced time for editors by streamlining workflows in HubSpot CMS
"very good, like that you added best practices as well"
"Easy to use, left margin with expandable sections makes sense and is intuitive to use."
4
Reflection & Next Steps
Being Even More Collaborative
Every Details Matter
Next Steps
When working remotely, you need to be even more collaborative than when sharing the same office space with clients or coworkers. This experience helped me better understand the creative process I needed to follow to produce meaningful work.
When working with a large client, every detail matters. Visual hierarchy, microcopy, and the order of elements must be intentional and clearly explained.
If I had more time, I would explore automation and pre-built templates to further reduce manual work and scale the solution across Visma’s many product websites.
Let's Create Something Amazing
I'm always open to discussing new opportunities, creative projects, or potential collaborations.