Rent a car and move around with low emission vehicles.
Powered by Hyper
Thousands of people in London every day need a vehicle to move from point A to B, whether it's for commuting to work, visiting a friend, or picking up groceries. They can simply choose a monthly plan and use the vehicles at any time they need to.
The user needs to find the car, unlock it and start a ride. Let's see how did we handle the UX design in the most crucial screens of the app.
As the user would expect, it's easy to spot their location and the available cars nearby. By swiping the cars' cards at the bottom of the screen, the selection automatically moves on the map to mark the related car. The same dynamic works the other way around as well.
The green badge with the number 7 indicates that there are 7 more cars. If users zoom the map in, all cars can be seen.
To start a booking process, the user needs to tap the button at the bottom.
Car is waiting
In this screen, it's important for the user to understand that:
- The car will be waiting 20 minutes,
- they can start the route to easily find the car,
- they need to pay attention to the plate number.
Unlock the car
When the user approaches the car, the message pops up saying "Here you are!", which indicates the car is next to them. They can double-check the car details one more time before jumping in.
We wanted to make sure the user will check the damages first before unlocking the car, so we made this button in the primary colour, which increases the importance of tapping it. It kind of makes you think that you need to tap the button, although it is optional.
At the bottom, the user can easily unlock the car, but not as easy as it would be with a tap, because we need to make sure the button will not be tapped by an accident. Sliding seems just about right - a little bit more effort to do it, but still very easy.
When the user is driving the car, they can easily tap on the closest fuel stations and parking places, which will show the route either in this app or a third-party one. The bottom bar can be minimised so that the map can take a larger screen real estate if needed.
At all times, the user can see how much driving time is left for this month. Sometimes there will be a promotion running so that the user can increase their driving time by tapping the red gift icon and following the instructions.
Depending on the monthly plan, some users need to park the car back at the pickup point when they're done. To do so, there is a green icon with a roof above the car.
If the user need help, there is the siren icon which opens several options.
Whether the user is unlocking or locking the car, the design is using the same UI elements to keep consistency.