BBG Global Design System
Since 2023, GDS powers Berlin Brands Group with a scalable, cohesive design for all webshopsView case study
Wheeshing
Simplifying tire repair services for mechanics
01- Introduction
Wheeshing is a blend of the words "wishing" and "wheel," an app designed to make tire replacement easier for both mechanics and car owners. I developed the brand name to reflect the core mission of the application. The real app exists under a different name, but due to copyright reasons, I created the "Wheeshing" brand while keeping the same core concept and features. This concept is based on a real project I worked on for a client, with some added enhancements to improve the user experience.
Company
Asper Brothers, Warsaw (PL)
Tools Used
Figma, User Interviews, Jira
Role
UI/UX Designer
02- Problem Statement
Finding and replacing the right tire can be a hassle. Mechanics often struggle with outdated systems to find the right tires for their customers and communicate effectively with car owners. Existing solutions lack simplicity and intuitive usability, leading to inefficiencies in the process. Wheeshing aimed to bridge this gap with an intuitive app that simplifies the entire process.
03- My Role & Responsibilities
As a UI Designer, I created the design system to ensure consistency, scalability, and efficiency in the product's visual identity.
As a UX Designer, I conducted in-depth user interviews before designing the wireframes and later conducted usability tests to refine the app.
04- Research & Discovery
I took a look at some tire service apps similar to ours and crafted a scenario to mimic the real-life experiences users might have. We also carried out task-oriented usability tests and engaged in in-depth interviews to gather valuable insights from our target users.
Usability Testing
Methodology:
- Test Count: 5 usability tests
- Duration: 16–35 minutes per test
- Period: 2 weeks
- Languages: English, Italian
- Devices: 1 test on mobile, 4 tests online via desktop
Test Scenario:
- Registration within the app
- Logging in and dashboard view
- Client accepting repair terms
- New client creation
- Lack of desired tires in the catalog
- Client refusal of terms
- User account management and logout
Participants:
- 5 male participants (ages 27–61)
- 4 from authorized car service dealerships, 1 from a private garage
- Moderate internet usage (2–10 hours daily)
- Preferred working with the app on mobile devices
Key Findings:
- Users found the app useful for daily work
- Direct customer communication and tire data sharing were major advantages
- The app was perceived as easy to use and visually satisfactory
MoSCoW Method
To keep the project focused and efficient, I used the MoSCoW method to categorize features based on their importance:
Must-Haves (Essential for MVP):
- Scan car plate and QR code to fetch vehicle data
- Choose up to three tire options and generate quotes
- Send quotes to customers via message
- View all customer replies in real time on the dashboard
Should-Haves (Important but not critical):
- Tire condition tracking for future maintenance reminders
- Multiple language support
- Integration with inventory management systems
Could-Haves (Nice to include if time permits):
- Payment processing within the app
- Customer feedback and rating system
- Social media integration for sharing promotions
Won’t-Haves (Not for this version but maybe later):
- Augmented reality to preview tires on vehicles
- AI-based tire condition assessment
- Integration with insurance companies
05- Design Process
Key Design Principles
Simplified usability
Minimalistic interface with clear, sharp elements
Essential tools displayed without visual overload
A consistent design system to ensure a cohesive experience
Optimized workflows for faster task completion
Step 1: Wireframing
The process began with low-fidelity wireframes to define the core structure and layout of the app. Using Figma, I sketched key screens and user flows based on research insights. Wireframes were tested with stakeholders and users to gather early feedback before moving to high-fidelity designs. The wireframes focused on:
User flow validation
Essential UI elements placement
Basic navigation structure
Basic micro-interactions
Discover the Wheeshing App UX Journey
Explore my article detailing the Wheeshing App's user experience, covering tasks like registration, dashboard navigation, initiating new client processes, managing unavailable tire scenarios, handling client quotation refusals, updating user information, and logging out. Dive into the full story here.
Read moreStep 2: High-Fidelity Prototyping
After validating wireframes, I designed high-fidelity prototypes in Figma. Prototypes were tested in usability sessions to ensure alignment with user expectations and business goals. These prototypes incorporated:
Brand-aligned visual styles (colors, typography, icons)
Interactive elements and transitions
A refined layout with real content
Step 3: Design System Creation
A comprehensive design system was established to enhance collaboration, streamline development, and maintain consistency. Key elements include:
A clear color palette and typography
Standardized UI components like buttons, forms, and icons
Guidelines for responsiveness across devices
Step 4: Developer Handoff
For the handoff, I used Jira to create detailed tickets and communicate with developers, ensuring smooth collaboration as we followed the Scrum Agile methodology. The handoff process included:
Exporting assets in multiple resolutions
Providing detailed design specifications using Figma's Inspect feature
Collaborating closely with developers to address technical feasibility
Conducting design QA to ensure implementation accuracy
06- App Functionalities
1.
Launch the App
Users open the app and land on the dashboard, where they can view the status of all clients.
2.
Start a New Process
Users click "Start Process" and scan the car's plate and QR code to retrieve vehicle data.
3.
Selecting the Tires
If the tires are in poor condition, users can select up to three replacement options and generate a quote.
4.
Sending the Quote
Users send the quote to the car owner via message and receive real-time replies in the dashboard.
07- Challenges & Solutions
Challenge: Complex User Journeys
Solution: Mechanics needed an easy way to handle multiple clients simultaneously. We tackled this by creating an intuitive dashboard with real-time updates and filters.
Solution: Mechanics needed an easy way to handle multiple clients simultaneously. We tackled this by creating an intuitive dashboard with real-time updates and filters.
Challenge: Dashboard lacking sufficient details.
Solution: Added more information such as message timestamps and car details.
Solution: Added more information such as message timestamps and car details.
Challenge: Client Communication Efficiency.
Solution: Sending quotes manually took too much time. Our solution? Automated messaging with pre-filled templates that could be customized before sending.
Solution: Sending quotes manually took too much time. Our solution? Automated messaging with pre-filled templates that could be customized before sending.
Challenge: Lack of flexibility in entering car data.
Solution: Provided an option to manually enter registration number when scanning fails.
Solution: Provided an option to manually enter registration number when scanning fails.
Discover the Wheeshing App UX Journey
Explore my article detailing the Wheeshing App's user experience, covering tasks like registration, dashboard navigation, initiating new client processes, managing unavailable tire scenarios, handling client quotation refusals, updating user information, and logging out. Dive into the full story here.
Read more08- Results & Impact
Wheeshing successfully streamlined the tire replacement process, providing a seamless experience for both mechanics and car owners. The simplified workflows and intuitive design led to positive feedback, with users highlighting the ease of use and clear visual hierarchy.
09- Key Takeaways
Reflecting on this project, here are a few things I learned:
User interviews are invaluable:
They helped us shape the app around real needs rather than assumptions.
A well-structured design system speeds up development:
It ensured consistency and smooth collaboration with developers.
Iterate based on feedback:
Testing early and often helped us avoid costly redesigns later.
Other Case Studies
View case study
BBG UX Analysis
Since 2024, the UX analysis of BBG webshops has enhanced usability, streamlined navigation, and improved accessibility, creating a more seamless shopping experience.View case study
Helpicam
Created in 2020, Helpicam is a PWA enabling real-time incident reporting to boost safety and efficiency across industriesView case study