Skip to content
dinçer.design

Berlin

Your car, talking back.

02 Snapshot

Role
UI designer at Userspots
Team
A UX designer and a PM at Userspots, with two Fiat engineers supporting tests at the Tofaş factory in Bursa
Timeline
Userspots, around 2017. Live in 2018.
My contribution
UI for the dark mobile app and the light web platform, a design system document covering both themes, and the prototypes for the bright-light tests.

Top results

  1. 01
    Live in 2018, promoted countrywide with commercials
  2. 02
    One of the first connected-car apps developed in Turkey
  3. 03
    Three industry awards, from IDC Türkiye, Social Media Awards Turkey and Altın Örümcek

03 The challenge

Redefining the car–driver connection.

That was the motto at kick-off. Fiat wanted a brand-new app to compete in the fast-growing smart-car market, at a time when connected cars were still new to Turkey.

A dongle in the car sent its data to the phone. The app, known in the project as Fiat Connect, had to turn that data into what drivers need most, within what the dongle could actually do.

Screens of the dark Fiat Yol Arkadaşım mobile app
The dark mobile app. Turkish UI kept as shipped.
Illustration of a car dashboard in grey line art. A close-up callout shows the OBD dongle plugged into the car, and a green dashed line with a wireless symbol runs from it to a phone showing the Fiat app on the My car screen, with a score of 56 points and a top view of the car.
The dongle sits in the car and sends its data to the app.

04 My role and ownership

I was the UI designer on the project at Userspots, who designed the UX and UI for Fiat and Tofaş. I worked with a UX designer and a PM, and my focus was the interface and the system behind it.

  • UI design for the mobile app (dark) and the web platform (light)
  • The prototype for the bright-light readability tests
  • A design system document covering both themes
  • Interaction prototypes with the developers
  • Testing on two Fiat cars at the Tofaş factory in Bursa

05 Process

  1. 01

    Research

    Connected cars were new to the local market, so we mainly studied competitors abroad.

  2. 02

    Flows and prototype tests

    First flows and wireframes, then prototype tests with potential users. Together with the UX designer and the PM, we defined the primary features and reshaped the UX. Once the UI was designed, we tested it with users again, which improved the iconography and the experience.

  3. 03

    On the factory floor

    Two Fiat engineers supported testing at the Tofaş factory in Bursa. We improved features by trying them on two Fiat test cars.

  4. 04

    Dark theme, bright light

    Fiat wanted a dark mobile interface, and a dark UI can struggle in sunlight. I prepared a prototype for another round of user tests, and we revised the colour palette based on what we found.

  5. 05

    Designing for the dongle

    The dongle’s technical capabilities set hard limits. We kept revising the design together with the development team.

Seven grayscale wireframe screens of the Fiat app, each in the same plain phone frame, in two rows. First row: the Diğer İşlemler (more actions) menu, then the Vale Modu flow: a map with a circle for setting the area, a confirmation dialog that Vale mode is set, and the active-area card with a KALDIR (remove) button. Second row: the dialog saying Vale mode was removed, the Kılavuz (manual) screen with a search field and collapsible sections, and the Ayarlar (settings) screen with notification toggles. All text is in Turkish.
The wireframes my UX peer handed over, shown in grayscale.

06 Status you don’t have to ask for

The car speaks up first.

Because the app is always in touch with the car, it doesn’t wait to be opened. If the car is being towed, a set limit is exceeded or a fault shows up, the driver gets an instant notification.

We built the real-time flow between car and app around what drivers need most, the pain points in talking to their car, and remote control.

  • Emergency help sits at the most reachable point, one tap away.
  • Remote access, central locking first, works even when you’re away from the car.
  • Speed and distance limits that the driver sets, with a notification when they’re crossed.
  • Trips on a map, with fuel and trip stats.
  • A driving profile built from how you drive, with tips to improve and a ranking that turns efficient driving into a game.
Home screen of the Fiat app
Trip map
Trip stats
Alerts
More app screens
Home, trip map, trip stats, alerts and more.
The driving profile with score and ranking
The driving profile: a score, tips and a ranking.

07 One concept, two themes

After the mobile app we designed MyFiat, a desktop web version with most of the app’s features. It also works on mobile, so drivers can check on their car from any screen with the same look and a similar experience.

The web uses a light theme with the same design concept. I adapted the component library to the new colours and delivered a design system document that covers both the dark and the light theme.

The MyFiat web dashboard on desktop
MyFiat on the web: light theme, same components underneath.
MyFiat vehicle list on desktop
MyFiat on mobile
MyFiat on desktop and mobile.
Form components from the design system document: text fields in normal, active, error and verified states, a search field with a green Ara button, checkboxes with and without a check, and radio buttons. Labels are in Turkish.
Four icons shown twice, as a green outline set on top and a navy filled set below: a person, a wrench beside a car, a car, and a clipboard.
Small interface icons: an eye and a faded eye, a plus, a close cross, a navy and a green magnifying glass, a green gear and a gray bell.
Car and driving icons in navy and gray: gauges, a fuel pump, a battery, a wheel, a location pin, a gearbox, an engine and a wrench.
The design system document: form components and icons. One document covers both themes.

08 Impact

live, promoted countrywide with commercials
2018
test cars from Fiat, so I could design features and test them on the road as we built
02
industry awards
03

The app worked only with selected Fiat models, but users and the industry took to it, as one of the first connected-car apps developed in Turkey.

Recognition

Next caseTipza