UX / UI Design of Hverdag
The new shop Hverdag are a combination of Group Buy´s different shops Pluus, garnplus and Buuks. The shop should contain all of the 500.000 different products and show the diversity and width of the shop.
Task – Show the width of the shop on the landing and upsell products from different departments of the shop.
In order to show the width of the shop I decided to use a grid based layout. This makes updating of content easy and at the same time the layout allows to expose more content at a relatively small space. I have based the design on the bootstrap layout. I have used an iterative process in collaboration with the CEO & the Partner of Group Buy to finish the design.
The caveat are visual confusion and requires strict control of the Colors as the landing page quickly could become messy with too many colours screaming for attention. I have solved this by removing the background colors of the products and replace them with a grey nuance or no color at all. This makes the user focus on the product instead of the color.
I have kept the section header text in the same playful character of the Hverdag Logo and have decided to use white for the font color. This provides the overall impression of the design as an visually easy landing to decode with the absence of Colors and a cool impression with the combination of the grey background and the bold white fonts.
The product page should contain many different functions & elements. I have combined and made some of these elements expandable in order to calm the interface from visual clutter for the user.
It was important that the user should be exposed to other products in the section after the product presentation, just like in supermarkets. The user are exposed to two categories; Similar Products and Popular Products in the section after the product page in order to up-sell other products.
The user are taken from the product page to the basket. The basket are still a part of the site. When pressed Finsh Purchase(Afslut Køb) the user are taken to the check out portal. Firstly the user are validated with an E-Mail, if the user are not in the system they are taken to a create user page to type in their info. The payment portal are external.
On the middlepages it was important that the users quickly could navigate to the part of the department they wanted, without using the top menu. So to solve this problem I have created a mini menu to the left of the products, this menu are sticky and will update the products on the right on click.
The header should be kept in the grey color to make the product stand out. It is a carousel, so offers and other content can be exposted to the user.
It was important that the line of products are broken with current offers and products from other departments that are relevant for the user to see.
Rolloutplan on Facebook
The idea are to take the grey divider bar in the Facebook feed and incorporate this in the small ad. This gives the impression of the graphics breaking the users elements and “come out” of the screen.
When the Hverdag site are launched, a series of tv commercials are produced to be aired to create awareness of the new site. I created a marketing campaign aimed for Facebook with the Lego products in order to position the shop as more high-end. The videos are edited from current content from lego commercials.