Revolutionizing the vehicle key
by designing a mobile app that allows users to control and share their vehicle without a physical key.
Project Type: Contract
Timeline: 8 Weeks (for MVP)
Team: Graphic Designer, Developer, Engineers, Product Manager
Role: Product Designer
Research, ideations, wireframes, user flows, prototyping, usability testing, UI, design system, handoff
Project Status: Expected to ship in Q4 2024
OUTCOME
Reached a deal with Voxx electronics, a US public NASDAQ company for them to be exclusive licensee for hardware (attached to app) key, worth minimum 10 million USD
Lightwave Technology designs, manufactures and markets connected automotive products.
Ekey is one of their solutions that’s been in research and development for the past 5 years, as they have been developing a special patented hardware that allows the user to control and share their vehicle without the need for a physical key fob.
The Problem with Physical Vehicle Keys
They’re easy to misplace, time is wasted stressing and searching
Sharing can be hard to coordinate
They’re bulky, uncomfortable and annoying to carry around
What About New Technologies?
The vehicle key has evolved from traditional key, to key fob, push to start and now the smart phone. Modern companies such as Tesla, or evolving companies such as Mazda or BMW have introduced the smart phone as the new car key. However this means that vehicles from different makers or older models are getting left behind.
The challenges with current App Keys
Inconvenient for secondary user to gain access
Owners worry about access limits and limited control
Time consuming finding features
Not compatible with all vehicles
A mobile app that allows users to manage, control and share their vehicles in a way that is tactile, convenient, efficient and secure
That’s where ekey comes in
CONTROL
SHARE
RESTRICT
My Design Process
1. Discover
In this step, I aimed to dicsover:
what and how similar products (car keys or mobile apps) are designed and function, who its users are, and what they like and dislike.
Methods: Competitor Analysis & User Interviews
Discover
Define
Develop
Deliver
First, I conducted a competitor analysis in order to identify other products on the market, what they do or don't do well, and potential opportunities.
Strengths
-
Simple, Tactile, Familiar
-
Physical Feedback
-
No learning curve
-
Secure authentication
-
Seamless integration with IOS and Android
-
Background mode
-
Nice and functional
-
Users could set specific limitations when sharing car
-
Integration with vehicle features
-
Intuitive Interface
-
Interactive elements using animation
-
Intelligent voice assistant
-
One tap access
-
Sleek UI
-
Personalized User Profiles
Weakness
-
Easy to lose/destroy
-
Sharing is inefficient and inconvenient
-
Safety risk from duplications
-
Limited vehicle compatibility
-
Battery Dependent
-
Network dependent
-
Navigation challenges
-
Complex Setup Process
-
Limited key customization
-
Complex setup process
-
Limited vehicle compatibility
-
Poor visual design
-
Learning curve
-
Only for Tesla
Next, I conducted user interviews to gain a deeper understanding of the pain points and frustrations people have when they are using their car, sharing their car or borrowing a car. In order to get a 360 understanding, I wanted to interview a variety of users. After all, many different people drive cars under different circumstances.
Interviewed 6 participants whom fell under the category of at least 1 of the following:
-
Currently owns a car and uses traditional key/fob
-
Currently uses an app to control car ( Tesla, BMW)
-
Shares car(s) with members of the same household
-
Shares car(s) with family/friends outside the household
-
Have borrowed cars
-
Have rented their car out via car share
-
Parents, adult children, singles, partners
-
-
Can you walk me through the last time you used the key to lock/unlock/start? What did that look like? How does it work?
-
Have you encountered any issues or difficulties with the key’s lock/unlock/start features? If yes, could you describe those situations?
-
How do you feel about the convenience and ease of using a mobile app to lock and unlock your car compared to traditional keys? Which would you prefer and why?
-
-
How often do you share your car? If rarely or never - why ? If often, why?
-
Who do you share your car with?
-
Can you describe the situation in which the last time you shared your car?
-
How did you achieve the sharing process? Were there any difficulties?
-
Which would you prefer- sharing your car key with someone so they can borrow your car or using a mobile app to invite users to drive your car? Why
-
*Have you used the app's scheduling or permission settings to manage access for specific individuals? How well does this feature work for you? (if interviewee is a Tesla driver) *If participant is using app
-
*Do you have any concerns about security or privacy when it comes to sharing your car through the app? *How does (app) address these concerns? *If participant is using app
-
-
How often do you find yourself borrowing cars from friends or family members? Can you describe the typical situations when you need to borrow a car?
-
Which do you prefer: to borrow a car rather or to use other modes of transportation? Why?
-
Can you walk me through the process of borrowing a car? How do you usually arrange car borrowing with your friends or family members?
-
Have you ever encountered any challenges or difficulties when borrowing a car? If yes, could you describe those situations and how you handled them?
-
What do you find most important when borrowing a car from someone else?
-
How do you ensure clear communication?
-
Have you ever used a mobile app or digital platform to facilitate the process of borrowing a car? If so, what was your experience with it, and what features did you find helpful?
-
How would you feel about using a mobile app that allows you to request car borrowing and handle permissions, scheduling, and communication in one place?
-
How would you feel about using a car-sharing app that tracks your location and speed or restricts your speed. -
Do you have any concerns about safety or security related to using an app to coordinate car borrowing? How do you think those concerns could be addressed?
-
-
Can you walk me through the steps you had to take to set up your car and app?
-
How would you rate the experience on 1-5 in terms of easiness to follow
-
How long was the learning process? (How many times did it take you to learn how to use the app)?
-
How would you rate the app's user interface in terms of ease of use and intuitiveness for accessing the car's functions?
-
Are there any additional features or improvements you would like to see in the app related to car access control and start functionalities?
-
*How frequently do you use the app? Why so little/so much?
-
Key Insights
The Pros of a Physical key
“I like using a traditional key because I’m used to it and it’s tactile and responsive. I feel when I press the button.
-Hannah 27, Traditional Key
Usability Issues
“It’s difficult to find how to add wife as driver”
-Mac 34, Tesla
Security Fears
“I’m worried about security, forgetting to revoke access, and trusting the person not to crash”
-Robyn 48, BMW (Digital)
My Design Process
Discover
Define
Develop
Deliver
2. Define
Using data from the discovery stage, I defined the main problems and design objectives.
Main User Problems
Ekey’s technology allows the user to unlock, lock and start vehicle via their app in background mode, meaning the app doesn’t even need to be opened often. However, the user will need to open the app when: adding vehicle, using additional key functions, adding a driver, and troubleshooting. Thus these are the three main problems defined:
Complexity and Unfamiliarity
Existing key apps have complicated set up processes which either frustrates users or deters from trying at all. In addition, an app should have the same simplicity and familiarity as a physical key
Evidence: Competitor Analysis & User Interviews
Sharing is Complicated!
Whether it’s coordinating physical key swapping, adding a new driver to an existing app or managing multiple drivers, sharing your vehicle gets complicated. There is a need to share your vehicle in a simpler and more efficient manner.
Evidence: Competitor Analysis & User Interviews
Losing Control & Distrust
People are hesitant to lend their vehicles to others due to uncertainty about how others drive their car (speed, location). Also with giving digital access- they want to know that they have control over the access.
Evidence: User Interviews
Design Principles
Before I started developing solutions to the main problems defined, I set a list of guiding design principles. This ensures that each decision made is specific solution driven.
Using eKey should look and feel like a modern experience, yet simple and familiar.
Modern & Simple
Sharing made Easy
The designs should allow the primary user to easily add and manage other drivers. The experience should feel intuitive for both the primary and secondary users. In addition, it should be intuitive for the secondary drivers to join.
Control & Secure
The ekey app should provide the users (primary owners) the feeling of security by giving them the ability and flexibility to control secondary driver access and monitor activity,
My Design Process
3. Develop
With main problems and design objectives defined, I started to develop the solution. I did this by:
-
Designing structure & flow
-
Sketching & Wireframing
-
Designing sleek UI
-
Testing & Iterating
Discover
Define
Develop
Deliver
Designing app structure based on needs
To begin designing the app structure, I led with the main needs and functions: Garage to add and control vehicle, Share to invite and customize drivers, Settings for typical needs and Status for troubleshooting
Primary Vs Secondary User
I also considered the two different kinds of users. Primary Owner (the owner(s) of the car) and the Secondary User (the person borrowing or renting the car). Because a user can be a Primary Owner for one car, and a Secondary User for the other, we settled on using the same structure. The only difference is that 'Share' has less features for a Secondary User.
Primary User
Secondary User
Both images above are screens for car sharing. In the first image (left), the primary user can add new driver, and view or manage current and past drivers. On the other hand, the secondary user (right) can view their access period, owners of their car and restrictions set.
First Flow Creation
Although this changed as I got through Wireframing, this flow was my starting point for achieving my focus areas of:
-
Setting up
-
Adding a car
-
Sharing car
-
Setting restrictions
Sketching Out Ideas
Putting pen to paper is always a good way to get my creativity flowing. I sketched options for key items: Home, Add Vehicle, Add Driver. Shortly after, I moved to digital wireframes.
Moving it to Digital
Before starting to build out wireframes, I looked at other apps in the industry. I particularly noticed that a lot of the home pages were super busy, and setups could be complex. When sketching my wireframes, I really tried to focus on simplicity and ease of use.
Note: Smartcontrol was the previous name which was then changed to ekey. Even so I removed using the logo inside the app except for when starting up the app.
Mistakes I Learnt from
-
As seen in the second image, I created buttons that were too close together. Although these are mid-fi, it wasn't much thought about until discussed with my team.
-
When dealing with complex processes, wording is super important and can disrupt the entire flow
72
Designing UI
Ekey is modern, sleek yet simple. To reflect that I really aimed for simplicity using a modern typeface, dark mode, and grey neutral scale. I collaborated with a graphic designer to for key icons.
Testing The Designs
I tested Ekey on 6 participants, all of whom are drivers, some who have used app keys or car sharing apps before.
Goals:
Evaluate users’ understanding of product and tasks
Evaluate how quickly and easily users can complete tasks
Determine any errors
Task: Add Vehicle
40% did not tap correctly on the first tap
Insight: add “Add Car” to make button more clear
Task 2: Add Driver & Restrict
60% users tapped the correct button (share in nav) on first tap
80% completed task and setting restrrictions
Insight: explore ways to make share button clearer
Task 3: Key not working,
user must solve problem
0% users tapped on the help tab
80% had indirect success
Insight: All users click on the connection button rather than the help tab
Feedback: Look & Feel
I couldn’t accurately test the feeling of the key controls as that must be developed but I did get feedback on the look and how it felt overall.
“I liked the overall layout of the application, easy to understand and follow steps”
“This is so great, feels new and feels intuitive!”
“Overall the language, imagery, icons, and layout all made sense.”
Revisions
I then took the results and used them to iterate and improve the design.
1. Added “Add car” to make action more clear.
2. Changed “Help” to “Status” because no testers tapped on help to view connection status. This makes it more clear what this function does
3. Key controls (based on feedback from team)
-
Using red and green (same as error and success) is confusing and not clean.
-
Lock and Unlock were made bigger because they are the most commonly used.
-
Added “more” for customized keys in order to preserve room. Usually these functions won’t be commonly used.
4. No changes to Share. I explored adding a share button on the screen but it made the screen appear cluttered and would be redundant.
Design Process
4. Deliver
After many meetings and iterations, I handed off the final design to the developer.
However, we have already begun to discover new problems and will repeat the process for future priorities.
Discover
Define
Develop
Deliver
Final Design
Invite Driver with Customized Access Levels
-
Clear steps set
-
Information Icon to explain the access levels
-
Radio buttons indicate only one option can be selected
-
Easily select Start and End dates and Time
Customize Key
Users have the option and are guided on how to customize their key based on their physical. This ensures familiarity and that the app can do everything the physical key can.
-
Clear Instructions
-
Selected Vs Non selects
-
Option to skip
-
User is notified new key is created and instructed on how to use.
Easy-Guided Setup
In order to make the setup as smooth as possible, we broke it down into four steps. I made sure that each step has:
-
a brief explanation and tells the user how much time each step will require.
-
clear instructions, and uses check marks, telling the user the stage they are at in the process.
Simple, Responsive and Tactile
It was crucial to design a digital key that is simple, responsive and tactile. Lock and Unlock buttons tactile but also provides a response/confirmation so that user can feel secure. The rest of the buttons vibrate as well. This is to mimic the feeling of a physical key to ensure familiarity.
-
Press to hold, once command is received, message is displayed and then reverts back to normal.
-
Press to hold & vibrating button.
-
When car is out of range, the buttons darken to signify they won't work. If the user taps anyway, a message will appear.
Next steps
Future plans include:
-
Introduce speed limits
-
Introduce geofencing
-
Introduce Help/FAQ page
Learnings:
As I worked as the sole designer in conjuction with engineers, I learnt a lot about communication. At the stakeholder meeting I asked helpful and insightful questions but as time went on- more and more questions popped up. Some - I would ask the wrong person, who would then ask someone else and get back to me eventually, and then another team member would interject with a different response. Looking back I would definitely go to the source or ask in an open email chain to ensure that everyone is on the same pag
