How I redesigned Trip Stats in GoMechanic’s GoConnect OBD?
GoMechanic’s GoConnect is an OBD (On-Board Diagnostics) device that connects with your car’s OBD port and lets you keep a track of the vital parameters of your car.
What’s GoMechanic and what do we do here?
GoMechanic is India’s leading multi-brand car service and spares platform based out of Gurgaon. GoMechanic enables car owners to book appointments for car service and repair through its mobile app.
Driving a connected car is the new normal and for those who still own some old gems GoConnect is just the right solution to keep up since most news car come with connected tech right from the factory.
Problem Statement
The current stats page served as an initial proof of concept to validate the product and also missing the features which our competitors were offering to their users.
The task was to recreate the trip statistics screen since current screens were not very intuitive and lacking additional features that we wanted to introduce.
It allows our customers to keep a track on their vehicles and get the following information:
- Trip Details like distance, time etc.
- Journey Map with trip start and end.
- Driver Behaviour Alerts.
The above mentioned list of features was enough for me to know why we are doing this. From self employed people to parents who drop off their kids to school and petrolheads looking for more data while driving, GoConnect provides inexpensive solution when compared with a stolen or poorly driven car demanding frequent repairs.
Breakdown of Current Screens
Though previous version was directly developed without being designed first, it gave me a fair understanding about what’s in it for us.
Let’s break down these screens and inspect the design to understand how it works, and the intention behind each decision.
Scope of Improvement in Current Design
After breaking down the components in the current, my critical thinking turned on and I analysed what all can be improved in this design.
I checked with the frontend team as to why we are showing the trip map on a different screen and not the same one. The reason was that API for map was slow and having so many API calls together increases the page load time.
Now the backend teams have optimised the response time and the map can be displayed on the same page.
Competitive Research
I looked at some of the apps providing OBD as a service to understand how they present the information.
Almost all the competitors were following a similar pattern. The common patterns I noticed were:
- All of them have a trip map.
- Start and End Address of the trip
- They are able to show the exact location where alert was triggered
- They also have almost all the data points that we have to show.
Additional Information we wanted to show
Since the product was evolving, more data points were available from the car info API. Below is the information we wanted to show:
Again, I checked with backend team to see if we have this information available and I was informed that it can be made available based on latitude and longitude data. I then convinced our frontend team to show these to users so that they can better manage their trips and keep a check on their driving habits.
Wireframes
Keeping in mind the insights collected from competitive research I started with wireframes and experimented different layouts. I finally narrowed it down to a few ones that I felt would convey more value to the user.
Final Design
Now users can clearly view start and end locations of trip on the map and the addresses as well. Along with this, all the information was structured and organized in a better way.
Impact of the Design
Marketing teams began using the picture of this page for branding and social media which lead to unexpected bump in the sale so much so that we had to disable the purchases on frontend and were enabling it as and when we were getting a new batch of devices from our partner.
As a result of increased sales, the page visits increased manifolds.
Next Steps
We are brainstorming about giving a timeline of all the alerts issued during a particular trip. We can also iterate on the placement of speed indicators or may be integrating them with map.
