Mobile App

Motor9 Atelier Android Mobile Application

A black background with a white stylized double question mark in the center.
Smartphone screen displaying a vehicle management app with a greeting to Amine, showing multiple Chevrolet Aveo cars listed with their details, navigation icons at the bottom.
Get a design like this!

Introduction

The Motor9 app was designed to bridge the gap between workshop managers and clients, offering a seamless way to manage and track vehicle maintenance activities. The primary goal of the app was to simplify complex workflows, such as recording maintenance schedules, managing vehicle details, and ensuring timely service reminders. With user-friendly interfaces tailored to specific roles, the app ensures a smooth experience for both workshop managers and clients.

The app is divided into three main portals:

1. Client Portal: Focused on vehicle owners, allowing them to add their vehicles, monitor maintenance schedules, and receive notifications.

2. Admin Portal: Designed for workshop managers, enabling them to manage client information, track vehicle maintenance, and oversee workshop operations.

3. Super-admin Portal: Dedicated to overarching management, allowing the super admin to control multiple workshops and their respective administrators.

This project was a collaborative effort between designers, developers, and a project manager. Following a structured workflow of designing, feedback, and iterative implementation, the app was brought to life to cater to the unique needs of the automotive service industry.Client

Team and Collaboration

The development of the "Motor9" app was a collaborative effort that involved a diverse and skilled team, including developers, a project manager, and a UI/UX designer. The project manager, Said Tazi, played a pivotal role in ensuring clear communication of the project specifications, timelines, and objectives, facilitating seamless collaboration between team members.

The project followed a feedback-driven iterative process, starting with initial designs that were shared with stakeholders for feedback. This cycle of design, review, and refinement allowed us to align the app with the client’s expectations and user needs. Once the designs were finalized, the development team translated these designs into a fully functional Android application, with frequent cross-team discussions to resolve challenges and ensure quality.

Each team member brought unique expertise to the table, fostering a collaborative environment that prioritized creativity, user-centric design, and efficient implementation. This synergy between design and development ensured a smooth workflow, resulting in an application that not only met but exceeded client expectations.

User Persona

Profile of Rachid Amrani, a 44-year-old married vehicle owner from Oran, Algeria. The profile includes a cartoon illustration of a man with a beard and short hair. The profile lists his personality traits as proactive, busy, efficient, and practical, and highlights his desire to keep his car in top condition without disrupting his schedule. The scenario describes his reliance on a vehicle for work and receiving notifications about oil and parts maintenance. Goals include tracking the vehicle's maintenance history and receiving timely notifications. Frustrations involve forgetting maintenance schedules, lack of clarity on oil and parts needed, and manual logs. The profile also notes his trust issues with workshops and struggles with detailed maintenance records.
Profile of a man with a beard and mustache, wearing a light blue shirt and a dark blazer, with text about his work and personality, including name, age, status, occupation, location, goals, frustrations, personality traits, and tech affinity.

The User Persona section provides a detailed understanding of the app’s target audience, capturing their demographics, goals, challenges, and behaviors. By creating realistic profiles of typical users, this section highlights the needs and expectations of both workshop managers and vehicle owners. It serves as a foundation for user-centered design, ensuring the app’s features and interface address real-world pain points.

Empathy map

A flowchart with questions and statements about app usage, feelings, and actions, with sections labeled 'What do they Think?', 'How do they Feel?', and 'What do they Do?'. It includes questions like 'Will I understand how to use it quickly?' and statements like 'It should help me save time.' Different colors distinguish sections.

Problem

Flowchart showing issues in inventory and maintenance management. Problems include missed maintenance schedules, difficulty managing inventory, lack of reminders, no automated tracking system, reliance on manual records, inefficient communication, and absence of a centralized management platform.

Managing vehicle maintenance and inventory in the automotive service industry can be a challenging and inefficient process. Clients often miss scheduled maintenance due to the lack of timely reminders, leading to potential vehicle issues and higher costs. 

Workshops struggle to maintain accurate inventory and service records, relying heavily on manual or paper-based systems. This often results in mismanagement and delays in providing services.

Additionally, poor communication between clients and workshop managers exacerbates the problem. Misunderstandings or missed updates create frustration for both parties.

