project name

Snooze design system

role

research, design

date

11-12/2018

eve sleep is a sleep wellness brand "obsessed with the power of sleep and the way it can fill your day with sunny optimism and the energy to be at your best." In close collaboration with a front-end developer, I've designed Snooze, an MVP design system, to bring order and consistency to eve sleep's website and to streamline the design and development processes.

project name

Snooze design system

role

research, design

date

11-12/2018

eve sleep is a sleep wellness brand "obsessed with the power of sleep and the way it can fill your day with sunny optimism and the energy to be at your best." In close collaboration with a front-end developer, I've designed Snooze, an MVP design system, to bring order and consistency to eve sleep's website and to streamline the design and development processes.

project name

Snooze design system

role

research, design

date

11-12/2018

eve sleep is a sleep wellness brand "obsessed with the power of sleep and the way it can fill your day with sunny optimism and the energy to be at your best." In close collaboration with a front-end developer, I've designed Snooze, an MVP design system, to bring order and consistency to eve sleep's website and to streamline the design and development processes.

A mobile and desktop previews of the eve sleep peeking cart modal, with an interactive list of items added to cart, a link to the checkout, a button for coupon codes, a link to ‘Been referred by a friend?’, and a carousel with product recommendations. On mobile the modal is screen sized, and on desktop it peeks in from the right side of the screen.
A mobile and desktop previews of the eve sleep peeking cart modal, with an interactive list of items added to cart, a link to the checkout, a button for coupon codes, a link to ‘Been referred by a friend?’, and a carousel with product recommendations. On mobile the modal is screen sized, and on desktop it peeks in from the right side of the screen.

Snooze design system site

From top to bottom:

  1. Bulb app homepage and account page previews with links to the 'Home energy efficiency' feature

  2. Preview of the 'Home energy efficiency' feature's address matching flow

  3. 'Home energy efficiency' page in the Bulb app

  4. 'Home energy efficiency' feature recommendation pages

Interface inventory & planning

After initial research about design systems and how to build them from scratch, I conducted an interface inventory. I took screenshots of all UI elements on the website and categorized them slide-by-slide.
I presented my findings to the small design system team, consisting of a front-end developer and a product manager, and to a UX designer and the head of design. We reviewed the slides together and started making decisions about what to keep or merge, what needs redesigning, naming, etc.
I listed out all the components in a google sheet document with options to sort them by type and importance and later by completion state as well to have a clear overview that helps with planning and keeping the project on track.
A preview of the design system documentation tracker in Google Sheets, including the design styles and components, their design and build states, all marked by importance for prioritisation; and a preview of the UI audit Google Slide, on page six, showing 10 different button styles.
A preview of the design system documentation tracker in Google Sheets, including the design styles and components, their design and build states, all marked by importance for prioritisation; and a preview of the UI audit Google Slide, on page six, showing 10 different button styles.
A preview of the design system documentation tracker in Google Sheets, including the design styles and components, their design and build states, all marked by importance for prioritisation; and a preview of the UI audit Google Slide, on page six, showing 10 different button styles.

Design system documentation tracker in the back, and UI audit in the front.

Design phase

First I reviewed and updated our visual design language, the base of the design system. After the guidelines for the colours, typography, iconography, spacing and elevation were established, I created shared styles and symbols in SketchApp.

Colour styles: three primary colours, and the main colours hover variant, a grey palette, consisting of four greys, and three support colours, and their hover variants.
Colour styles: three primary colours, and the main colours hover variant, a grey palette, consisting of four greys, and three support colours, and their hover variants.

eve sleep colours

Following the atomic design principles, I started by building the smallest components first and working up towards more complex ones later. I saved this SketchApp document as a library and shared it with the other designers.

The button component, with two types: contained button/primary and outlined/secondary, two sizes: large and medium, and six states: enabled, disabled, hover, focused, pressed and loading.
The button component, with two types: contained button/primary and outlined/secondary, two sizes: large and medium, and six states: enabled, disabled, hover, focused, pressed and loading.

Button component

At the same time, following my designs, the front-end developer was building the “real” source of truth, the online version of the design system.

Results

Although Snooze had lots of room for improvement, it has already helped designers and developers work more efficiently and it played an instrumental part in big projects like the checkout and peeking cart redesign.

previous project

peeking cart redesign

previous project

peeking cart redesign

previous project

peeking cart redesign

say hello

timea.dimeny@gmail.com

say hello

timea.dimeny@gmail.com

Create a free website with Framer, the website builder loved by startups, designers and agencies.