Client & task

Year

2018

Location

London 

Lumene is a Finnish manufacturer of cosmetics, based in Kauklahti, Espoo. Lumene products are developed and manufactured in Finland. The company's key markets are Finland, Scandinavia, USA, and Russia. 

  1. To re-platform Lumene's existing website to a functional e-commerce site in 6 weeks

  2. Translate the new packing designs through to digital & light branding work

Shape 1.png

Previously customers could not purchase through the site, so this was an important project to ensure the checkout and purchase journey was functional and visually pleasing. I was the lead UI designer on this project. This involved workshops with the client and the build team in order to meet the brand's needs. As the brand was becoming more established and expanding its key markets, we ensured that it launched with a consistent brand identity. The site had three language settings so we had to ensure the designs worked in English, Finnish, and Russian. We worked with the print brand team to inject elements of the new packaging into the site and made sure each pattern linked to a specific collection.

The solution

The process

Step 1 - exploration

The first step with Lumene was to create mood boards with different routes and share them with the client. It was important to inject the new packaging patterns, watercolors, and textures to digital where possible. The client picked the muted watercolor route with accent and textures. The next task was to translate this to digital without compromising accessibility. 

Lumene exploration@2x.png

Step 2 - UI key pages Category landing & Product page

We applied the watercolour from the packaging to each of the collections subtlety in the hero of the collection page.

 

The product info was designed to be simple and easy to understand and see all the information needed to purchase. Images of the product were designed to be large and the focus of the user.

CBP Nordic Detox [Sisu]-Finnish Copy@2x.
PDP (mobile) default state@2x.png

UI Mobile - Homepage

The homepage had a big focus on having modules that the content team can use for promotional messages. They wanted to push the blog content as well as the newly available products to purchase. We designed these modules to be easily customisable for the content team as they will be frequently updated.

 

It was important to test the messaging in Finnish and Russian as well as English due to the key markets the product is sold in. 

Lumene mobile homepage@2x.png

Desktop Category landing page

The category landing page was designed with vast white space and a focus on the product imagery and copy. 

The product photography allowed the site to have a simplistic yet appealing look and feel. 

Lumene Macbook air mockup CBP @2x.png

Desktop quick view

The quick view is available on the hover of the product on desktop and allows the user to buy now without disturbing the user journey. 

The page allows you to get an overview of the important info with product images at the focus once again. 

Desktop Product page

The product page has lots of shade varieties due to the nature of the products that are selected on hover. The core info is laid out with the name, price, and image in focus.

 

The brand logo is used in the background, injected some of the packaging subtlety to digital. 

Lumene Macbook air mockup CBP Popup@1x.p
Lumene Macbook product info@2x.png