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.

Setting Design by Júlia Marí Bernaus

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?

Linsenpate Design by Júlia Marí Bernaus

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.

Linsepate Design by Júlia Marí Bernaus
Linsepate Design by Júlia Marí Bernaus
Linsepate Design by Júlia Marí Bernaus
Linsepate Design by Júlia Marí Bernaus

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

Linsepate Design by Júlia Marí Bernaus Linsepate Design by Júlia Marí Bernaus Linsepate Design by Júlia Marí Bernaus Linsepate Design by Júlia Marí Bernaus
Linsepate Design by Júlia Marí Bernaus Linsepate Design by Júlia Marí Bernaus Linsepate Design by Júlia Marí Bernaus Linsepate Design by Júlia Marí Bernaus Linsepate Design by Júlia Marí Bernaus
Linsepate Design by Júlia Marí Bernaus Linsepate Design by Júlia Marí Bernaus Linsepate Design by Júlia Marí Bernaus Linsepate Design by Júlia Marí Bernaus Linsepate Design by Júlia Marí Bernaus
Linsepate Design by Júlia Marí Bernaus Linsepate Design by Júlia Marí Bernaus

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

Linsenpate Design by Júlia Marí Bernaus

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

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

Body S

Karla Bold
font-size: 14px
line-height: 18px
letter-spacing: 0.6px

Body S Link

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

Icons & Logos

Linsepate Design by Júlia Marí Bernaus

Buttons

Linsepate Design by Júlia Marí Bernaus
Back to top