57 Kvadrat

GUI Project

57KVADRAT.png

57Kvadrat is a fictional interior design website. Here you will find home decoration and furniture of Nordic minimalist design. The Eco Collection consists of recycled materials.

Group 767.png
concept

Project overview

Solo: Me

Duration: 3 days

Date: March 2021

The brief

57Kvadrat is a fictional interior design website. Here you will find home decoration and furniture of Nordic minimalist design. The Eco Collection consists of environmentally friendly and recycled materials.

 

The task is to design a clickable web shop in Figma. The website should include a:

Product overview + product filter.

Product view.

Shopping cart view.

Payment feedback view.

Tools

Group 664.png

Figma

Group 681.png

Photoshop

Group 683.png

iMovie

04:03 Min

Demo

 

UI

Style guide

 

Grid - Desktop

Skärmavbild 2021-08-06 kl. 14.02.13.png

Full width: 1440x1024px 

Count: 12

Margin: 120

Gutter width: 30

Colour

Primary colours

Text colours

Background colour

Typography

H1

Group 763.png

H2

Group 764.png

H3

Open sans Regular - 24.png

H4

Open sans regular - 21.png

H5

OPEN SANS BOLD- 18.png
Open sans Regular - 22.png

Body1

Body2

Button

Primary

Help button

Group 106.png

Primary disabled

Primary hoover

Delete filter button

Group 759.png

Icon

Group 761.png

Logo icon

57KVADRAT.png

Navigation

Main menu with signpost

Group 103.png

Top/bottom buttons

Group 752.png

Shortcut button

Till produkt knapp.png

Breadcrumb

Group 747.png

Selection - entry - list control

Check box

Group 754.png

Radio button

Group 755.png

Stepper

Group 19.png

Drop-down menu

Group 756.png

Slider

Group 742.png

Modeless feedback

Shopping cart

Group 746.png

New items in the cart

Group 94.png

Tooltip

1-1.png
1.png
1-2.png

Website pages

  • A fixed menu so that the user does not get lost in the navigation.

  • The page is arranged in a hierarchical order (news, popular categories and seasonal products). 

  • The products move when you hover to show that they are interactive.

Homepage

 

Shopping process

Product overview

  • Signpost in the menu and a breadcrumb so that the user does not get lost in the navigation.

  • Overview of all products mixed. 

  • Categories in a row, to reduce the number of clicks and optimize the user flow. 

  • Filter (price range, colour, brand, and sort by).

 

Adding products

  • Add products directly to the shopping cart. 

  • Pop-up feedback when products add to the shopping cart. 

 

Product view

  • View a product from different angles.

  • Tooltips describing colours.

  • Enter the number of products you want to order with the stepper.

  • Product description.

  • See products you recently visited.

  • See products you will probably like.

  • An inspiration board that takes you directly to the products by the shortcut buttons.

  • Eco collection containing recycled product.

  • Navigation buttons that take us to the top of the page. 

 

Shopping cart

  • Overview of products you have added 

  • Remove or add more products.

  • Save your login details

  • Log in as a guest.

  • Choose payment and delivery method.

 

Payment feedback

  • Confirmation when the payment is successful by saying thank you for the purchase.

Feedback.png
 

Website overview

 

1.Homepage

4.Product view

2.Product overview

3.Adding products

5.Shopping cart

6.Payment feedback

Feedback
ruby.png

Thanks for the visit...and the scrolling!