top of page

Design System

B2B SaaS solution for efficient end-to-end fleet asset management powered by AI. 

Checkturio Startup, Berlin, Germany

Problems

1. Unclear user flow in both web & mobile apps.
2. Deficiency and inconsistent in UI design
3. Complex functionality overload.

Deliverable

Detecting problems, identifying key metrics, and finding solutions for complex workflows.

User flows, Information architecture, storytelling & scenarios, interaction design, wireframing, design system, visual and user interface design,  and project management.

Role & Duration

Sole UX/UI Designer (Mobile & Web apps)​

Usability satisfaction

+48.9% 

Increased customers
+18%

Challenges (selected)

When I began my role at Checkturio, the initial product had been developed just 6 months prior, presenting numerous challenges. My primary objective entailed identifying these obstacles and initiating collaborative efforts with stakeholders to systematically tackle them. Through iterative processes, I focused on enhancing the usability of both the mobile and web applications.

1. Information architecture enhancement 
2. UI & visual design improvement
3. User flows & usability enhancement
4. Workflow implementation
5. Optimizing web dashboard 

1. Information architecture enhancement

 Define functions

I started by gathering insights from stakeholders in fleet management. Then, I organized these insights into clear menus and features for both apps, ensuring users can navigate smoothly.

Information architucture

I organized the main page, sub-pages, and important functions in the web app based on how users move through it, ensuring a clear hierarchy for easy navigation.

Result:
Driving user engagement through app navigation enhancement.

Before
After

1. Seamlessly integrated new functions into main and sub-menus
2. Consolidated similar content into clear and cohesive categories
3. Standardized button text for consistent user experience

3. User flow & usability enhancement

Problem identification

I identified common usage challenges by outlining typical scenarios and providing drivers' actions to achieve their goals efficiently.

Paper wireframing 
Improving usability

1. Homepage revamp: Introduced new features like a search bar and filters, categorizing and displaying them to improve usability.
2. Enhanced navigation bar: Implemented a tab bar featuring "All" and "Saved" vehicles with a visible counter on the homepage for streamlined access.

Before
After

Grouping similar functionalities:

  • Filter

  • Search bar

  • License plate number scanning

Moved the "Saved" page to the tab bar for easier access and improved usability.

Result: 
Optimizes user experience by smoother flow & Enhanced usability platform-wide.
 

What I learned

1. Enhanced communication and collaboration: Strengthened teamwork by collaborating with developers, the product leader, the marketing team, and stakeholders.
2. Advanced user-centric design skills: boosting skills of storytelling & scenarios, designing complex workflows, interaction design, and end-to-end user experience.
3. Agile project management proficiency: Mastered agile methodologies for efficient project delivery and product management. 

4. I am continuously learning and seeking growth opportunities......

© 2024 by Neda Mokarami

bottom of page