Ami App — Case Study

Clément Pavageau
Nov 5 · 7 min read

Back in 2018, Alphero agency contacted me to help them work on an insurance app called Ami. They already did some research about the current app and put a lot of thoughts into the UX design, especially regarding key features that would be essential to have for the new app.


Brief

To give a bit of context about Ami, this insurance company is really famous here in New Zealand, they have been around for almost a century. Ami targets young adults customers. So customers that are not especially familiar with insurance and policies.

Alphero wanted me to bring their initial UX concepts to the next level. Which consisted into redefining their early wireframes, creating a unique UI design as well as thinking about innovative and fun interactions.

Here is a sample of the UX work done by Alphero that was my starting point for the project.

Process

Look & Feel

The first step I wanted to tackle, before even starting on the visual design, was to figure it out what will be the best home screen for customers. Going through all of the UX documents provided by Alphero, I started to have a good idea of what type of content to implement :

  • a quick overview of the latest customer’s notifications about their policies
  • an easy access to all the sections of the app

That being said, I had multiple choices in terms of visual architecture for the home screen. I could have gone with a simple cards system, listing all the latest news, but it didn’t feel fun at all for the target of the app. I liked the idea of having all the information on one screen, with no scroll. What was important here was for customers to feel that Ami app would simplify everything that could feel overwhelming for them.

Sketch on paper and first designs of the home screen. Having a “wheel of news” for customers seemed to be the best approach for them to have a fun and quick overview of their policies updates.

The white version felt maybe a bit cleaner, but I wanted the content to stand out more and be the focus of the home screen. So in term of hierarchy, as well as identity — the color yellow being the principal color from Ami branding — it felt better to have the main background yellow and the “wheel of news” on a white background. I wasn’t totally convinced with this last version and felt like it was missing something. To help customers identified them better with the app, I decided to introduce a character to it. Someone that will welcome them, guide them and reassure them through the app.

Version with a character and iteration of the copy information for the “wheel of news”. To not have a too busy home screen, it felt better to allow the customer to focus on one news at a time by opening a “see details” screen.

The first implementation of the character was a bit rough, I couldn’t spend a lot of time on it at this stage of the project. It was here to define the global look and feel of the visual design. To optimize time, I just insert a placeholder illustration with a style that fitted Ami’s spirit and what I wanted the app to reflect.

The character needed to feel solid, reliable, friendly, and at the same time it shouldn’t be too present. I wanted it to be a bit out of focus by blending into the background. Before spending time designing it and making it better in 3D, this quick placeholder helped me visualize the value of adding it to the app.

User Journey

Now that I had the look and feel for the visual design, and was in a good place for the home screen, I worked on a user journey. Because my time at Alphero was limited, the best approach to have an overview of the whole app was to define what would be an accurate user journey.

The user journey goes through the main sections of the app that I redefined following the UX design made by Alphero — selecting the key features — and also based on what customers would primary need for the app.

Visual Identity & Interactions

One of the main key features created by Alphero was the Add Contents section. Its goal is basically to help customers insured items that they don’t necessarily think about insuring. Keeping the same logic as for the home screen, I approached the structure and visual design of this section by having the less information possible on the screen to make it as intuitive as possible.

Some fun interactions have been thought through for this section, such as :

  • an inverted endless horizontal scroll, allowing customers to quickly see and select items, with also the possibility for them to add more to the list
  • a playful and easy way to enter the price for each item, having the same wheel interaction as the home screen
  • a simple way to add and delete pictures by swiping left and right
Above is the UX made by Alphero, below are the sketches I came up with and the visual design for the Add Contents section.

The Policies section needed to be especially intuitive for customers as it was the core of the app. In term of architecture information, I chose to split it into 2 levels of depth :

  • a first level where customers have an overview of all their policies into 3 categories, such as Properties / Vehicles / Others. By simply swiping left or right, the customer can quickly navigate through those 3 categories.
  • a second level that displays all the information related to a specific policy. The customer taps on it and the specific policy’s card expand full screen.
On the further right screen, tapping on the toggle button will flip the card and display either the details of the policy or the risks of it.

The last key feature I had to design was the Urgent Help. Alphero came up with the idea of having a “panic button”, easily accessible for customers in need of urgent help. This section had to be visually light and impacting to allow customers receiving help as fast as possible.

The design of the list has been scaled up on purpose to allow clear and fast actions.
Last screen I designed when the customer opens and is back on the app. Simple and personal.

3D

Modeling

Before starting with cinema 4D to model the character, I redefined it on paper to have a nice and unique style. Making the character in 3D compared to 2D was an aesthetic choice. It allowed me more flexibility and fitted better with the visual identity of the app.

Sketches for the final character design.

Through the modeling, I added some details such as a fitbit, the logo Ami on the t-shirt and some shoe clip instead of laces. The modeling has been done in low poly for a better visibility of what I was doing and then I added hyper nurbs to increase the number of polygons and smoothed it out.

T-pose of the final character — low poly above and high poly below.

Rendering

The render of the character had to feel friendly and smooth. I didn’t want to have a realistic human render, but something closer to a little plastic character coming to life. I thought of it as a little helper that could fit in your pocket as a phone does.

Different renders and colors tests made with V-Ray.

Rigging

This part was definitely the most complex one. After spending time doing the rigging myself, facing some difficulties and running out of time, I chose a different approach to it. To speed up the process, I chose to give a try to Bendy Limbs by Ej Hassenfratz. It made the whole process of rigging way easier and faster than the native one on Cinema 4D, but I wasn’t happy with the look of it.

Here are the rigging made with Cinema 4D (left), and the one with Bendy Limbs (right). I didn’t like the arms and legs extremities being visible for the one made with Bendy Limbs.

Then, I discovered Mixamo which is an animation software that allows to create really fast rigging and to apply pre-made 3D animations to it. That was exactly what I needed considering the amount of time I had left.

Rigging of the character with Mixamo. Super efficient.

Animation

To make the app more alive and playful, I chose to add some animations through the most important sections. First, I wanted the character to welcome the customer on the home screen. Then, I wanted it to be present on the feedback screens to emotionally support the customer.

All of the Mixamo’s animations selected for the app.
The whole intro’s animation flow composed in Cinema 4D using motion clips.

The last step before final renders was to fix the rigging within Cinema 4D. Even if Mixamo is incredibly fast and efficient, the rigging wasn’t perfect. To smooth it up, the trick was to go into the expression tag and change the mode to smooth within the attributes panel of the weight map. Then increase the radius of the brush and brush over the harsh gradients.

Before and after smoothing the weightmap.

Thanks for reading, you can see the presentation of the project here https://www.behance.net/gallery/86811895/Ami-App

Clément Pavageau

Written by

Independent Senior Art Director | former @gobelins_paris

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade