Ami App — Case Study
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.

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.

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.

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.

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


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.

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.


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.

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.


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.

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.

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.

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.


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.

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