top of page
Research target user & market
User interviews
Understanding the problem
Learn
Defining the problem
Possible Solutions
User Personas
User Stories
User Flow's
Define
Lo-fi Sketches
Wireframes
Mood Board
Re-brand
Design
Hi -Fi Mockups
Skelton Build
Screens Design
Web Development
Build
Prototype Testing
Screen Testing
Final Programing
Bring to Life
My Design Process
The Design Process
After extensive research on the car collection topic and may hours of interviews I started narrowing the possible designs and flows. As it turned out the owner (Primo) ended up being an integral part of the project and proved to be an asset in the design process. His ‘hands on’ approach and ‘can do’ attitude along with countless cups of coffee proved to be an asset to the project.
The design processes - UI Design
In this project I used user-centered design approach and focused on a very simple, intuitive and fun UI design.
!
Since the owner had a large collection of vehicles, I needed to find a way to display sort and search UI that is friendly with a simple design that can be used on multiple devices. The back end needs to include an extension for the owner, who is not very tech savvy that will allow him to edit pictures and text on the website in real time without sacrificing the design and look of the pages.
The problem
The Solution
To help display the collection a CMS system that is user friendly with a simple UI and design elements. As the owner own quote “I want to let the picture speak, and add a little info to it” he wanted a very simple look and a very focused attention was given to the site responsiveness.
*
User Stories
Buying a car or a motorcycle is an exciting, emotional and a little complicated experience for car collectors who want to find vintage cars or motorcycles in pristine condition. Therefore the design and each of the features was designed to be simple and intuitive.
-
As a user, I want to search for cars/motorcycles without filling information and numbers
-
As a user, I need to see as many pictures as possible and videos about the car so I can easily assess the cars condition.
-
As a user, I want a quick and easy way to contact the individual that owns the car to learn more about the car and its past.
-
As a user, I need to know the real and up to date price of the car so I can determine if it is within my budget.
-
As a user, I need to know the physical location of the car so I can decide the best way to transport the vehicle to my location.
-
As a user, I need to know that I am dealing with a reputable and legitimate business.
Sketches and wire frames
Next to the idea step, I started sketching low fidelity screens with pencil and paper to help me visualize and demonstrate my early thinking and ideas to the customer. keeping the flow and design as simple as possible as requested by the customer.
Mid Fidelity Wireframes
After my rapid sketching, I started to think about the UI elements and spacing in given screen. I chose a 3 and 4 columns grids for the main screens and created mid fidelity screens on which I organized the hierarchy between the UI elements.
Colors
After I got the the core web site and main pages designed, I had another interview with the owner to show him the site layout as I designed it and learn more about his vision for colors and other design elements that he think needs to be included in the final design. I learned that the owner, other than being a car collector is an avid car racer who often competes on the national circuits and maintain several race cars for his use. he asked if I can incorporate some of the racing elements into the site design with racing stripes being the main ask. the owner also asked if I could redesign his old logo.
Selected Colors
When it came to colors the owner had already decided: " the colors can be Red White and Blue or Red White and Blue, like our flag.. I don't really care for any other colors...." great! makes my job easier...
Typography
I Chose Helvetica as the main typography for the site for it's simplicity and ease of reading. as a secondary font I chose Times New Roman to be able to accentuate some parts of the website and text.
Mood board
I created a mood board to get some inspersions for color, typography, imagery and general feel for the site.
Logo Re-Design
I designed a logo board with the client given guide lines in mind. the board was designed to give the client few options to choose from.
the colors and all of the design elements were carefully incorporated into the final design as requested by the client.
