Detour

brand design
conceptual
illustration
ui design
Image of Detour Logo and Road

Who:

UC Berkeley UX / UI Bootcamp        
Final Project

Team:

Damian Salonick
Kate Lintermann
Nitya
Shabnam Hakimi
Sivaranjini Madivanane

WHAT:

Detour simplifies the process of discovering new places  through a combination of Carplay and mobile app systems that helps the user curate the most scenic route to their destination.
I helped create proto-personas, competitor analysis, conduct initial interviews, user flow for both mobile and Carplay, and develop and prototype Lofi, Mid, and Hifi Prototypes.

Detour Proto Persona

After conducting a series of entail interviews to find out our target user's wants and needs, we created a proto persona to reference as we started to create wireframe sketches of what we envisioned both the Mobile and Carplay experiences to be like.

An ideation Rough CarPlay wireframe sketch showing potential routes
An ideation Rough CarPlay wireframe sketch showing potential routes
An ideation Rough CarPlay wireframe sketch showing potential routes
An ideation Rough CarPlay wireframe sketch showing home page
An ideation Rough CarPlay wireframe sketch showing stops logged in route
Rough Carplay wireframe sketch showing destination information.
An ideation Rough CarPlay wireframe sketch showing in route screen
An ideation Rough CarPlay wireframe sketch showing stops logged in route with information about stop

We combined all sketches into one lofi prototype and oversaw users navigating through a series of tasks to test the design. This test included creating a trip on their phone, "driving" while following the Carplay navigation, and adding a stop to their route while driving.

Hi Fi Wireframe testing of CarPlay app in vehicle
Mid Fi Wireframe testing of CarPlay app in vehicle

The mobile and Carplay prototypes went through 3 rounds of testing with corresponding iterations to ensure our design was as safe to use in a car setting and as intuitive as possible.

Detour Logo
Detour Color Scheme

When creating Detour's style guide we chose font styles that adhered to Apple's Carplay guidelines.

Detour illustration of bridge with trees on a hill and a yellow sky Detour illustration of an open road in the desert Detour illustration of red desert cliffsDetour illustration of pine tree near a brookDetour illustration of a treeDetour illustration of a red volkswagen beetleDetour illustration of a road signDetour illustration of a gas station pump

Created a series of evergreen illustrations inspired by national park posters used for quick announcements and promotions on social channels.

Grid of Detour Hifi CarPlay Wireframes
Gif of Detours Mobile experience of creating a trip
Gif of Detours Mobile experience of creating a trip

In the mobile app, the will user will input their destination and scroll through available scenic spots along their route adding any desired stops. When they are happy with their route they can save it as a "trip" for later.​

... after packing their snacks and creating a playlist...

Once they open that Carplay App in their vehicle they access that "trip" and start navigation. Along their route can make small alterations if they desire. ​I helped create proto-personas, competitor analysis, conduct initial interviews, user flow for both mobile and Carplay, and develop and prototype Lofi, Mid, and Hifi Prototypes.

May also enjoy

usbg

conceptual / ui design
>
Updated USBG Sit in laptop on a desk over looking the gardens