loader image
resume

Modernie

Modernie - UX Designer case study

As an E-commerce store that sells affordable high-end modern furniture, this was a self-imposed project I worked on and my role as a ux/ui designer was to design an online platform for the home page, contact page, product page, and single product page. First, I did the competitive analysis and ideating, then designed the final visual design.

Year

2021

Client Name

Modernie

Role

UX Designer | UI Designer

Modernie

E-commerce store that sells affordable high-end modern furniture

Project Process
Description

In this section, I will be giving a description of the process and show all the steps are taken in creating this design for Modernie, from researching, ideating, to wireframing for both low and high fidelity.

The Objective

Creating an e-commerce store for people to browse and purchase modern home furniture like living room, kitchen, bedroom, and dining furniture. It offers the possibility for purchasing family-type furniture and different type of home furniture as well as proving home delivery and the ability to select a price range and different types of colors, materials, and shapes.

Competitor Analysis

To start off the design process I did a competitor analysis to find out the criteria that are important for people when they are looking for home furniture. Also, to see how E-commerce website design can help them with finding their perfect home furniture. In this case, Habitat and Amazon were the two competitors I used in analyzing the criteria. The two sites have different landing pages, both provide delivery options, suggest inspirational ideas to users, this helps people to be able to find the proper furniture for their homes. Both Habibat and Amazon allow users to search through the products, this gives people the chance to find what they are looking for easily.

Below are the images from the competitive analysis.

Final Design –
High Fidelity

For this design, the focus was on designing the home page, category page (living room), single product page, and contact page. This section shows the design from accessing the home page, clicking the product category page (Living Room), to accessing the single product page.

Extra detail to home page

The design includes four products category pages (living room, bedroom. kitchen & dining) for easy accessibility. On the home page, the hero section includes a slider to showcase the different types of furniture. In addition, new collections, inspirational ideas, and a clearance deal section are included on the page. Detailed development is shown below.

Hero Section
Modernie hero slider section
Modernie hero slider section
Modernie hero slider section
Modernie hero slider section
Modernie hero slider section
Modernie hero slider section
Clearance Section
Clearance Section
Footer section
Footer section

Living Room Sofa Category and Single Product page

Living Room - Sofa Category Page
Living Room – Sofa Category Page
Single Product Page
Single Product Page

Product Zoom

This section shows the product image display upon clicking the zoom(magnifier) icon

Single product Zoom
Single product Zoom

Mobile version for modernie store

Here are the details for the mobile version for Modernie. The idea was to keep it simple and provide both the desktop and mobile version for the user as these are the devices the user mostly use based on the user research done for this project.

Section from mobile version

Mobile Version for the Pages

Final section is the contact page

Modernie Contact Page
Modernie Contact Page

Video of Mobile version

Project Timeline

1 Week – Research
2 Week – Ideate
3 Week – Wireframing/Prototyping