APP
Rücker Lypsa - APP FOR A CONNECTED CAR
This project is a continuation of the HMI - CONNECTED CAR project developed by a Rücker Lypsa team for an electric car. In the original project, we were asked to create an integrated system based on domotics that would allow the users to interact with the smart card via the Infotainment system and a mobile App. Although the Connected Car project is a team effort and the initial idea is based on the team's work, this concept is my personal solution: the final UI and overall functionalities and ideas featured below are my own design.
Client: Rucker Lypsa / Sector: Automotive / Role: UI/UX and Graphic Designer / Project team / Radio: Jhonatan Medina / Marta Ustrell / Giorgina Barrera/ Miguel Escalante Komby: José Cobo / José Fernández / App: Laura Puig / Xema María / Desarrollador: Xavi Castiller
ABOUT THE PROJECT
Rücker Lypsa is a part of the EADG Group, a company whose philosophy is to develop active solutions to be implemented in the production of the future of automotive. The electric car is part of our reality and near future, which is why we see domotics integration, charging stations P2P EV and smartphone's connectivity as integral parts of automotive systems.
On this project, we designed a Kombi, an Infotainment console and an App, including simple and intuitive interfaces in which the user can integrate, control and customize all devices before, during and after the trip.
These three devices allow the user to connect its electric car, home, city and virtually every device that could be integrated into the daily lives and needs.
CHALLENGE
To design an App that allows our user to gain maximum profit from the technological features of our electric car. In order to succeed we needed to:
- Create a Simple, Intuitive, Modern and Customisable UI, that allows the user to connect and personalise the Kombi, the Infotainment console and the electric car.
- Allow different users to access their car services: program, compile and share car and personal data, know car status and connect with the smart home devices.
PROBLEM
Most existing apps for smart cars offer limited functionalities, such as user data and car info. Electric cars are usually connected to mobile devices, but don't include smart homes features. These apps usually control the most basic functions of the car: lock/unlock doors, turn on/off lights, start engine or tires' status, limiting access and control from outside the car. Apps, Kombis and Infotainment consoles are not customisabe and don't allow users to add resources and information based on their own needs and routines.
Our electric car is much more than a means of transportation: it is a powerful tool that can interact with multiple aspects of our users' lives.
SOLUTION
Immediacy is a demanded value from today's user, which calls for quick connection to their social media, smart cities, navigation services such as Google Maps and the ability to share this data. Our electric car's interface offers these solutions in real-time and it's all based on personalized routines, needs, and registered interests.
Based on these parameters, my proposal offers:
- Design aesthetic integrated to the Kombi and Infotainment console, with a sober, neutral, dark interface.
- Flexible cards layout, that allows each user to display their most relevant data and functionalities, with the added component of a clear visual hierarchy that differenciates from primary information and secondary data.
- An interface that adapts not only to the user, but to the previously defined route, offering positive messaging, suggestions or warnings during the trip.
- A dedicated interface for each user and car that shows up immediately when the app and the car are connected.
DESIGN PRINCIPLES
- Six principles extracted from user analysis and experience design were used to define the project's framework for research and design.
- Six key words guided the definition of functionalities as well as navigation and interaction, while guiding the decision making process.
- Six concepts project the user's needs and integrate them into the conceptual vision of Rücker Lypsa's electric car.
RESEARCH
As this project is the third part of the Infotainment project, I've used the three user profiles already defined:
- Emily Brown: A professional wedding planner whose main interest it to use her car as a productivity tool. She doesn't care about mechanics, but she needs the app stay on the loop and keep up with her busy schedule.
- John Smith: Young executive passionate for cars and driving. Family man who prioritise his family.
- Diana Sabater: College student with an active social life. Her car is suppose to drive her to the University and wherever the day may take her.
01 CASE STUDY
John Smith: "I like to drive my car"
The interface design is focused in John’s journey to home, after his working day is finished. It relates to tasks such as picking up her daughter in school and connectivity with the city, The focus here is on the domotics functionalities, and we created an interface and functionalities that facilitate daily tasks such as buying dinner, opening the garage and pre-heating the oven during the back-to-home trip.
02 CASE STUDY
Emily Brown: "The car is a necessity"
For her, the car is another tool for her work. She spends a lot of time in the car, and the system prioritises her agenda. Therefore, she has multi-conference calls activated, as this is the main activity she will use during the day while in the car. No social media notifications, as they are distracting. Emily’s user journey is based on a regular day trip, including calls, pickups and other scheduled activities.
03 CASE STUDY
Diana Sabater: "The car is a comfort"
The UI for Diana is based on an after-class outing with friends. It highlights her social media, favorite music, automatization tools for self-driving and parking, and safe return home.
VISUAL LANGUAGE - VISUAL DESIGN
We chose a clean sans serif typography with several weights. Barlow is modern and a bit condensed, is legible and allows for more screen space. The colour palette uses a high contrast between dark neutral backgrounds and vibrant cyan and purple, used sparingly for interactions.
COLOR
FONT
ICONS
The icons family features both linear and solid styles, which use depends on its function within the interface.
DESIGN
The complete app project develops general functionalities and needs for the electric car and its users.
USER INTERACTION SYSTEMS
This is a fundamental and basic sitemap featuring navigation, interaction and user integration amongst the three devices: the app, the electric car and the home.
WIREFRAME
USER FLOW
This is the user flow for John Smith. It starts on login, and focuses the steps that go through unlock, ID, car setup and connectivity. This process shows the user's path that can be done before entering the car, showcasing the ability to check the car status and plan the trip in advance.
APP SCREEN
INTRO / LOCKED / UNLOCKED
- Connecting with the car.
- Unlock app.
ID process: possibility to choose between Face ID or PIN.
FACE ID
PASSWORD
SIGN IN / SIGN UP
CAR CONTROL
CLOCK SETUP AND CONTROL
BLUETOOTH
The bluetooth functionality not only connects the app with the car, but also detects other vehicles in the same network, allowing for family settings and choosing from the previously authorised cars and user profiles.
HOME
USER PROFILE
Customisation options available, such as preferred temperature of the climate system, saved trips, overnight charging program and driving stats.
MOBILITY
CHARGING
SELECT CAR
On this feature the app recognises other cars in the network and allows the user to select one to connect with.
AUTO PARKING
PICK ME UP
CONCLUSION
Designing for digital products that are connected with a smart car requires an extra special care of security issues. The status of the car is one of the most pressing issues in this type of apps, as it allows prevention in situations that are potentially a risk for life. Also, we need to take into account security in identification, login and connecting with other devices, which could also prevent higher risks (such as car theft, identity theft, etc.).
MY ROLE ON THIS PROJECT:
This App is a part of the HMI Connected Car project, a great part of the research was made with the Rücker Lypsa team. However, the concept I'm presenting o here is my own personal approach. Some of my contributions and original ideas/process, are:
- The UI design: I developed a complete visual language based on the HMI Connected Car project aesthetic, growing it into a full design language.
- Control Car context: This is the major contribution to the project. On this context the user can have immediate access to the car status through quick controls -including voice controls-. This specific screen is one of the most important parts of my contribution, as it enhances the experience by allowing a complete check of the car status before its use, improving time management and adding safety features to the driver's experience.
- Complete menu and navigation overhaul: Among others, including the (+) button at the center of the menu allows the user to add functionalities and customise the screen for different contexts.
- Overall improvement in UX and security: Added different options for login, such as PIN, Face-ID and touch ID. Including signup options and password security recovery.
- Add and connect other cars: The App can recognise other smart cars within the same house, so users in a family can share profiles and connect their apps with their cars, which ultimately improves collaboration and user engagement. This feature also allows to transfer charge from one car to another.