Summary
Problem
The old B&J Body Shop website was clunky, visually outdated, and difficult for customers to navigate. Important information was hard to find, booking appointments was confusing, and the site didn’t reflect the professionalism and quality of the shop.
Solution
I redesigned the website with a focus on clarity, usability, and modern branding. Key improvements include:
- Updated visuals and typography to give the site a polished, professional look while staying true to the brand’s bold red and black identity.
- Streamlined navigation and user flows to make finding services and scheduling appointments effortless.
- Dedicated sections to tell the shop’s story, showcase partners, and highlight services, creating a cohesive experience that builds trust with customers.
Tools
- Figma
- Illustrator
- Photoshop
- Miro
Services
- UI/UX Design
- User Research
- User Flows
- Wireframing
- Web Design
Updated Home Page
The Process
The redesign began with a thorough review of the existing website. The old homepage revealed several pain points: navigation was cluttered, visuals were inconsistent, and the booking process created unnecessary friction for customers. These issues made it difficult for users to quickly find information or feel confident when scheduling an appointment.
From there, I mapped out the core user goals: learning about the shop’s services, scheduling an appointment (either contactless or in-person), and quickly finding essential information like location and contact details. This guided the creation of streamlined navigation and clearer calls-to-action.Wireframes and design explorations focused on simplifying the layout while modernizing the visual identity. Key improvements included a stronger hierarchy of information, prominent booking options, and consistent branding across the page.
The updated homepage reflects these improvements: a clean, modern design that highlights services, guides users to take action, and ultimately delivers a more intuitive and professional experience.
About Us Page
Telling Their Story
For B&J Body Shop, their history and process aren’t just background details — they’re the heart of the business. The shop has built its reputation over decades in Cordova, and they’ve refined a repair process that customers trust.
When designing their new site, we made sure their story had its own space to shine. The dedicated page walks visitors through the shop’s beginnings, their passion for cars and having a shop that is reliable, and the step-by-step care they put into every job. Clear visuals, simple navigation, and a layout that flows like a conversation help customers connect with who they are and why they do what they do.
Appointment Scheduling Task Flow
Appointment Task Flow
To simplify scheduling appointments, I mapped out two user journeys that have two separate endpoints.
- Contactless Appointments - route directly to the client’s Carwise page, making it quick for customers who prefer an online-first option.
- In-person Appointments - guide users to a tailored form on the site, ensuring the shop collects the details needed before the visit.
This flowchart illustrates how the site now funnels users efficiently to the right endpoint, reducing confusion and aligning the scheduling process with customer preferences.
Full Figma Layout
Bringing It All Together
The final design brings B&J Body Shop’s story, services, and classic car spirit into one clear, easy-to-use experience. Every page works together — from the polished logo to the streamlined navigation — to guide visitors through the site without losing the personality that makes the shop unique.
The full layout reflects a balance between style and function: bold enough to stand out, simple enough for anyone to use, and built to highlight what B&J does best.