Svensk Handel

My responsibilities

UI/UX
Client contact
Design system
Testing

Overview

Svensk Handel needed a website update with a new design system and a more intuitive structure. The project was already underway, having just completed an extensive research phase. With multiple designers involved, my role was to consolidate their work and bring the project to completion.

Live site(opens in a new tab)

The challenge

I joined the project with fresh eyes as a new hire after a long research and planning phase. My task was to distill the collected insights into a clear design plan for implementation. The site contained a vast amount of content, but its structure didn’t effectively support users in finding relevant information.

The old Arbetsgivarguiden page: a dark green header, a search box and a long list of links — Before

The redesigned Arbetsgivarguiden page: a clear header, search, and six topic cards — After

On the surface, the old site appeared modern and functional. However, users often found themselves lost in “rabbit holes” due to a lack of deep navigation structure. Inconsistencies were everywhere—up to seven different designs for the same button—and new features had been added over time without a cohesive design strategy. As a result, users struggled to find what they needed.

Process

After reviewing the research, we formed a working group with key stakeholders to validate findings and outline a solution. With the redesign underway, I mapped out all existing page types, identifying ways to merge, streamline, and restructure content—ensuring no more than three navigation layers and clear overview pages.

The old Varningslistan page: a dense table of warnings under a long introduction — Before

The redesigned Varningslistan page: a short introduction, filters and a scannable list — After

Six content cards from the new component library: news, events, member offers and profiles — I created a robust design system to simplify content creation and placement, collaborating closely with developers to ensure a smooth CMS setup.

The same news card shown in its small, medium and large sizes — Each component comes in three size options, each with predefined text sizes to ensure optimal readability across different screen types.

Using Figma Variants to create dynamic building blocks, making it easy to update designs and build new pages efficiently.

Result

The result was a cohesive new site with a clear structure and a streamlined filtering system that makes it easy to find the right content. Unified branding and a comprehensive, user-friendly component library tied it all together.