Magasin du Nord is a department store with stores on Kongens Nytorv, in Fields, Lyngby, Rødovre, Odense, Aarhus, Aalborg and magasin.dk.

Their ambition and goal is to create a unique, coherent shopping experience across all platforms.

Client

Magasin du Nord

Service

My Role

I was part of the Online Development team and functioned as their Digital Designer. I worked on a full-site redesign of magasin.dk with the goal of lifting the design and user experience to a higher level in close collaboration with the rest of the team. I had two main focuses, (1) documenting Magasin’s DNA and developing UI components in a digital design system, as well as (2) assisting in solving development tasks and producing interactive prototypes and finished high-fidelity designs for desktop, tablet and mobile.

Branding

Component-based design guide for consistency, efficiency and scale

I started the journey towards launching an interactive single source of truth for every employee and external developer that needs to create for magasin.dk. The design guide consists of global styles, components, blocks, pages and animation references, and it shows how the individual components are combined and used in context.

Below is a sampled preview of the design guide.

Global colours in the Magasin Design System
Buttons and links in the Magasin Design System
Forms in the Magasin Design System
Radio button animation in InVision

Animations are documented with details like easing curves, accompanied by a visual interactive demo.

Radio button animation
Radio button animation in InVision

Animations are documented with details like easing curves, accompanied by a visual interactive demo.

Radio button animation

UI Design / Prototyping

Design & handoff to development

Below is a sample of finished design I did for Magasin du Nord.

Of course it is crucial to communicate the design clearly and adequately to the developers. I made sure that my designs were clickable and could be inspected to see the precise values of each element.

Inspecting Magasin design in InVision

Clickable prototypes with precise values of each element made it easier for developers to implement the design.

Inspecting Magasin design in InVision

Clickable prototypes with precise values of each element made it easier for developers to implement the design.