The Tile app telling the user everything's fine and they have all of their essential items in the car.

Tile's first connected car app

Jaguar Land Rover approached Tile to collaborate on an in-car experience and we built a new version of the Tile app for their Bosch OS. It's a second-screen experience designed to extend and tailor the Tile app for the car context. The project was covered in a few blogs including TechCrunch, The Verge and Engadget.

Tile is a bluetooth tracking device and app that helps people find stuff that matters, like keys, wallets, luggage and beyond. Because the in-car Tile app is a second screen experience, it doesn't have to mirror the same features and functions as the conventional mobile app. Instead, the car app provides an extremely simple UI that does not distract drivers, complies with in-car interface and usability standards, and most importantly, solves 2 immediate problems that could arise in the car.

Problem #1: You accidentally forget and leave something you need behind

If you left your wallet on the kitchen table and don't have it when you get in the driver's seat, your car should be able to tell you that. And if you have everything you need, it should reassure of you that, too. 

The app hierarchy emphasizes this function first. As soon as the app is opened, the "Essentials" screen gives you a quick report. If everything's A-okay, you get a green check with a warm greeting. If you're missing an item that's critical to have in the car, you get an orange warning. Ideally, this design would be invisible and you'd get an alert without having to open the app — but a push notification system was not available in the Bosch OS at the time we built this. It's on the roadmap for the future.

Problem #2: You don't know where you left a lost item

If an item is not in the car with you and it's lost, the Tile app can help you find it. Missing items have a Get Directions feature that, when initiated, automatically opens the car's native GPS system and routes you to the last place it was seen.  

Explorations

The UI and UX evolved through a few quick design cycles. In an early pass I ported over much of the existing Tile app to a car-appropriate interface design, consolidating everything into a single screen to make use of the horizontal space:

The interface evolved as I collaborated with the PM and folks from Jaguar Land Rover. We all agreed it made most sense to focus on making the "forgot something?" feature the hero feature, assuming that it would be the most useful in the context of the car. Here's another pass at the design where I began to break up the hierarchy and user story a bit more:

A quick prototype I created using InVision.

Final Design

From a visual perspective, the main screen is designed to match the luxury of Jaguar Land Rover and feel premium. The minimal approach, dark background, and custom map color theme contribute to this upscale feel. In addition, from test driving a car with a screen interface, I learned that contrast is important, especially during the day when sunlight effect visibility. The background is a solid color to ensure legibility and evoke a simple, elegant feel.

There are some quirks of the car interface that dictate the design. The main input the screen accepts is taps so I needed to bake in interface elements such as the up/down arrows for scrolling. The refresh button is needed because the car app won't always auto-refresh. In the main mobile app, it's possible for people to have photographs represent their items instead of icons, but I chose to keep only icons for the car interface due to the low resolution of the screen.