Project 1 out of 4

Year

2020

Employer

Undo.app

Tools

Figma, After Effects, Webflow

Role

UI Designer

Undo Kør app

Undo is an Insurance startup in Denmark, with an already well-establishedapp for "basic" insurance, but for some time Undo strived to offer smart & fair car insurance.

That’s when the idea for Undo Kør (drive) was born.The difference between Undo Kør and regular car insurance is simple, there is a period where Undo tracks users driving behavior with the app. At the end of this period, the user receives a driving score, and based on this score the user can get cheaper car insurance.

To put it simply, users driving behavior affects the price. Users with good driving behavior are rewarded with cheaper car insurance.

User flow

The Undo Kør flow consists of 3 main flows. "The onboarding" where the user input’s personal information, "the test drive" where the user lands on the dashboard to see the latest score and progress within the test-drive (the period where the app tracks driving behavior), and the last part is "customize" where after the test drive part the user can choose coverages for the car insurance.

Design tasks

Design Goals

  • I've decided to go for some strong recognizable colors.
  • Soft rounded edges for neutral feel. (Not too serious, not too playful.)
  • Soft & functional shadows.
  • Blurred backgrounds (That iOS Vibe.)
  • Make playlists part
    of the UI.
  • Dark theme.

The process

I started on designing the test drive from low-fidelity wireframes, the first thing I wanted to get done was the dashboard. I have dedicated a couple of days just to explore how it could look like.

In the process of designing the dashboard, we had a couple of feedback loops within the design team to see what we like or don’t like. In the end, we have decided to go for dark UI for this dashboard simply to raise the importance (also for its looks).

The rest of the app is in light UI accepts the dashboard. I have also made use of neumorphism to make the “score bubble” look more clickable and stand out. The rest of the screens in the test drive flow were more about privacy and allowing to track various data.

After the test drive, I have moved on to designing the onboarding part. The onboarding in the Undo Kør app is similar to the original Undo app, really the only new thing was the explainer. In the explainer, the users will know what not to do while driving in order to get a good score, and what better way to explain this than with animations.

I began experimenting with static illustrations in Figma just to see how it could look like. After I designed something that caught my eye and showed potential, I tried to animate it in after effects.

There are 5 animations in total, one for speeding, hard braking, hard turns, fast acceleration, and aware driving. The point of these animations was to exaggerate so it’s clear to the user what not to do and if the user fails to understand, there is also a toast message that makes it even more clear.

The implementation of the explainer was not the smoothest experience. It required close collaboration with one of the iOS developers and lots of trial and error.

The reason why it was a bit complicated process is that the animations were exported as "Lottie animations" but also layered on top of a Mapbox. It was up to the developer to match the animations to the custom map.

Final thoughts

Undo Kør is by far the biggest project Undo and me have done. I have learned a ton when it comes to project management, giving & receiving feedback, and exploring different ways of how the product can look like.

In total it was 3 of us pixel pushers designing this app. Undo has released the Undo Kør app to the app store in January 2021. Shoutout to the Undo team for doing great work 💪

Download UNDO Kør on the app store

[Due to constant development, the app might look different today.]

Undo Kør app preview

Undo Kør website

The website for Undo Kør was a short project where the main purpose of this website is to make people curious about the new Undo Kør app and download it, kind of like a landing page. I was part of this project as the only designer and (Webflow) developer.

Design goals

Visit live UNDO Kør website

[Due to constant development, the website might look different today.]

Next Project