UI/ UX design Project: Engagement for Mobile Insurer

Mapping UI-UX Concept Engagement UX Insurance Calculators Use Case Jerome Bertrand 2017

As I recently worked on a UX design project for a Mobile Insurance Calculator, I decided to focus more on user engagement (UX) and UI Responsive Prototyping in Axure RP 8.

The result of this process is demonstrated among other things in a Responsive Prototype showing the Final design in 3 adaptive views or versions of one page designed for a specific screen size (or range of sizes in Pixel width):

  1. Portrait-Material-540×684-(Base)
  2. Portrait-Tablet-(720-x-any-and-above)
  3. Desktop (1000 x any and above)

I used design software Axure RP 8 to create this Responsive Prototype: http://r6cidg.axshare.com. Use the Password ‘Engage‘.

Make sure you select the page: ‘Allianz_Step 3- adaptive 540-720-1000+‘ and the Adaptive Views toggle at the top of the Left Navigation panel. Then expand or reduce your browser window to review the Adaptive characteristics for this Page’s design. Look at the Progress bar expanding!

(Software: Sketch and Axure RP 8)


I approached the idea of user engagement by envisioning the possible ‘Delightful moments’ – in the experience of the user. The simple design rationale approach behind this stems from understanding particular ‘Pain points’ a potential Insurance customer may feel before, during and/or after making decision for a specific package.

Upon careful analysis (or best assumption) and consideration of the user goals at ‘Touch point’ along her User Journey, I described these ‘moments of Delightful Experience and how might feel like (the basic emotional values marked in green, red, blue circles in the illustration on top).

Read the Project’s documentation Engagement UX Insurance Calculators Use Case

Engagement UX Insurance Calculators Use Case
Jerome Bertrand


My approach to this kind of project is to develop a team understanding of the interaction problem first (the interactive system: user-machine/ interface). Because I was alone and was not able to rely on any team member to bring different views and knowledge to the subject, I have asked a second person to act as a mirroring-team-member. This helped me to get through the first Concept ideation process (MAP). Being German native, she helped me to translate the initial native English concept (the constructs translating into the direct style of the English language) into German texts for the UI (German is quite a bit lengthier and needs some adapting). The first deliverables are in English (MAP/ User flow), and gradually evolve into full German Forms into the Wireframes and Prototype.

An overview of the ideation process is shown in the MAPPING and SKETCHING pictures below, with Post-it notes and Pen-and-paper.

Design process

Wireframing the UX

I used Sketch and Adobe XD software to wireframe, and prototype the interaction.

Visual design

Next step was to put a little flavour or (very sketchy) visual design to the UX concept. Here, you typically see a 320-pixel wide screen (smallest Mobile size) where the Title texts overflow is not correctly applied (No left margin provides more line length for the long words in German but is not visually not readable nor visually attractive). I have corrected this visual flaw in the next step, the Axure RP Responsive Prototype, below.

View a fast Adobe XD prototyping for fast reviewing Basic Color Scheme options

I selected the final color scheme and used it in the Axure RP 8 Responsive Prototype, below.

Prototyping for Mobile

I also used Sketch and Sketch Mirror/ with the Crystal App to sync and review the design on a Nexus 5 mobile device.


And then document the Project

With Zeplin.io: https://zpl.io/1c4u0o

And as a Visual

Here is a visual representing the Basic Responsive Elements, right from within in Sketch (using a.o. Nested symbols).

Read the Project’s documentation Engagement UX Insurance Calculators Use Case

Engagement UX Insurance Calculators Use Case
Jerome Bertrand