Concept for an e-commerce website

Home > Projects > Concept for an e-commerce website

Courses:
Udemy and Google UX courses

When:
Jan - May 2022

During my time working freelance in digital marketing and social media management, my work began to include aspects of UX and UI design. I decided to formalise and develop my skills through UX Design online courses on Udemy and Google via Coursera.

Below is a project from my courses, created on Adobe XD.

Maynooth:

Summary: Designing a commerce website for Maynooth Furniture with the aim to increase engagement. Working across all aspects of design including content, UI and UX design.

Outcomes: I used Adobe XD to create:

  • high-fidelity landing page and catalogue pages for the Maynooth website

  • micro animations for sign up / log in pages for the Maynooth app

Mock up landing page of a furniture company
Mock up landing page of a furniture company
Mock up product page of a furniture company
Mock up product page of a furniture company

Mobile view of the website

Mobile view of the website

Micro-animation for the app

Mock up landing page of a furniture company
Mock up landing page of a furniture company
Mock up product page of a furniture company
Mock up product page of a furniture company
My process:

The brief was to design an e-commerce website for people to browse & purchase furniture for home delivery. The target user is older, with a high paying job and happy to spend more on quality modern furniture.

I conducted market research through a competitive audit into peer furniture companies such as made.com and cultfurniture.com to compare the user experience of each competitor’s website. The research revealed that successful e-commerce websites are responsive with user-friendly navigation and high quality product details. Users should be able to use the website at their convenience.

Background
and research:

Part of the prep for the high-fidelity prototypes was sketching out the user journey in a storyboard and sketching possible layouts for pages.

These sketches became wireframes on Adobe XD and the connection between pages tested to made sure the flow was accurately depicting the journey in the storyboard.

I chose a repeat grid for displaying the products because it’s common in similar websites and as Jakob’s law of UX states - “Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.”

I also experimented with micro animations for the ‘sign in’ journey of the app in order to practice and experiment with the flow of a prototype and how they mimic real products.

Paper folded into 8 sections. A drawing of different stages of the user journey in each section..
Paper folded into 8 sections. A drawing of different stages of the user journey in each section..

Sketching the user journey

User persona with an illustration of a person and information on who they are and what they need.
User persona with an illustration of a person and information on who they are and what they need.

Creating a persona

Desktop view of the website landing page

Desktop view of the website product page

Say hello!