Design System

Overview

Belysningsdesign.se is one of Sweden's most distinguished high-end lamp shops. I built a design system for belysningsdesign as a way to explore the topic hands on - all the way from foundations to UI-design.
‍
I stumbled upon the topic of design systems when I was building a functional component library for belysningsdesign as a project at Yrgo. I was captivated. I decided to expand upon my component library and make it into a design system - drawing inspiration from other public design systems such as the MailChimp Style Guide, Google Material Design and Atlassian Design Guidelines.
‍
The design system contains three levels; foundations, components and modules.

What

Design system
UI Design

Where

Spare time

When

Spring 2021

Personality

Clean
Minimalistic
Generic

Foundations

Defining the basics

The foundations contain the fundamental building blocks upon which all other components and modules are built. Among them there is a unit system, grid system, typography and colors. I defined the foundations through explorations, where I built components, modules, web pages and user journeys in Figma with the intent to identify and specify rules for the foundations.
‍
The unit system specifies what sizes are to be used, and also how these sizes should be applied in various situations. The grid system specifies the responsive columns, grids and margins for desktop and mobile viewports. The typography section specifies the various text components to be used. And the color system specifies what color the brand uses and how.
‍
There are more categories that would need to be specified within foundations as I work with the designs, but I found these to be the most essential in order to be able to create designs for the product.

Components

The legos of UI design

Wireframing user journeys and web pages allowed me to identify what components and modules were most important to Belysningsdesign. I designed buttons, forms and labels and continuously explored and adapted the foundations until I had consistent components that stayed true to the foundational rules.

My focus was more on design structure and the design of the design system than on the creation of a nice brand and webpage design. It was thus great to work with an existing webpage, as I didn’t have to think too much about the brand and the look and feel of the product. I could more or less steal the design from belysningsdesign, and focus on picking apart and systematizing what was already there.

Modules

The highest abstraction layer

Modules are the highest layer in the design system. I designed a pop-up from scratch and redesigned the mini-cart from Belysningsdesign. I also explored how I could communicate the underlying rules to a module through a blueprint showing the spacing.

ui design

Putting it all back together

The design system and the UI-design molded each other throughout the process. These are two of the pages that I used as a means to explore and test the design system. Here they are in their final form, following the rules and structure that they helped me define.

UI Design

Talkative heading blabla

The ambition was to create a UI that would keep the usability and simplicity of the earlier UX-prototypes while staying true to the modern and minimalist stylescape and brand. This requires a fair amount of exploration in Figma and design critique from other designers who could see the UI from a fresh perspective.

The final app has a typography-heavy minimalist yet fun design. Images and illustrations have been replaced with color fields that add to the funky aesthetic whilst also carrying meaning and intuitively separation categories. My UI-design explorations also brought with them a few extra features that add an additional layer of zest to the app, such as fun descriptions of each category that change every day.

Belysningsdesign.se

Exploring the nitty gritty of design systems.

DESIGN SYSTEM + ui design