The FMS web application was developed without having a UX designer from the beginning. Application had grown exponentially with no proper design to follow and had been developed with a lot of inherent design problems. Different features and components were not in sync in terms of UI and UX and also were visually very inconsistent. Most of the features were added to the application on a need basis at different points of time. These additions and changes had happened over a long period of time with none or different designers involved. This problem got worse when more new features were to be added and application had to be to scaled up to cater to more number of users. The whole application experience was a at low point due to these problems.
Pulling up the entire experience and notching it up to a new level was the need of the hour. Along with redesigning the UI and improving the usability of the application, new features in the pipeline had to be designed without compromising on performance and consistency.
- Business Analyst
- Lead UX Designer (me)
- Product Manager
- Project Manager
- Engineering Architect
- Development Engineers - 8
- Quality Analysts - 4
Time line:3 months | Ongoing
Roles & Responsibility
Following were my tasks & responsibilities:
- Interactions with clients to understand their needs and requirements.
- Conduct user research to get insights about their pain points and needs.
- Complete design strategy and implementation.
- Facilitate ideation and brainstorming.
- Sketching, wireframes
- Present the solutions to the clients and receive sign-off.
- Support visual design.
- Hand over from design phase to development phase and follow up.
This case study will be detailing only one feature of the application and not the entire project.
Lets take a closer look at the feature that is being considered - Vehicle Track.
Vehicle tracking is one of the most common tasks for a fleet operator. Tracking these vehicles allows fleet owners to keep watch on their vehicles and their drivers, so they can utilize them better and to fulfill their customer & clients needs effectively. This also helps them know more about fuel waste, fuel theft, best routes, reduce maintenance costs and also make customer service more positive.
Vehicle tracking has the following on the application:
- User is able to select a vehicle from the list or search for a vehicle to locate the same on the map.
- Selected vehicles current location will be identified using GPS and it will be reflected on the map
- Vehicle parameters such as fuel level etc. is also provided to the user.
Research was planned as below:
- Heuristic evaluations : done for each individual tasks with identifying relevant functionalities.
- Interviews : semi-structured questionnaire with open ended questions so as to probe more insights and identify problems faced by users.
- Usage analysis : provided insight about the extent of application usage by end users
- UsabilityUsability tests : to understand and identify issues faced by user while performing their daily tasks
- Observations : observe how the users at their work place and note the interactions with the portal.
Understanding the flow of information was key here since there were many systems & processes involved along with lot of data being sent across various channels.
A thorough evaluation was done for each and every page within the applications and a report was submitted.All the changes and modifications that were needed to be done were prioritized and listed. .
Usability issues identified :
- Map is an important part of the screen and this was not getting enough screen space.
- Information was not grouped and not in any specific flow to follow.
- UI was not aesthetic and was not an attractive page for users to use even though it was one of the most used feature on the application.
Knowing the information flow helped us fairly identify the key users with whom we would need to interact and get more indepth understanding of how the applications is being used and the problems they face. Fleet operators handle most of the fleet operations including - vehicle engagements, track vehicles, fuel utilization, vehicle maintenance - service & repairs, driver engagement and assignments, so on and so forth. They identify the gaps, profits, losses and optimize operations for maximum growth. They are also the key decision makers. It was also observed that in many cases fleet operators were also the fleet owners.
Their technological inclinations, pain points and behavioral traits were observed and noted.
- During interactions with users, it was observed that users were confused with the placement of the info – scattered all around the screen. Task tests helped to validate this.
- Observed that users made note of the information on paper to comprehend it and to be able to refer to it later quickly.
- Users did not seem to be very reliant on the application for their main tasks of tracking vehicles
- Lack of visual format and structure for the reports made it very cumbersome and time consuming to understand the stats.
A lot of fleet owners were also fleet operators for their fleets. Based on all of these outcomes and observations persona was created for Fleet Operator user.
Ideation part was most productive. We had most of the team join and bring in their ideas, use cases and scenarios. We identified and prioritized scenarios and use cases and carried out paper sketching, white boarding, task flows and analysis. Through lot of iterations we had came up with many sketches and lo-fi wireframes for the interface design.
Collaboration was key here. Tasks had to be broken down to its smallest bit and discussed how it can be redone to simplify and keep user actions to a minimum
IA & Navigation Flow
All the interactions were mapped out and the functionalities needed at each stage was identified. Based on these navigation flows were created along with all the branching logic.
Layouts & Wireframes
Once the IA was set, we delved in to sketching out the UI and looked in content placement. Information design was the main challenge. There was too much information that was seen as important information required by users at different scenarios. Various version of the design layouts were sketched and discussed.
Simple sketches with minimal info were quickly done and iterated to understand, identify and decide on the most suitable layout to place all the content of various formats.
A lot of wireframe versions similar to the ones below were done iteratively based on best suitable information arrangement.
After multiple round of iterations of wireframes, we finalized the wireframes and prepared a lo-fi prototype to take it to the users for validation.The prototype was a minimalistic interactive prototype done using Marvel app. Taking their feedback further changes and tweaking was done.
After validations were complete and complete sign of was received, we moved to create Hi-fi wireframe. A style guide as a living document specific to the application has been provided, which is being utilized by the engineering teams.
Results can be summarized as follows:
- Simplified UI with single, straight forward approach to tasks.
- Users were able to complete the same tasks as before with more accurate results.
- Users were able to complete the tasks in lesser time – about 82% lesser time.
- Reduced cognitive load for users while performing tasks thereby reducing the confusions.
- Learning curve for understanding the working of the app came down significantly.