Lensway
UI/UX Designer
New grid & Designsystem
UX/UI Designer, Project-lead
Lensway is a wellknown Scandinavian brand that sells contact lenses and Eyewear online since 2000. Lensway have e-stores in Sweden, Norway, Denmark and Finland. Since I started as a consultant the Brand has gone through a rebranding where I had a lead-designer role. Some of the designs has since then been iterated or updated.
Challenge: create a new responsive grid and Design System
Lensway didn’t have a set design system and had an outdated grid that created a time-consuming process for the developers since they had to guess placement and measurements were not structured.
Approach: collaboration and communication is key
I started to set a grid and rules along with developers to enable a future design system. I tested some different options and landed in an 8pt grid and discussed with both developers and other designers what would cover all future needs in the best way. After setting breakpoints for standard devices and with a mobile-first approach in mind – the new grid was tested and implemented and the work with organizing a design system began.
About the design system
To make the process for all designers as seamless as possible I decided to create a designsystem according to an “atomic design system”. It’s basically components and elements divided into atoms, molecules and organisms. Here the naming convention became important to automatically organize everything into correct folders in the design library.
After this was done, all designers linked to one design system and we could have a faster way of working compared to before when everyone copied a document, worked in it throughout the day and then copied the artwork to a master document. And the developers could follow along in Zeplin.
The logic around 8
Everything in the designsystem is dividable by 8 (in some cases 4) simply to follow the logic of the grid and the responsiveness. The system contains:
• Buttons (with different states)
• Colors (Primary, secondary, backgrounds)
• Typography (H1,H2 and different states)
• Icons (8,16,24 px)
• And different components (atoms, molecules, organisms).