Drive 47
Experience better car rentals
Tl;dr: I made an app concept for renting a car. Check the interaction video below to see what it does. Have a nice day!
What is this?
It’s a concept for renting a car around the user’s location.
What problem am I trying to solve?
Currently, there are very few or no car rental apps that focus on users. What I’m trying to do is give the user a friendlier, faster way to rent cars around their locations. Since car rental is too vast a use case to be tackled, the primary target for this concept is leisure car rentals.
Renting a car should be more intuitive. Functionally should be simplified and adapt to today’s usability patterns. Like how Uber made the entire taxi service fit in to one screen, I want to make the renting easier, faster and more approachable by users.
Constraints
Without constraints this concept will be never ending and less challenging. So I framed set of constraints which I followed in every aspect of this project.
- This app is primarily for India, but can be adapted for global audiences
- Use existing data from third party app which is available in the market and successful.
- First design will be the MVP, and include only basic features.
- Should be a realistic design — development constraints are applicable
- Connect the interfaces with a story, not a constraint but a goal.
- Target 80% of the use cases.
Initial sketches
Moodboard
When I set to find out how the app should feel and look to the user, first thing that came to my mind was that it should have character. Character makes an app memorable and connect the interface with a story. With Drive 47, I want to give the user a warm experience while going through the app. Instead of reinventing the wheel, I decided to take inspiration from popular apps for interface ideas. My inspirations didn’t stop with just static UI screens but photographs, games and even architecture.
Final Design
Once I finished my initial sketches, I jumped into Sketch and made some quick mocks. Over the course of the design, everything went through iteration except for the landing page. I’ll start with that.
The Landing Page and Searching
When the user opens the app, this is the first screen they are greeted with. I want this page to be refreshing and super simple to use. I wanted the title to be a simple question about renting a car and positive answer below to encourage the user to initiate the search.
Road trip? Rent the best car to experience it
More on personalised titles a little later…
Landing animation: Since iOS discourages the use of splash screens, I decided to use the illustration as semi-splash screen, so that when the application loads, it will delight the user with a small animation.
Calendar: Since start and end date are important parameters for this search to happen, I’ve put them at the forefront of the page. Horizontal scroll keeps the content compact and make it simple to read from the top to bottom.
Searching: Instead of having a simple loader as an overlay, I decided to keep the same screen and use a friendly copy while it loads the next screen.
Personalised titles on landing screen: Personalising the experience will always make the user happy. Personalisation can be tailored based on the rental data and destinations which are popular at the time
Search results and Filter
The user’s primary interest in this page is to see results and customise it based on their interests. The title also acts as date changer here, as it prevents the user from jumping back to the previous screen to change dates. Pick up location is chosen based on the user’s current location. However the users are allowed to change the location at anytime from the pick up menu.
Card layout: Each card represents a car and on tapping them, it expands and shows the details of the car. This layout encourages the app to load content dynamically while the user is swiping through cars. Card layout also mimics the traditional approach: You go to a physical shop, see all the cars and pick the one you want to rent, ask more details about the car and book.
Filter: Straightforward and simple. Available from the top right corner, users will have access to change their basic preferences.
The cars are sorted by distance and popularity. As the user swipes further, they will start noticing that the distance pointer in the card keep getting darker. This is a small detail that will let the user know that the car is far away from their selected pick up point. This is very useful when the search locality is large
Other cases include car not available for the particular date or the location they searched for. This feature will come in great use for users who are flexible with their dates or pick up location.
Worse case scenarios? Covered. When the user swipes till the end they will see a final card — the help card. It will ask the user to fill out what they are looking for. Drive 47 will notify the user if it finds something close to what the user wants.
Car details
When the user taps on the card, it expands to a detail view. The basic flow of the car details goes this way:
Photos → Features → Price → Reviews → Location
I will let the video and the design mocks below to explain the rest of it.
Review block: I took a different approach for this block because I feel that sometimes, just a number doesn’t represent how good a car is. That’s why I brought in the idea of compliments given by previous users. Compliments are generally one word that users choose from the list of other complimentary words in the review (Check compliment screen below under blank states, permissions and more) The most complimented word will be in the top. In this case — ‘Best in class’
Let’s book a car
When the user decides to book a car, there shouldn’t be screen coming up next to scare them away by asking too many questions. That’s the primary objective of this flow. If the user is already signed in, then he/she can rent a car by tapping just one button — the Pay button.
Add your details → Add your card details → Book
Being realistic with the design, I also added a clear message informing users that they need a license to rent the car.
Setting up an account: When the user clicks on “Who is driving?”, they come to the account set up screen. I felt this is a better way to ask the user to set up their account because many times the context for the user to set up an account just goes missing. I also added friendly reminder that the app will not spam them — one of the strongest fears a user has when they set up an account with any company today.
Payment: Adding a credit/debit card should be easy, but typing 16 digit card numbers don’t help here much. Scanning card via camera comes handy here. Users can scan their card, then verify and add it. They can of course skip the scanning and type the card number manually.
When the user pays, he/she is greeted with a confirmation screen with more details on where to pick the car up from and where to drop it off at.
Blank states, permissions and more
All these states connects the interface with same story & theme. This gives the user an unique and delightful experience, which something they will remember for sometime.
Bonus: I wanted Drive-47 to change with time. It doesn’t feel right to show the user a big bright sun when they open it at 9pm in the night, So I decided to make the illustration change for day and night. Even though I haven’t show this change in any other screen, it reflects everywhere. I believe all these tiny states add up to giving the app character.
Asking location: When the user opens the app and searches for the first time, they will be shown the permission screen for location access. However it is optional. If the user chooses to allow location services and still wants to change their pick up location to some other location, the search location screen will suggest a nearby location just below the search field as a quick action fields.
Getting feedback about their trip: Straightforward and simple. Users can skip these and go back to the search screen anytime.
Style guide
Drive 47 is a friendly and playful app. I had to choose a typeface which doesn’t have a rigid or a trendy character. Avenir Next seems to be a very good choice. It’s classy and one of the best typefaces that work well at even 12pt size in a small screen. It’s also pre-bundled with iOS.
I decided on a limited colour palette. Spring green felt young and vibrant. It is refreshing and fits well with the overall theme of the Drive 47.
Name and App icon
Drive 47 — Why? When I wanted to name the app, I wanted it to act as a call to action in the home screen. I want it to shout to the user that they need to go for a trip. Drive seemed to be an obvious and clear option. In India, most of the states are connected by National Highway-47 (NH-47). I used this number as a cue to tell the user that they should do an interstate drive with their friends soon.
What I learned:
This project was suppose to be finished before December 2015 from my initial estimation, but it got pushed by a month. So,
- Never to underestimate a project.
- Understand business and design to meet its requirements. Users are important, but don’t forget the business.
- Iconography is something I should work on.
- Never forget edge cases. Solve all cases, even if it’s just a concept.
- Anything else I should consider? Comment here and I will take it as feedback
Resources and attribution
Starting with this project, I’ve decided to make all the files and resources of my concept projects public. You can see my iterations, my approaches in these files. For this project I’ve attached the Sketch file, Pixate prototype file and other resources. I felt I’ve not given back anything to the community I owe so much to, so here it goes
After Effects file for the presentation
I’m very thankful for
- Kickass iOS 9 GUI framework from Facebook design team.
- Netcarshow for amazing car pictures
- Zoomcar for their data and approach
- Trees in the illustrations designed by Freepik
- Diverse Device hands by Facebook
- The Noun Project and their brilliant designers for their icons
Following icons were used for this project:
Highway by Claire Jones, Note by Simon Mettler, Bluetooth by Thomas Le Bas, Van by Alexnihilo, Hatchback by Ruud Smit, Sedan by Ruud Smit, Stationwagon by Ruud Smit, Minivan by Ruud Smit, Steering Wheel by P.J. Onori, Key by Les vieux garçons, Steering Wheel by P.J. Onori, Laugh, Sad and bored by Rodolfo Alvarez, Compass by Creative Stall
Thank youI am Suganth, Product Designer from India. If you like to talk to me more about this project or anything else, just mail me at suganth@live.in
