CLIENT

Noiir Squared London (luxury home decor start up)

ROLE

UI & UX Designer

TIMELINE

2 weeks (Launch date: 31st May 2021)

TOOLBOX

WIX, Sketch

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.

About

20959125.jpg

Research

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

Planning

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

r.jpg
177.jpg
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:

Sketching

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:

Create

After putting all of my design decisions together, I set up the SEO search engine for NOIIR SQUARED LONDON in order for it to be searchable on Google. I also set up the shipping, payments system and created some social media content for the founder to use on the launch day. 
 
MOODBOARD
noiir moodboard.png
TYPOGRAPHY

Header 1

Lulo Clean, 40px
Header 2
Lulo Clean, 36px

Subtitle 1

Questral, 25px

Body 1

Questral, 18px

BUTTONS

Questral, 20px
COLOURS

HEX:#000000

R:0 G:0 B:0 

HEX:#FFFFFF

R:255 G:255 B:255

ICONOGRAPHY
Screenshot 2021-05-31 at 18.12.47.png

Shopping Basket

LOGO
White big logo.png
black logo png.png

ACTIVE BUTTON

HEX:#000000

INACTIVE BUTTON

HEX:#909090

Screenshot 2021-05-31 at 18.12.47.png

Member  Account

UI ELEMENTS
BUTTONS
CONTACT FORM
Screenshot 2021-06-01 at 07.36.56.png
FILTER
Screenshot 2021-06-01 at 07.36.09.png
INSTAGRAM FEED
Screenshot 2021-06-01 at 07.35.49.png
SUBSCRIPTION FORM
Screenshot 2021-06-01 at 07.35.56.png
HERO SLIDER LANDING
Screenshot 2021-06-01 at 07.37.12.png
PRODUCT SLIDER
Screenshot 2021-06-01 at 07.36.39.png
PRODUCT CARD
Screenshot 2021-06-01 at 07.36.18.png
CATEGORY CARD
Screenshot 2021-06-01 at 07.35.38.png
168.jpg

Takeaways

PROJECT LEARNINGS & TAKEAWAYS
One of the challenges in this project was trying not to look similar to other existing home decor websites and standing out from the competition with minimal products. As the business is a start up, there was only a handful of products that could be displayed and advertised. However I have learned how to showcase the products without repeating them and displaying them in an attractive way by including quotes and customer images that fall in line with the business's ideals.  

I have spoken to the founder who is planning to release more products this year from which she can supply me with more images and client feedback so I can include a customer reviews page on the site.