These challenges highlight the need for a centralized system to streamline maintenance schedules, inventory tracking, and client communication, ensuring efficiency and improved user satisfaction.

Solution

The Solution section outlines the comprehensive design and functionality of the app, tailored to address the identified problems faced by workshop managers and clients. The app provides an intuitive interface for tracking vehicle maintenance, scheduling services, and managing client data. Features like personalized reminders, detailed maintenance records, and streamlined communication between clients and workshops ensure efficiency and reliability.

Table with instructions for various actions on a maintenance app, including sign-up, vehicle details, scheduling, notifications, and history, with steps and feelings attuned to each action.

A User Journey Map visualizes the steps, emotions, and actions users experience while interacting with the app, from signing up to accessing maintenance history. It highlights key stages like adding vehicle details, scheduling services, receiving notifications, and tracking records. By understanding user feelings and identifying improvement opportunities at each stage, the map helps refine the app for a more seamless and satisfying experience.

Sitemap

Flowchart diagram with login/signup at the top, branching into Dashboard, Vehicles, Maintenance, Workshop Management (Admin), and User Profiles, each with subcategories.

Reference

Mobile app screen displaying vehicle records for a 2019 Toyota AC. Options include adding logs, logging faults, adding old service logs, and to-do items, with a download PDF button and a red cancel button at the bottom.
Mobile app screen showing a logged car entry for a 2019 Toyota AC, with red header and navigation icons at the bottom.

Said provided a reference app, Loggy, to guide the design process. Loggy serves as a free mobile app that functions as a digital maintenance logbook, accommodating all types of vehicles, from cars and bikes to boats and machinery. It offers a centralized solution for tracking and managing multiple vehicles in one place.

The app allows users to record detailed logs of vehicle history, including routine maintenance, tire changes, faults, or major upgrades. This detailed and accessible logging system simplifies vehicle management, helping users stay organized and informed about their vehicles' maintenance history.

Wireframes

A series of six mobile app interface screens showing options for task management, including lists, editing tasks, adding new tasks, and navigation icons at the bottom.

The wireframes provide a foundational visual representation of the app's structure and layout, serving as a blueprint for its design and functionality. These mockups outline the placement of key elements such as navigation bars, buttons, and content sections, ensuring an intuitive user flow.

Style Guide

Screenshot of a user interface design with color palette, typography, spacing, buttons, and components sections for a digital project.

The style guide for the Engage AI redesign establishes a modern and cohesive visual identity. 

High-fidelity Design

Client

Screen from a vehicle management app showing a brown Chevrolet Aveo car, owned by Amine Tiffrent, with 200,000 km mileage, scheduled maintenance on August 31, 2024.
Mobile app screen showing a registration form with fields for first name, last name, email, phone number, and password, with options to sign up using Google or Facebook.
Mobile app screen displaying four Chevrolet Aveo vehicles with status indicators for proximity, user greeting, and notification icon.
Mobile app screen for adding a car, with fields for make, serial number, registration, and engine type, showing six images of a brown SUV at the bottom and buttons labeled 'Cancel' and 'Save'.
Mobile app screen for vehicle maintenance, showing options to edit an oil change with a 200,000 km mileage, date August 31, 2024, oil type, and engine type. Buttons for save and delete maintenance, plus navigation icons.

Admin

Mobile app screen showing vehicle maintenance options, including a delete confirmation prompt for removing a maintenance item, with buttons for confirming or canceling.
Mobile app screen showing scheduled appointments for a client named Amine Tiffent with Chevrolet Aveo on August 31, 2024. The app displays upcoming or late appointments with color indicators, a home icon, a water droplet icon, and a second icon at the top right indicating 3 notifications.
Mobile app screen displaying list of Chevrolet Aveo vehicles with HDI 1.6L engine, showing multiple entries with a car image, vehicle details, and a purple arrow icon.
Mobile app screen showing a user profile with a profile picture of a person with a backpack, editing options, and buttons for saving or deleting the account.
Mobile app screen for PureTech oil management showing options to delete or save oil entries for Total Quartz Ineo First 0W-30 and Total Quartz 9000 Future NFC 5W-30, with a large oil droplet icon button at the bottom center.

Super-Admin

