#designsystem
#web
#Figma
Streamlining Fleet management : The ultimate Design System
Building the best fleet management Design system 🚀
2021 - present
Timeline
Core Team
Role
Background
LocoNav was launched in 2015 as a startup. It then grew to be India’s number 1 Fleet Management Solution with over 1 million vehicles. Our users manage their 🚚 fleet on the Web and mobile (Android and iOS).
Why Do We Need a Design System
LocoNav's rapid product growth over the years was unstructured in terms of product design, i.e, lack of a design system. This led to severe user experience inconsistency across platforms
As a startup, we keep on solving new problems, and to build product faster, it make sense to make a design system.
In September 2021, The team started expanding and it was difficult to keep track of the all the components.
💡 For context - the LocoNav component library was in Photoshop 😂 (before me)
Responsibilities
I was part of a cross-functional team that had weekly meetings to sync about this initiative. And my duties varied from research, definition, UI design, Documentation.
Research
To better understand the different problems in our product, we conducted interviews with people from different departments (Front end developers, Product Managers, Engineering managers, Marketing manager).
After these initial interviews, we discovered that we need to:
Identify all the design issues in our product
Learn the common standard and principles of a successful design system
1
Bringing a new dimension to user experiences and interfaces.
In the realm of technology, artificial intelligence (AI) and machine learning have emerged as game-changers, particularly in the field of UI/UX design. The integration of these advanced technologies is reshaping how we approach design, offering new possibilities and challenges. This post aims to explore how AI and machine learning are influencing the field of UI/UX, bringing a new dimension to user experiences and interfaces.
2
Bringing a new dimension to user experiences and interfaces.
The integration of these advanced technologies is reshaping how we approach design, offering new possibilities and challenges
3
Bringing a new dimension to user experiences and interfaces.
The integration of these advanced technologies is reshaping how we approach design, offering new possibilities and challenges. This post aims to explore how AI and machine learning are influencing the field of UI/UX, bringing a new dimension to user experiences and interfaces.
We tier down to Templates ➡️ Molecules ➡️ Atoms to understand.
We began by auditing our own product across different screen sizes. As we have multiple module live on the platform. We started analysing in reverse with wider pages.
Visual Analytics
1
Bringing a new dimension to user experiences and interfaces.
In the realm of technology, artificial intelligence (AI) and machine learning have emerged as game-changers, particularly in the field of UI/UX design. The integration of these advanced technologies is reshaping how we approach design, offering new possibilities and challenges. This post aims to explore how AI and machine learning are influencing the field of UI/UX, bringing a new dimension to user experiences and interfaces.
2
Bringing a new dimension to user experiences and interfaces.
The integration of these advanced technologies is reshaping how we approach design, offering new possibilities and challenges
3
Bringing a new dimension to user experiences and interfaces.
The integration of these advanced technologies is reshaping how we approach design, offering new possibilities and challenges. This post aims to explore how AI and machine learning are influencing the field of UI/UX, bringing a new dimension to user experiences and interfaces.
We tier down to
Templates ➡️ Molecules ➡️ Atoms to understand.
We began by auditing our product across different platforms. This involved listing all instances of particular components (e.g., buttons, dropdowns, input fields) on various pages and flows. Additionally, we conducted interviews with a few front-end developers and designers to understand their primary goals and pain points.
Key findings
1
Inconsistency
Our product had many inconsistencies, be it in colors, components, guidelines…, which can have detrimental effects on the overall experience & the brand image.
2
Redundancy
For designers, not having a library of components means you’ll have to do repetitive design work to create your product screens. This also applies to the implementation, since developers would have to spend more time and effort to create new components.
3
Rigidness
In-existence of a buttons’ hierarchy nor a clear structure for the different states of the components used across platforms.
2. Benchmark
In the benchmarking, we deeply analyzed the documentation of the guidelines and the components of popular design systems.
3. User Research
After using multiple fleet management products. We came to conclusion that no one is focusing on visuals design and every company wants to show as much data as they can show.
This is the best experience in Fleet Management. The level of service and expertise provided has far exceeded my expectations, making it the ultimate choice in fleet management. From their attention to detail to their innovative solutions, every aspect of the experience has been nothing short of the best in the field.
Sachin
Fleet Owner
Let’s Define our Design System
I call it LocoDesign System 😄
Base
Some core principles we kept in mind during this process
For our application of the Atomic Design approach, we used Figma to list out the entire components that are used on our platforms in a table and organized them into an initial structure of atoms, molecules, and organisms.
Basics cover guidelines for aspects such as typography styles, colors, shapes and icons that help in formulating consistent components.
Design Principle
Some core principles we kept in mind during this process
1
User Centricity
We aim to make sure that every time our users use our product, they have a good experience and feel great about there daily job.
2
Inclusivity
Our products serve a variety of users, ranging from employees to fleet owners who may not be too familiar with modern-day technology or may not have access to the best MacBook computers in the world. We aim to design and build our platform to be viable for as many people as possible, regardless of their abilities, age, or location.
3
Simplicity
We believe that simplicity is key in our design, especially since our product is used 24/7 by our users. We want to make sure that using our platform is not frustrating, since it's essentially a job for our users. Let's make their experience as smooth and easy as possible! 😊
4
User-Friendly
We deliver delight and satisfaction through a clean and focused experience every time. By relying on existing, common design patterns that are intuitive in form, function and flow, we ensure a more user-friendly interface for all
5
Consistency
We create familiarity and strengthen intuition by applying the same solution to problems across our platform’s Structure of Design System
Let’s Define our Design System
How we came to new system in place?
The process followed when solving this problem consisted of 3 phases, below is an overview of the latter:
