UX/UI DESIGN
An application for Autonomous Valet Parking
Successful
autonomous parking technology from Continental made necessary an application to let users
visualize each step of the parking process.
This project was done in collaboration with the teams from APD Singapore and APD Germany.
What is the purpose ?
User needs to understand vehicle maneuvers. This is a real time feedback application.
What did we do ?
Scope & Project brief
01
Scenario
A parking scenario was created from a list of use cases.
02
Architecture
Wireframes were created to have a clear overview of information architecture, user flow, functionality, and intended behaviors. Wireframes have been validated with stakeholders and dev.
03
Interface
After reviewing the structure of the wireframes, the visual aspect of the application was designed.
04
Implementation
It was then time to work with developers and the testing team to make sure every step of the implementation of the application worked.
The main challenge was to balance out the requirements of the product owner and the technical limitations depending on the data received from the vehicle.
Challenges
The goal of the project was to create an application that informs and reassures users while the vehicle is moving through the car park, finding a parking space and maneuvering. The designer needed to find ways to translate actions of the vehicle into visuals easily understandable by the users.
Goals
Scenario
The journey of the autonomous vehicle inside the car park
The following illustration shows all t he important steps users and their vehicles will go through when the autonomous parking procedure is triggered.
Architecture
Definition of the fundamental interactions
From the defined scenario, the primary interactions needed for the application were created.
The different interactions were arranged into three main functionalities
Interface
Choosing the appearance
Clean & minimalistic with subtle effects to create a sense of depth
DROP-OFF
Drop-off zone interactions
Parking the vehicle
App guides the user and supervises whether the vehicle has identified the drop-off zone in its surroundings
Preferences
The user can choose a specific area in the car park for the vehicle to search for a free parking space
2. Parking space
Parking Feedback
Visual indicators
The application informs in real time about the choices and actions that the vehicle undergoes.
First, the user will be informed when the vehicle has reached the area and will start searching for a parking space. A blinking radar icon indicates that the car is screening the area.
When the vehicle has detected a parked vehicle, an animation of a car appear.
Last, as the vehicle has detected a parking space available, a green rectangle will appear on top of the parking space.
3. SuRroundings
Surroundings Feedback
Vehicle Detection
When the vehicle has detected another vehicle, the interface will show this vehicle on the interface.
Pedestrian Detection
When the car has detected a pedestrian, the app will show it on the interface to inform the user why the vehicle has stopped
4. PICK-UP
Pick-up zone Interactions
Collecting the vehicle
When the user needs to get back to his vehicle, he will be able to choose a pick-up area on the map.
Implementation
From a prototype to a product
After each module of the application was designed, it was implemented to be tested
Testing
Tests were done throughout the evolvement of the application to make sure that the design was correct and check if any changes were needed.
Project evaluation
Feedback from collaborators