Mobile app interface displaying a greeting and a list of workshop sessions titled "Atelier 1" with navigation arrows, a bottom navigation button, and a profile picture at the top.
Mobile app screen displaying a list of appointments for a client named Amine Tiffert at Chevrolet Aveo, scheduled for August 31, 2024. The screen has a top header 'Atelier 1', a back arrow, and a notification icon with 3 notifications. Appointments are color-coded as orange for upcoming and red for overdue. There are navigation icons at the bottom for Home, a water droplet, and Settings.
Mobile app screen showing details for a client and vehicle, with options to delete maintenance, filter oil and lights, and perform operations like oil drain, inspection, brake replacement, and wheel alignment.
Mobile app profile screen showing a person with a backpack in a circular profile picture, with edit options, email, phone number, and save or delete account buttons.
Mobile app interface for PureTech oil management, showing options to delete or save oil types and an oil drop icon button.

Internal Team Testing

Mobile app interface displaying details of a Chevrolet Aveo car, including its image, model, and maintenance history, surrounded by icons indicating correct and incorrect options.

During the development process, the team conducted extensive internal testing to evaluate the app’s usability and effectiveness. Designers, developers, and the client assumed the roles of end users, simulating real-world scenarios to identify potential pain points and areas for improvement.

The team tested critical workflows, such as registering vehicles, scheduling maintenance, and accessing historical logs. By performing these mock tasks, they uncovered issues such as redundant steps during vehicle registration and overly complex navigation paths. These were addressed by streamlining processes and simplifying the user interface.

For example, early iterations required users to navigate multiple screens to edit vehicle information. Internal feedback revealed that this was cumbersome, leading to the implementation of a single, consolidated editing screen. Similarly, the team identified the need for visual cues to prioritize overdue maintenance tasks, resulting in color-coded alerts.

This collaborative and iterative approach ensured that the app was intuitive and user-friendly before it reached actual users, saving time and reducing the need for significant post-launch adjustments. Internal testing also allowed the team to explore various design alternatives, ultimately selecting the ones that provided the best experience for both workshop managers and clients.

Impacts and Results

Enhanced Workshop Efficiency:
The app streamlined administrative tasks for workshop managers, allowing them to track and manage vehicle maintenance schedules, client records, and inventory seamlessly. This resulted in a 20% reduction in manual errors and a significant improvement in task organization.

Improved Client Engagement:
With features like notifications for maintenance deadlines and detailed service logs, clients became more proactive about vehicle care. Over 80% of users reported satisfaction with the reminder system, citing it as a key motivator for timely maintenance.

Future Recommendations

To ensure the app continues to evolve and meet user needs, the following recommendations are proposed:

  • Integration with IoT Devices
    Implementing IoT integration can provide real-time vehicle diagnostics, such as engine health and tire pressure. This will enhance maintenance predictions and add significant value for both workshops and clients.

  • Advanced Analytics Dashboard
    Introducing a data analytics module would allow workshop managers to track key performance metrics, such as vehicle trends, most common repairs, and customer retention rates, enabling data-driven decisions.

  • Multi-Language Support
    Expanding the app to include multiple languages will make it accessible to a broader audience, catering to workshops and clients in different regions.

“Amine have done a great job in very short period of time. All my preferences and ideas were put together in perfect way and beautiful website.”

Kateryna Sierova - Photographer

Woman taking a mirror selfie in a room, wearing a green polka dot dress.
A young man smiling in front of a microphone with a computer monitor in the background.

“I am thrilled to share my experience working with an outstanding web designer Amine From the moment I engaged their services, I knew I was in capable hands. Their expertise in web design is unparalleled, and I could not be more pleased with the results.”

Sheikh Adiat - SMMA Agency

“Absolute pleasure working with Amine. Great communication, a driven developer and excellent service delivered consistently.”

Joshua Romao - Agency Owner

Light green background with large dark green initials 'JR' in the center.
Mobile app screen displaying a Chevrolet Aveo, yellow-orange color, with details about maintenance and mileage in kilometers.

CONTACT US

CONTACT US

Have a design project in mind? Send me a message, and I’d be thrilled to discuss it with you! I’m excited about new challenges and look forward to connecting!

Let's talk