How Success is Determined
Determining the success in this new HiFi redesign of the A-Team Auto Shop website would be determined by how much of an increase the business will have in booking appointments online compared to walk-in customers.
Auto Shop
Website
Expansion
Role:
UI/UX Generalist
Tools:
Figma and Adobe
ABOUT
Website makeover and expansion for a family owned auto shop to improve customer service and business revenue
Independent Project for A-Team Auto Shop to enhance and challenge my UI/UX Design skills using Figma, Adobe Illustrator, and Adobe Photoshop.
Featured in this project are eleven high fidelity design pages and website prototype, featuring popup designs for the A-Team Tire & Auto Shop that I designed utilizing my UX Design research.
The A-Team Tire and Auto Shop is a local family owned auto repair shop that has served their community for many years.
After reviewing their website I felt that there was an opportunity to enhance the presentation of The A-Team’s services, outreach, and online user experience.
Online Customer Service
The main focus should be the services the auto shop provides for the users visiting the website to then book services and increase business revenue.
Purpose
Car owners with car issues need specific services to repair their vehicles and the new website would give the user (car owners/clients) information about the business’s services, prices, booking appointments, locations, relieve stress, and unique qualities that would benefit both the client and the business collaborating together.
If the client/user can perform the ability to search the auto shop's services and book service appointments online, then they will achieve the business revenue will potentially increase and build clientele while providing a positive online customer service experience.
SOLUTIONS
-
Summarize the history of the auto shop
-
Create a separate page with more information "About Us"
-
Create a modern layout utilizing the company's color scheme
-
Provide user with more information on services available
-
Improve user experience with booking services
-
Organize all information and sitemap to build user trust
Challenges
Sitemap
Other challenges would include the sitemap for the user experience that is a bit dysfunctional with the buttons leading to the same pages with lack of organization in information.
User Experience and
Customer Service
The website successfully gives information about the auto shop and history however, lacks focus in communicating the many car repairs and services to car owners they can provide to increase booking services with the business and build strong clientele relationships.
Branding
The color scheme, layout, and hierarchy could be improved to show the auto shop is modern, focused on service, but still provides a unique quality of customer service being a family owned auto shop compared to their competitors.
Target Audience
Who is this helping?
Key Demographics
The target audience for this website would be for car owners and adults from the age group ranging between the ages of 18 - 70 years old.
Key Psychographics
Car owners, online-users, stressed or high-anxiety users, and users searching for: trust-worthy services, mechanics, customer service, and clear communication on their process of repairs. Additional benefits to choosing a specific service provider.
Interests
Searching for auto shops that are local, family-owned, and provide repair services, advance car repairs, and potentially towing services.
Challenges
Searching for auto shops that are local, family-owned, and provide repair services, advance car repairs, and potentially towing services.
Audit Research
Inspired, compared, and took note
My research included auto services from small and large companies. In addition I researched Nothing Bundt Cakes, not only because they are delicious, but because they also provide a service to clients with their baked goods. Selling multiple variations of product and providing the service of having a fresh baked good ready at a client's conveniency.
In my findings I found the branding, presentation, and sitemaps to be clean, modern, simple, and had clearly communication. The websites directed clients/users to their services and abilities immediately when visiting their websites.
Information Architecture
Sitemap research, creation, and improvements
Although it may appear to clearly communicate the information on the homepage the buttons to direct users to service information and booking appointments are no where in the same area. The importance of services the auto shop provides are also not the main focus within the organization.
In order for the business to boost booking services and provide quick information on services this needs to have better organization and hierarchy within the homepage.
Original Sitemap
Although it may appear to clearly communicate the information on the homepage the buttons to direct users to service information and booking appointments are no where in the same area.
The importance of services the auto shop provides are also not the main focus within the organization.
In order for the business to boost booking services and provide quick information on services this needs to have better organization and hierarchy within the homepage.
Improved Sitemap
The revision focused on organizing the experience for users to clearly locate more information that they may find interesting based on their interactions of the homepage. The sitemap also may now influence the user to follow the navigation in order to reach the end goal of booking an appointment with the A-Team auto shop.
Each section provided in the homepage will redirect the user to more information or booking an appointment creating a higher success for both the business and user.
Beginning with Wireframing
Creating different layouts helped me understand the best way to display the most information in an organized manner
Ideations
Sketches, stickies, and brainstorming
Low Fidelity Designs
Wireframes, placeholders, and drafts
Homepage
Service Page Template
About Page
Design System
Building trust and visual appeal
Primary Logo
Keeping the original logo to maintain its long history and trust within their local community and clientele was an important decision and helped understand where the rebranding needed to be maintained.
Color Palette
Tagline
Utilizing the story that The A-Team has published, I discovered a tagline that would describe their service, attitude, and nature best. This phrase will help build trust with clientele and online users.
Typography
Icon Library
Moodboard
The tone of the website, the target users, and the business itself
High Fidelity
Slides of individual layouts available below
Website final layout, video demo, and comparison before and after
Video Demo
Expansion Explanation
Before and After of the website with reasons for changes
Thank you
Conclusion
Findings and Conclusions
This was a great learning experience for me to redevelop the A-Team Auto Shop website as a personal project. I personally enjoy supporting small businesses and hope they are successful.
The project helped me to understand how user experiences in this case needed to be easy for various users and age ranges because of the age range of car owners. The A-Team website was also an example of a functioning website with strong content but needed more attention to the information organization, user experience, branding, and to highlight the need of the user to be communicated faster.
I feel that with the changes I have suggested in this redesign homepage of the website that the business should have a higher success rate in booking appointments and for users/clients to search for information they need with ease.