E-Commerce - Maynooth, Online Furniture Store

E-Commerce - Maynooth, Online Furniture Store - student project

This project gathers my different assignments for the UX/UI course using Adobe XD.

We were provided with:

- a brief from the client, Maynooth

- a persona, meaning the type of client we are building the e-shop for 

Assignment #1 - Wireframing

Wireframes are used to validate the structure of a digital product with the end client (or the sponsor). 

In this assignment, we were asked to create a wireframe for the e-shop. The wireframe, so far, is made of two pages: a home page, and a contact page. On Adobe XD, these pages are called "Artboards". 

The client is an online furniture store based in Ireland. They specialize in high-end, yet affordable furniture. 

Their dream clients are style-conscious men and women who are active professionally and have a disposable income dedicated to making their home better. 

The home page includes a hero section with a slider, to display different styles. I've taken the creative choice to add some call to action, and 3 categories directing to specific pages: Living Room, Bedroom, and Kitchen+Dining. 

The home page then is made of new pieces available, inspiration, and clearance deal. There is a header to ease navigation and a footer for important information. 

E-Commerce - Maynooth, Online Furniture Store - image 1 - student project

 

E-Commerce - Maynooth, Online Furniture Store - image 2 - student project

I tried to refrain from adding details, colors, fonts, and copy.

While we might get carried away by our creativity, it's important to keep it simple so that the client stays focused on the structure of the product, and not the details.

2 questions to ask the sponsors of Maynooth would be: 

- Is there any feature missing from the e-shop?

- Does the structure of the pages match what they had in mind?

 

Assignment #2 - Prototyping

Once the wireframes have been approved by the client, we can move on to prototyping.

 

At that stage, we still have a low fidelity version of our potential product. In the future, we'll fully design it through what is called a high fidelity prototype. 

Before doing this, we need to connect the different artboards together. We will create links between different elements and pages. For example, when clicking on "Contact", I will get directed towards the "contact" page.

E-Commerce - Maynooth, Online Furniture Store - image 3 - student project

 

This is such an exciting process, it feels like the product is coming to life!