Designing For the Connected Car Experience
Advances in connectivity and IoT technologies are opening up a new world of interaction between people and vehicles. Modern connected car technology is enabling people to control a number of car functions remotely via smartphone apps, creating entirely new digital-to-physical workflows.
SpiceFactory works with clients in the electronics and automotive industries to envision and deliver telematics solutions and connected car applications that elevate the user experience and increase revenue opportunities.
Smart Car App Design
UX/UI design • Industry Electronics
A global leader in branded vehicle security and control telematics needed a UX/UI design for a smart car application that would enable users to remotely lock, unlock and start their vehicles with their smartphones. They wanted to promote the “keyless lifestyle” by connecting users and their cars through an app that delivers a seamless and familiar user experience.
The main challenge was creating an app interface that would make the completely new way of interacting with a vehicle feel familiar to the end user.
The application also needed to carry a lot of functionality (remote start, door lock/unlock, location/speed tracking, etc.) without overwhelming the user.
At SpiceFactory, every design process starts with wireframing and laying out the foundation for a highly usable design. After initial pen and paper sketches, it was clear that the primary focus of the app should be a single action – smart start – which allows user to remotely start their car.
At the beginning of a new project, it’s always tempting to create a completely new UI solution. However, car owners are accustomed to central locking systems that allow them to lock/unlock their car with a remote controller. This is why we decided to build the app on top of that knowledge so the user feels comfortable with using the app right from the start. Later on, this turned out to be a good decision.
A detail from the wireframing phase – primary action with additional auxiliary buttons
This was the first draft of the design that followed the typical central locking remote controller look and feel, with an emphasis on the primary action. The design was slick, but the low–contrast UI required more effort to use than we were willing to settle for. The other problem was that the user could easily press a wrong button by accident. This was unacceptable.
We experimented with different gestures to make use of touch-screen capabilities and prevent accidental pressing of the buttons. Swipeable buttons served their intended function, but introduced more confusion than clarity. However, it turned out that increasing the size of the primary action button significantly lowered the odds of pressing the wrong button. That problem was solved.
The end result was a laser-focused, feature-rich app UI that feels friendly and engages the user from the start.
The Design Process
Our design team practices iterative design, so the user interface to a Smart Car App was tested with real users and refined through three versions. We used a Prototyping and Usability Testing tool that helped us work faster and user test the UI to uncover usability issues early on. This enabled us to iterate fast and deliver the final interface design that met the user expectations and delivered on the client requirements.
Personal Vehicle Management
UX/UI design, App development
A leading provider of telematics and mobile tracking solutions approached SpiceFactory to design and develop a personal vehicle tracking app. They wanted to create an application that would allow users to track and monitor their vehicles using an OBD device, as well as manage maintenance data.
The app needed to provide superior user experience that will make setting up an OBD device and monitoring their car effortless for the user.
Design - Making complex data and feature-rich app consumable to the end user. Engineering - Big data processing (10 million events daily). The app needed to log and process all tracking information and deliver critical notifications in a matter of seconds.
For this project, the SpiceFactory team followed the design process that was internally refined over the years to produce the best results. We made rough sketches on paper and then created wireframes and user flows based on them.
After completing the first draft of the wireframes, we ran another round of internal user testing for quick validation. This step was essential for reducing the visual clutter and detecting pain points at a very early stage of the design process. Following are the wireframes that resulted from wireframe iterations.
The result is an interface that helps focus the user on the app’s core functionality which is tracking their vehicle. One of the essential goals of the UI design was to enable efficient onboarding for new users. In order to track their vehicles, users need to physically insert an OBD device into the vehicle. The app guides users through this process step by step, minimizing the first-use friction.
We went through many design iterations as we were determined to find the most optimal interface the budget allows for. Time constraints are the basis of project planning in our HQ and we were very fortunate to work with a client that was aware of the process and the effort that goes into producing the best possible experience for the end user. For this project, we had room for enough iterations that lead us to the most optimal interface. Cutting corners was not an option.
This is a screen for the final design. User can track their vehicle live on the map.
The final product of the design phase was an intuitive interface that keeps the users focused on the important stuff and informs them when there is a need for their attention.
The SpiceFactory team delivered a complete tracking system that provides a wide range of features including instant live tracking, vehicle maintenance, history, and notifications.
Software architecture needed to be able to effectively process large data sets while delivering immediate feedback to the user. In other words, live car movement events (e.g. geofence breach, harsh braking and acceleration, power loss, etc.) needed to be presented to the user in real time.
The backend solution was written in Scala utilizing Akka Streams for complex data pipelines and LevelDB as highly-performant repository for events, while feeding 3rd party MySQL database with aggregated data structured for easy consumption.
This event-sourced stack with separated commands and queries allowed us to build a fully reactive application that is responsive, self-healing, resilient, and scalable. The end solution was able to process millions of events per second, propagate changes to consumer databases almost instantly and provide real-time API to mobile and web clients while running on a small AWS instance.
The system has been running for more than a year now without any incident, benefiting business tremendously in the long term. As a reminder of how a bad software design can impact your business, here is the case of 440 million loss for Knight Capital Group. With adequate architecture, this kind of issue could have been avoided.
Learn more about automotive industry