On versicherung.autoscout24.ch you can compare different car insurances within Switzerland. You not only see the lowest prices but also what offer fits your needs the best.
Customer
Scout24 | 2018/2019
User Perspective
While searching for a new car, you also need to think about insurance costs. There're several different car insurances from different companies, and it’s very time consuming and complicated to find the cheapest offer, which also best fits your needs. Furthermore, insurance products are very intransparent and complex. We wanted to change that.
Business Perspective
A car insurance comparison fits perfectly well into the autoscout.ch universe where the users are already searching for new cars and need insurance. It’s a vast opportunity to expand the business area and to stand out from the competition.
As I started with this project, I took it over from another designer and became the leading product designer. Other to me, there were some external developers and a head of product. Approximately half a year later, as we launched the product, we were grown to almost fifteen people, including an SEO expert, a product manager, and internal developers.
👥 fast-growing product team spread over different locations and companies
🔁 high dependency on insurance companies
🎯 very ambitious business goals
🚀 fixed launch date and scope
Scout24 develops products based on the Triple Diamond. By the time I became part of the car insurance comparison project, the product strategy had been set and first actions, in both the problem and the solution space, had been taken.
As I mentioned earlier, the main components of the product strategy had been determined before I became part of the project. The exact details of the product strategy are confidential, that's why I won't go into further detail. We took the approach 'mobile first' because based on the analytics data, autoscout.ch is mostly used on mobile devices.
The Problem Space is very significant while building a product. Why is that? If you don't understand the people and their problems, you can't build a suitable solution for them. In theory, this sounds very logical and easily feasible. But in reality, there's a lot of time pressure, team members with different product development process expectations and management who wants to see the actual product as soon as possible. So as the leading product designer, it was my job to find the right balance between research and actual visual design outcome. To do so, it was very important to educate people why it's so crucial to spend enough time in the Problem Space and to involve all members of the product team whenever possible. For the car insurance project, this is what we've done in the Problem Space:
1. Interviews 💬
with potential users: to gain insights on what is essential for people about insurance and where are their problems
with insurance experts: to build a better knowledge of the car insurance topic
2. Desk Research 💻
to analyze existing insurance comparison platforms and to learn about the different car insurance products
3. Survey ❓
on autoscout.ch to gain quantitative data about the assumptions we've got from the qualitative interviews
4. Testings 🔎
to gain feedback on product ideas and to test the usability of the platform
5. A/B Testings 🆚
as soon as the product is launched: to test different approaches and see in quantitative data which one is leading to more insurance offer orders - does a better count towards the business goals and KPIs
Wireframes & Flowcharts
Based on the desk research, the interviews, and the survey, I've created the first flowcharts and did several rounds of sketching and wireframing. This helps me to visualize ideas fast, to make them testable and to iterate on them, before starting with the actual visual design. Especially for the results screen, where the different insurances with their premium are visible, I've tried various approaches to find the best solution.
Visual Design
For the basis of the visual design, I used both the ImmoScout and the AutoScout style guides and had the freedom to add new self-made components to it. I designed for three sizes, starting with mobile. The product is divisible into five areas: landing page, data input form, result page, detail page, and offer orders.
For the data input form, I was entirely dependent on the different insurances. They need certain information to calculate prices. As mentioned before, the most challenging part was the result page but also the detail pages. The goal of the result page was to show a lot of information from the different offers but to still keep the overview clean and manageable. The result page had to solve the lack of transparency, but don't overstrain the users.
When designing, I strive for: clarity, efficiency, consistency, and beauty.
Animations
Micro-animations not only make the user experience more delightful but also help to make things better understandable. One example of an animation making something clearer is our «only show the differences» checkbox. As activated, you only see the areas where the insurance products differ. As the first few areas often don't change, without animation, it looks like nothing happens after you activated the checkbox.
A lot! Like in every project I've done, I've learned several things. Here are a couple key-learnings I want to share:
Communication Is Key 🗝️
Especially if you're a fast-growing team spread over different locations and companies. You can never communicate too much. Do a lot of retrospectives and make sure everybody has the same understanding of how to develop a product.
Start Small And Iterate 🔄
If you start with a large product, you'll have to change a lot. It's going to take a lot of time and is extremely frustrating. If you start small, you can do quick changes and add more and more features over time.
Any questions, feedback or new pizza recipes?
Want to change the world? Feel free to reach out!