Motor (Website & Web App)

I was appointed to work on the UX and UI for a new motor company that sells vehicles of all sorts. The process was to create a user friendly website that allowed customers to search with ease as well as allows car traders to be able to manage sales and part exchanges via a web app.

Project Goals

The goal of the website was to create a product that easily allowed anyone to be able to search and find a vehicle of their choosing. The UX/UI process was to create a simple and clear interface, so that not only can the everyday user finds what they want (whether it’s a new vehicle or they are selling a vehicle) but your car fanatics and traders could also use the website to find specific vehicles of their choosing.

Process For UX

– Research into what the everyday user to a car fanatic is wanting out of a car promoting/selling website.
– Creation of a website sitemap.
– Creation of a full user flow and user journey.
– Lean Canvas for the problems the website could face, key metrics, solutions, channels for promoting and customer demographics.
– Creation of wireframes for the websites initial pages.
– Prototyping of the search functionality process for the user and developers.

Process For UI

– Keeping the website, brand and identity consistent.
– Making sure there is a primary action throughout the process of each main section.
– Making sure the hierarchy of importance is put in place (this was based on both the design, the sections we wanted to market and SEO).

Colour Scheme

Here is a colour scheme that was created for the brand and website:

Interface Design – Website

Once the initial wireframes had been decided upon and the design vision was narrowed, I then took to recreating the wireframes within Sketchapp to design the UI elements for the website layouts with UX in mind.

Here are some examples of the designs created for the websites UI:

Interface Design – Web App

As part of the website a web app was required, so that users and traders could communicate between each other and sell/exchange vehicles.

Here are some examples of the designs created for the web apps UI: