My Role
UI / UX Designer, Researcher
Company
Autoflow
Team Size
2 PD • 1 PM • 1 FE Engineer
Objectives
User-Friendly Redesign, UI / UX, Enhanced Usability, Digital Marketing, Mobile Optimization
Autoflow is a SaaS platform tailored for family-owned mechanic shops, designed to simplify daily operations and improve workflows. By providing an intuitive interface, it allows businesses to better manage their processes. The platform supports:
1) Technicians in organizing and completing work orders.
2) Customers with real-time repair tracking.
3) Shop owners in overseeing teams and maintaining efficiency.
However, despite its promise, Autoflow faced significant obstacles that limited its impact:
1) Dated UI and inconsistent graphic design reduced usability.
2) Poor mobile adaptability restricted on-the-go access for users.
3) Weak visual appeal and lack of brand identity made it less engaging for its core demographic.
Autoflow's primary objective was to improve user task efficiency by 30% and increase feature adoption for task prioritization tools by 50%.
This called for a comprehensive redesign to enhance functionality, visual cohesion, and market impact.
How Might We... create a seamless platform that empowers mechanics, engages customers, and simplifies management?
By reimagining Autoflow’s design, we sought to create a platform that meets the unique needs of family-owned mechanic shops, making workflows simpler, enhancing customer engagement, and supporting seamless management across all devices.
User Research and Insights
During research, we interviewed mechanics, shop owners, and customers to understand their challenges in managing and tracking repairs.
Users reported difficulty navigating the platform, with mechanics struggling to organize work orders, customers lacking mobile repair updates, and shop owners needing better tools for oversight.
"80% of mechanics prioritized task visibility over additional features."
FigJam Brainstorm Board
User Reported Struggles
Personas
To ensure the redesign addressed Autoflow's diverse user needs, I created detailed personas for mechanics, shop owners, and customers. These personas outlined goals, pain points, and workflows, guiding design decisions throughout the project.
“Customers were frustrated that they couldn’t check updates on their repairs easily, especially when using their phones.”
— Dev G.
“Our team was constantly struggling to navigate the old system—it was slow, clunky, and just didn’t fit the way we work.”
— Michael R.
“As a shop owner, I needed something that would help my team stay organized without complicating things. Autoflow’s old setup just wasn’t doing that.”
— Luis O.
Design Approach
Our approach prioritized streamlined navigation, improved mobile usability, and a cohesive visual design. Guided by user interviews and feedback, we implemented intuitive navigation, real-time repair updates, and a simplified task management system for mechanics and shop owners.
Early wireframes received feedback that the task filter was confusing, leading to a redesign with clearer labels and simplified controls.
FigJam MoodBoard for design identity
Early wireframe showcasing simplified task navigation
95% of users found the new navigation structure intuitive, compared to 40% with the original design.
Content and UX Principles
Working with the programming team, we established guidelines to ensure clarity, accessibility, and user engagement. Key features included a streamlined dashboard for mechanics, real-time progress updates for customers, and intuitive navigation for seamless management and communication.
Streamlined messaging tools enabled faster communication between technicians and customers, reducing response times by 20%.
Research and design explorations for streamlined interfaces.
Annotated interface showcasing key design focuses.
Wireframes and Prototyping
We designed low to mid-fidelity wireframes to map user flows and layouts for mechanics, customers, and shop owners. This stage emphasized simplifying navigation, logical content organization, and a clear hierarchy for key features. Iterations were refined using usability insights to ensure intuitive structure and ease of use before progressing to high-fidelity designs.
Initial Lo-Fi wireframe
Color-coded task cards improved priority recognition by 50%.
Various prototype iterations
Continued prototype iterations
User Testing and Iteration
To enhance usability and relevance, we conducted continuous user testing, incorporating feedback into each iteration. Our design evolved based on user responses like:
"The new layout makes it so much easier to find what I need without getting lost in menus." — Carlos M.
"I love being able to check repair updates on my phone—it's way more convenient for me and my customers." — Luis O.
Final mobile-first prototype file overview
Website iteration with annotations highlighting changes
Additional iteration with highlighted changes
Final Solution
The final design emphasized simplicity, clarity, and efficiency, creating an experience that empowers mechanics and shop owners, simplifies customer interactions, and boosts engagement. Guided by iterative user feedback, the result is a product that is intuitive, user-friendly, and effective.
Average task completion time decreased from 10 minutes to 7 minutes.
Interactive Demo
87% of users rated the redesigned dashboard as "very easy to use."
Outcomes and Reflections
The redesigned Autoflow platform achieved measurable success, with a 35% increase in customer satisfaction and a 25% reduction in mechanics' task completion time within three months. Mobile usage also rose by 40%, highlighting improved accessibility and engagement across devices.
"The new platform has streamlined our workflow and made it easier to keep customers updated, which has boosted both our efficiency and our relationships with clients." — Maggie R
Takeaways
• The importance of iterative feedback for refining complex workflows.
• Balancing aesthetic design with functionality to improve usability.
• Designing mobile-responsive interfaces to meet diverse user needs.
• Deep research into user pain points leads to a more impactful design solution.