Pitstop is a canadian company, and an app that connects your mobile with your car and dealership, predicting possible fails on your automovil.
Here I developed a logic information functionality of the app, the diffusion of the app updating social networks and recently building a new branding for whats gonna be the next version for the app.
The company needed to redesign the brand, but without changing the most recognizable part of the logo. It was also necessary that the brand changes in the future but in a gradual way. So this first part was focused in to build a more modern, fresh and tech look through adding light, energy and contrast that will give a variety of elements that permit us to create a strong branding.
Keeping the blue, the palette was changed to stronger shades, adding light through a gradient. This will allow us to have a more playful element and give more movement to the look of the brand, both in the app, as in stationery and social networks. Movement was also added to the shape that contains the P, creating a powerful and recognizable icon at any scale.
A first part to highlight in the context is that the app contained four main pillars of actions.
First, it let you scan your car with a device and to have a complete report about it. Second, you can also know the services needed by the car by following the mileage of it. Third you can request your next appointment with your dealership. And last, the team was working on to have a record of the trips maded, with the option of have a historical trip´s action´s list that will give the user a detailed report about their driving and how to improve it.
All this sections needed a herarchy, and a clear way to communicate the main actions and the secondaries to the users.
A second part to hightlight, was that the first point was totally represented in the menu. Where the structure does not follow the logical order of reading, nor builds a hierarchy in the path.
Pitstop previous menu
A hierarchy is defined, where the car is located as the main object and based on this, two main actions: car scan and record trips, these two will be our main pillars. Those two answer to “Whats the status of my car?” as a main question.
And book an appointment will be considered as a secondary action as result of the car´s status.
And a third part in the pyramid, is to record a trip, as this is an extra tool for the dealership to then can evaluate the state of the car and the possible failure´s causes.
With a hierarchy defined, we can build the complete structure and order of the information on the app. We will see the reflect of this in every part of the app, from the menu, to the communication, the user´s flows, etc.
Now with a hierarchy the first part is to reflect this hierarchy on the Menu’s design to then work in the main structure’s information architecture.
Proposal for new menu
New flow proposal´s for UX using the old designs of the app
Proposal flow map
Case: Services and Scan
One of the cases that I worked on and that I would like to highline is about the logistic of the reports that the app can give to the users about their cars.
One of the requirements by the CEO was to make that users should not depend from a device in the car to have a scan about it. And put away the idea that if the users dont have this device, they cant use a complete version of the app.
– A way to make a report about the car was having the car’s mileage’s data, that users give to the app. In this way if there is mileage, there is always be a report about which services the car soon will need, after this, they can also book an appointment. This action was called Services.
– By other side, another way to generate a report about the car, was when the user had an specific device connected to the car, this will give all kind of data to the app. Since engine codes, to recalls and more, translating millions of lines of code. But, it will not generate any report, if there is no device. And the whole section will looks empty, without any kind of answer by the app. This action was called Scan.
This two ways for have data from a car, was built in different ways for the developers, because there was different systems to have data from the car and make a report about it. But was not necessary to transfer this difference to the users.
After some users interviews we realized that most of the users got confused about this difference and they felt they needed the premium version and as they didnt saw any report without having a device they just deleted the app. The users just needed to have a report about the car no matter what and we also wanted always to give a report.
The mistake was that a difference in the way the code was built before was reflected also in the design and we were making a difference between users without wanted. So we needed to change the design to not reflect that and communicate well the service we were giving.
Part of the solution was to merge Services, which delivered reports following your mileage information and Scan, which delivered reports by reading the data of your car through a device, in a same main action now called Health Report.
So that within the user’s interaction with the app, the user when requesting a report, would always have a response from the app. This solution would not exclude users who do not have a device and that situation would be eliminated.
New design´s proposals for the app
All the guidelines and library for the app was build from the new branding and new concept. If you see the user flow previous screen and the new proposal, I worked building a visual hierarchy creating different values on sizes, colours and iconography, to reflect the new image of the project. A modern, fresh and flexible that search to give a fast, useful and friendly service to their users.
Pitstop also had created a software to can track data from car fleets that are using the service to predict possible failures and do maintenance.
Here I did maintenance from the design and contributed solutions for a better data delivery and a good data visualization to both the car dealers and car fleets.
Proposal for the Appointment’s section for the fleet cars user view:
Proposal for the Trip History section for the fleet cars user view: