Belysningsdesign_thumbnail_1180x757_190130.png

Belysningsdesign - E-commerce, Design system

Belysningsdesign - E-commerse and Design System

Mockup_belysningsdesign.png

Summary

When: March 2018
Where: School (Yrgo)
Software: Sketch
Duration: 1 week

The task

For this school project me and 2 classmates partnered up with Wipcore. We were tasked with creating a design system for E-commerce. At the time of creating the design system we did not know what companies products we would populate it with.

 

In the second half of the project, Wipcore assigned us to populate the design system with belysningsdesign.se's outlet products and to design for an archetype user called “Bargain Fanny”.

 

Landingpage This is our adaptation of belysningsdesign’s original landing page. We have added three places to navigate to our outlet, trying to keep a balance between advertising the outlet yet also keeping customers shopping for full-priced products. The outlet can be reached through the outlet button in the top menu, the “up to 70% off banner” and the red “to the outlet” button.

Landingpage
This is our adaptation of belysningsdesign’s original landing page. We have added three places to navigate to our outlet, trying to keep a balance between advertising the outlet yet also keeping customers shopping for full-priced products. The outlet can be reached through the outlet button in the top menu, the “up to 70% off banner” and the red “to the outlet” button.

 
Product overview This page showcases a range of different lamps, sorted by category in the same manner as belysningsdesign.se. The outlet-price is highlighted in red.

Product overview
This page showcases a range of different lamps, sorted by category in the same manner as belysningsdesign.se. The outlet-price is highlighted in red.

 

The process

We started the project by analyzing online stores like H&M and Ebay, looking for general solutions for e-commerce. With these solutions as references we created our general design system. When we were assigned belysningsdesign.se, we created journey maps - both exploring how we envision that we would go about achieving certain tasks and how we think “Bargain Fanny” would do it.

 
Product overview with mini cart The mini cart gives a quick overview of what’s in the cart and the current price of all the products.

Product overview with mini cart
The mini cart gives a quick overview of what’s in the cart and the current price of all the products.

 

The design

Our focus was on crafting a design similar to belysningsdesign’s original look, as our outlet would be a subsection of their main e-commerce page. Our goal was to create a minimalist and understandable design whilst encouraging shopping.

We highlight the new low prices while keeping the original price greyed out but visible to signal how great a deal a product is. With “Bargain Fanny” in mind, we added features to make it easy for customers to compare similar products, other products by the same designer and to quickly see the light temperature of a lamp to help her understand the products better. “Bargain Fanny” knows how to find the right product at the lowest price online, and we want her to feel enabled to do this within the boundaries of belysningsdesign.se.

 
Product detail This page displays all the information for a chosen product. It includes among other an image gallery of the product, stock keeping units, a symbol indicating the light temperature and dropdown for choosing size.

Product detail
This page displays all the information for a chosen product. It includes among other an image gallery of the product, stock keeping units, a symbol indicating the light temperature and dropdown for choosing size.

 
Cart All items in the cart are listed here. The shopping summary to the right includes a function for adding gift card codes and the total cost.

Cart
All items in the cart are listed here. The shopping summary to the right includes a function for adding gift card codes and the total cost.

 
Order complete The order complete screen gives some basic information and also informs the customer that they will get all the details through email. We want the customer to feel safe and accomplished with their purchase here. We included a function that lets the costumer ad another product to the same order, if done so within two hours. This encourages the customer to keep looking for more products they might like.

Order complete
The order complete screen gives some basic information and also informs the customer that they will get all the details through email. We want the customer to feel safe and accomplished with their purchase here. We included a function that lets the costumer ad another product to the same order, if done so within two hours. This encourages the customer to keep looking for more products they might like.