Der Linsenpate
Contactlenses e-commerce shop responsive redesign
In January 2021, one of the leading e-commerce eyewear platforms in Europe, contacted me to redesign Linsenpate.de, one of their contact lenses e-commerce shop.
Working directly with their team, my goal was to merge Linsenpate’s old brand with the Shopify-based Information Architecture of Lensit.no, and a contemporary UI twist.
Within 12 days I had completed pixel-perfect wireframes of an entire e-commerce shop, as well a design system and emails and newsletters for the marketing department.
Check out Linsenpate’s transformation further down the page.
The Challenge
How can I...
- 01
-
Keep the same brand feeling with a new UI and Information Architecture?
- 02
-
Help users to easily find what they are looking for, despite the new UI and IA?
- 03
-
Adapt the IA of lensit.no to the german market?
- 04
-
Introduce Italian in a German website, so that it’s understood and yet feels authentic?
About Der Linsenpate
Linsenpate is a German e-commerce website for contact lenses and related products. It stands out for its name and story behind the Patenfamilie, which gives the brand charm and creates curiosity. They keep low prices, fast deliveries and safe shopping. From 2021, they also offer a contemporary UI and a user friendly UX.
My Role
UI Designer
UX Writer
Tools
Figma
Photoshop
Goal
To redesign linsenpate.de while:
Keeping the brand and website feeling
Using the website structure of lensit.no
Adapting the website structure to the german market
Adapting the check-out-flow to shopify
Merging German with Italian, to keep the story behind the brand
The Process
After a short introduction by the Product of Ecommerce, I began exploring the existing website, linsenpate.de, and the IA reference website, lensit.no. A few days after I was given access to the design material of Lensit and I learned about the design patterns used.
Since I had such a good reference, I only needed to apply an aesthetic UI to the structure provided. With a mobile-first approach, I created 4 different high-fidelity designs for mobile and desktop.
At the end of every working day, I would send an Email to the Product Owner highlighting what I had achieved and my questions. It was useful so that in our daily 30-minute standup we could resolve doubts and make decisions quickly. During these meetings, I was given a lot of research insights that supported my decisions and helped me adapt the product to the German market. After the screens were designed, we would receive feedback from the Marketing Department and adapt according to their needs.
The second phase was creating the emails and marketing newsletters. Taking their main's e-commerce platform email content as a reference, which had already been extensively tested and optimized, I applied the new UI to them. I also used my language skills to emphasize the brand, by introducing Italian words in a way that could be understood by Germans.
Finally, I proceeded to put together a design system and a components page for the other designers in the team to use as a reference in the future.
Design System
Here's a small sample of some of the pieces of the design system.
The complete design system contanined: colors, typography, shadows & elevations, buttons, notifications, icons, images, components grouped in categories (menus, footers, banners, products, etc), and grids for mobile and desktop.
Colors
Elevations and Shadows
In the case of a dark themed design, the elevation is produced by the amount of white that the background has, that’s why we have so many shades of grey as colors. However, all of these boxes/cards, can be even more elevated with a black shadow, like the one here as example, with a black shadow.
Read more here: Dark Theme by Material Design
Typography
Email Headers
Email H1 | Desktop
Karla Bold
font-size: 72px
line-height: 83px
Email H1 | Mobile
Karla Bold
font-size: 54px
line-height: 63px
Email H2 | Desktop
Karla Bold
font-size: 50px
line-height: 58px
Email H2 | Mobile
Karla Bold
font-size: 42px
line-height: 49px
Email H3 | Desktop
Karla Bold
font-size: 44px
line-height: 51px
Email H3 | Mobile
Karla Bold
font-size: 50px
line-height: 58px
Headers
H1
Karla Bold
font-size: 34px
line-height: 40px
letter-spacing: 0.6px
H2
Karla Bold
font-size: 26px
line-height: 35px
letter-spacing: 0.6px
H3
Karla Bold
font-size: 22px
line-height: 28px
letter-spacing: 0.6px
H4
Karla Bold
font-size: 20px
line-height: 24px
letter-spacing: 0.6px
H5
Karla Bold
font-size: 18px
line-height: 22px
letter-spacing: 0.6px
H6
Karla Bold
font-size: 16px
line-height: 20px
letter-spacing: 0.6px
H7
Karla Bold
font-size: 14px
line-height: 18px
letter-spacing: 0.6px
Body
Body XL Link
Karla Bold Underlined
font-size: 20px
line-height: 28px
letter-spacing: 0.6px
Body XL
Karla Bold
font-size: 20px
line-height: 28px
letter-spacing: 0.6px
Body L
Karla Bold
font-size: 18px
line-height: 26px
letter-spacing: 0.6px
Body M
Karla Bold
font-size: 16px
line-height: 22px
letter-spacing: 0.6px
Body M Link
Karla Bold Underlined
font-size: 16px
line-height: 22px
letter-spacing: 0.6px
Body S
Karla Bold
font-size: 14px
line-height: 18px
letter-spacing: 0.6px
Body S Link
Karla Bold Underlined
font-size: 14px
line-height: 18px
letter-spacing: 0.6px
Label
Label
Karla Regular
font-size: 12px
line-height: 18px
letter-spacing: 0.3px
Label Bold
Karla Bold
font-size: 12px
line-height: 18px
letter-spacing: 0.3px
Label Caps
Karla Bold Capitalized
font-size: 12px
line-height: 18px
letter-spacing: 0.3px