PROJECT
Responsive Website
​
CLIENT
Noiir Squared London (luxury home decor start up)
​
GOAL
Design a responsive e-commerce website that was sleek, modern and minimalistic, giving off a luxury feel. Founder wanted the website to contain products to be sold, a gallery of in public interiors as well as payments/shipping system.

COMPETITOR RESEARCH
To understand what needs to be delivered for a home decor website, I've carried out extensive competitor research on what other home decor websites look like and what they had in common. I also wanted to get some inspiration on how I wanted to portray Noiir Squared London to give it a luxury feel.
The following common features in the below competitors websites:
-
The use of white space
-
Sans serif fonts consistently, occasional decorative font as a title
-
The use of the colour black and white, to represent sleek, modern and give luxury feel
-
Not too colourful, lets colours of interiors/homeware speak for itself
-
Square displays for layouts of products and rectangular buttons used throughout
​
Competitors: www.stevensonshome.co.uk, www.luxdeco.com, www.houseology.com, www.livertylondon.com, www.tobiasoliverinterior.com
USER STORIES
With inspiration for Noiir Squared London in mind, I began to structure out the necessary screens needed for potential customers in a User Flow using the following User Stories:
​
As a customer, I...
​
-
Want to be able to browse various products the company sells that are organised by different categories.
-
Want to view the product that I have select and see the details (sizes and colours available, material, etc.).
-
Want to view the latest collections from Noir
-
Want to add selected products to my basket and view them.
-
Want to be able to visit the gallery to see what Noiir's products look like in different interiors
-
Want to view the returns & refunds policy as well as shipping information


LOW & MID-FIDELITY WIREFRAMES
Now that I had established the information architecture of the app, I was ready to sketch the low-fidelity wireframes by hand and turn them into black and white mid-fidelity wireframes using Sketch using the mobile-first approach:
HIGH FIDELITY WIREFRAMES & STYLE GUIDE
To create the high-fidelity wireframes, I needed to made a decision on: the visual design principles/trends, colours, imagery, typography, shapes & icons.
​
I first created a mood board which is a collection of luxury home decor/interior inspiration and design pieces that established NOIIR's mood. The founder wanted a clean and minimal yet stylish design so I wanted to remain consistent with the colours black and white. TI made the following design decisions:
