Whip
Whip is a concept app working as a car remote, maintenance & driving monitor.
Concept Project
Made during a UX course at "Create"
Guided by Lior Yair
Shaping the Concept
Working on this project was the first time I tried my hand at UX/UI. It started as an exercise during a UX design course I took. The task was to come up with a mobile app, that can be used as a "smart remote" for a car.
Some people enjoy driving a car, some are less excited about it. I absolutely love it and think our cars are much more than a way to get from point A to B. Almost every modern car is equipped with a computer which provides control over various components of the car, including the engine. In this app, I wanted to offer more than just the comfort of a remote engine start, so I decided to include the following as well:
Air conditioning
I live in a country where summer spans over nine months of the year. Getting in a car that stood outside for a whole day is the worst, so I wanted to implement a remotely controlled air conditioning.
Maintenance monitor
Many drivers have somewhat lacking knowledge of the technical nuances of their vehicles. I regularly see cars running on "flat" tires and drivers stuck with a "dead" battery. Not every driver should be a car mechanic, but being aware of the car's technical condition saves money and lives.
Driving insights
Another well-known issue is bad "driving habits" that are formed over time. We all are bad drivers from time to time. A bad day can put you into a negative driving mode, just as good news can reinforce positive driving. Yet, some drivers may develop a bad "driving habit".
There are three major factors of bad driving, eventually causing accidents:
-
Distraction (using a mobile phone, eating while driving, kids etc.).
-
Reckless driving and speeding.
-
Driving under the influence of alcohol or drugs.
I'm not expecting this app to change driver's habits, but rather guide them towards better driving. I wanted to implement some type of feedback on the user's driving quality.
UX & Design
Structure & Wireframes
I didn't want this app to cause distraction, so I preferred to leave music or navigation to other existing apps. "Whip" consists of four main screens:
-
Remote
-
Dashboard
-
Insights
-
Profile
Onboarding flow
Connecting a car
After the onboarding, the user is asked to connect the app to his car. NFC and RFID technologies are common in our days, so linking between the app and the car is done simply by placing a car's remote near the phone. After a few moments, the connection is established and the car model is displayed on the screen.
Remote
This the main screen. Here the user can start his car, adjust the AC temperature, and switch to his navigation app, if needed.
Dashboard
This is a maintenance monitor. It provides basic information on the car's mechanical condition and alerts. Tapping on each item displays basic tips and explanations.
Insights
This screen displays the data collected during each ride. The app detects accelerations, changes in direction, and other inputs and provides a drive summary.
Profile
Profile is used for managing your cars and basic settings (measurement units, notification controls, etc.)
UI Design
I used the automotive and racing world as an inspiration, emphasizing bold colors and typography.
Same with the icons, used in the dashboards screen - they are standard and recognizable.
The Final Flow
Connecting The Car
Remote
The most challenging element for me to design was the air conditioning controls. Initially I thought to display the temperature adjustment on the Remote screen (like shown in the wireframes), but it looked too clumsy along with the rest of the elements. I decided to create a separate screen for it and make the controls larger and clearer to use.
Dashboard
As I mentioned, the dashboard screen provides technical data of the connected car. When the driver's attention is required, for example the oil needs to be changed, he receives a push notification. Tapping on the "Oil change" will display basic information and tips.
Insights & Profile
Insights screen shows the overall driver rating based on driving quality. Things such as hard accelerations or sudden braking affect the rating. Users can monitor changes in their driving and check the detailed information on each ride. Profile screen is used for managing the cars and basic application controls.
Dark Mode
I realized that some drivers will prefer a bit darker appearance of the application, so I designed screens using darker shades of grey.
