About my project
Brooks Auto Center is a car dealership store located in Ontario, LA. It offers great deals on various kinds of used cars. This dealership is extremely popular for its great deals and high quality sales and services.
Before the Revamp
Where I started from (as of August 2020)
While Brooks Auto Center Inc has a website, it is not as user friendly as it could be for several reasons. The site is not responsive. It also does not make good use of whitespace, has an inconsistent layout and coloring scheme. Finally, there is a large amount of cluttered text on the site.
Persona Hypothesis
Who might use this product?
Based on my research and personal experience, the types of customer's most likely to visit this store can be represented by the following persona:
Regular customer (Primary) are customers who are looking to buy a car that suit their requirements, they are willing to try new dealerships.
User Interviews
To validate my personas, I structured my questions to get an idea of the typical customers habits and behaviors to evaluate where they stood(if at all) on my persona hypothesis spectrum.
1. How often do you replace cars ?
2. Do you have a clear requirement of what type of car to buy before visiting the dealership?
3. Have you ever tried to schedule a test drive for a particular car from the website?
4. Will the car photos and details on the website be a factor in choosing the dealer?
5. What kind of after-sales service do you expect while buying a car from a dealership?
6. What details do you care about the most while buying a car from a dealership?
Since my interviews were done in person, I took notes by hand.
Primary Persona
User Stories
From the interviews, I learned that there are several things a user of the website might want to accomplish. Here are some things that have been mentioned by multiple users:
User Stories
Feature List
Based on the goal-directed context user scenario, user stories, and user cases, the website need these features below as the most important ones.
Feature List
SiteMap
After collecting my user data, I started to think about the layout of the website. The sitemap represents the number of templates that would need to be created rather than the specific content for each page. I wanted the user to be able to finish the task quickly and ensure that the steps look intuitive and obvious to the user. The sitemap below was my final version that underwent several revisions.
Overview of the sitemap for the new website.
Creating the Design
Tools: Sketch & Adobe XD
I initially used Sketch however, I did not find the interface to be intuitive and the support on community forums was less. So I switched to Adobe XD for designing as well as prototyping and found it to be much better.
1.0 Sketch 2.0 Adobe XD
Wireframes
Desktop
For the first version of my wireframes, I wanted to incorporate all my design ideas so I created each wireframe from scratch using Sketch. The wireframes provide us with a preliminary idea as to how the website will look. I only used white and gray for this first version so I could focus more on the design and not worry about the color palette. Wireframes below are my final versions.
Desktop wireframes for the new website.
Adding Visual Design
After the desktop wireframes, I worked on the responsive mobile versions where I added visual design and content.
When it came to visual design, I started with the logo since the current one was rather outdated and low quality. I used an online logo maker to quickly draw up a new one.
For colors, I used the color palette below to ensure consistency throughout all the pages.
Color palette
Using this new color palette and logo along with new visual design elements brought the wireframes to life.
Responsive Mobile Wireframes
Prototype
Adding movement to the design using AdobeXD
Once I had created my wireframes and mockups, I needed to link the pages together to create an experience similar to that of a mobile website. My first prototype was done using Adobe XD, this program is good because it allow us to replicate the look and feel of actual website . A complete version of my prototype can be found here.
Below is a screenshot of my prototyping process in Adobe XD
Screenshot of prototype links between screens on AdobeXD
Here is some of the animations I was able to create on AdobeXD.
Usability Testing
Research Plan
With the completed prototype, I moved on to usability testing to identify any pain points, problems, or confusion that the users had while interacting with it. To do so, I created a research plan that outlined the assumptions and goal of the test, basic questions that established who the participant was, and tasks that the participant needed to accomplish
Goals + Assumptions
1. Users will be able to tell from the home page that this is a site for buying cars .
2. Users will be able to browse a variety of cars.
3. Users will be able to buy car online.
4. Users will be able to make an appointment.
Tasks
1. Explore the homepage.
2. You are looking to buy a car . Browse the options on this site.
3. You want to request a car for test drive at your home.
4. You want to buy a car and make payment online. Browse that option.
Result
I used UserZoom Validately to conduct usability testing with 5 participants.
Highlight Reel
Findings
The test results provided great insight into how usable my prototype was:
1. 100% of participants skimmed through the page, and explored the menu bar to access
functionality offered by the website.
2. 100% of participants found the navigation clear and easy to use, so I’m not going to change the navigation menu.
3. 100% of participants found the process of buying a car online as simple and clear.
4. 100% of participants feel the process of making an appointment is intuitive and easy.
5. 25% of participants went to “Social media options ” available on Footer, so I will add links of "Social media” in the Footer to make it more it more accessible.
Improvements
I made improvements based on feedback as discussed above.
Closing Thoughts
The entire process of website redesign was an enriching experience of implementing design principles along with continuous user feedback to validate the prototype. I want to give many thanks to my professor, TA, and friends for their input. Their comments and feedback were critical in helping me refine these ideas.
You can view my final prototype here.
