Role

UX & UI & Interaction Designer

Activities

I was responsible for designing and conceptualizing a new insurance mobile app and web portal for CONCORDIA. I led the digital brand direction across both mobile and web.

Concept,

UI Design,

Prototypes,

Usability Tests,

Guidelines for Design System

Tools

Pen & Paper

Figma

InVision

Team

Distributed Team - Zurich, Lucerne - Team of 7 (1 UX, 4 Devs, PM, PO)

Achivement

Created an app with following goals successfully achieved:

  • Handing in invoices is faster and easier compared to email or mail
  • Slim and simple app with a mix of native views and shared WebViews between customer portal and mobile app to drastically save development time
  • Provide a clear overview of current insurance coverage and payment status
  • Sweet surprise - Number 1 trending App in Switzerland (November 2019)

The app was designed for iOS, Android

app store badge play store badge

Summary

For years, CONCORDIA's customers had to hand in their medical invoices in an old fashioned way by mail. While competitors updated the process by providing a mobile app service to scan and easily submit invoices. To catch up with the competitors and give CONCORDIA customers a better user experience, we analyzed their current process and ecosystem to combine their existing customer platforms and services in one easy to use app. This helped users to have a clear overview of all medical services and to be able to capture and submit their invoices.

Starting Point

Current Situation

CONCORDIA is one of the largest insurance company in Switzerland and currently, customers have to hand in their medical invoices by snail mail. Customers have to create their own copy of their invoice, putting the original copy into an envelope, getting a post stamp and dropping it into a mailbox. Afterward, the customers then need to wait until they receive a confirmation mail by CONCORDIA if the bill will be covered or not.
To overcome this tedious process, the new app should simplify those steps. In addition, we'd like to provide customers more transparency about their health insurance situation and a platform where they can easily reach out to CONCORDIA.

Optimizing workflow

After interviewing current Concordia customers and analyzing the workflow, we saw that all steps can be very time-consuming. Often people have to search for their insurance number since it is too long to memorize. Organizing an envelope and stamp comes with low cost but when unavailable, making a trip to the next stationery store or kiosk is inevitable. Also searching for the mailbox address of CONCORDIA can be quite tedious. This repetitive long procedure can easily demotivate people to hand in their invoices and postpone it to never o' clock.
With the new app solution, all these steps are simplified and automated to save time, paper and money. An invoice can now be submitted in just 3 very short steps and within 2-5 minutes.


SKTECHES

First Skteches

First, I quickly sketched rough ideas of the main flow to help with discussions and open up the conversation with team members and stakeholders. I involved the PM and PO to visualize the first vision based on their inputs and our shared understanding of the problem space. Sketching some important screens and flows helped to make first decisions on what technology and which frameworks to use and estimate costs. By discussing the flows and features of the app with engineers, we decided to have a mix of native views and Webviews. Some features that we wanted to provide in the app were already available on the web-based customer platform. By optimizing the web platform for mobile, we were able to save implementation and maintenance costs.


DESIGN SYSTEM

Hi-Fi Prototype

Since the entire project had to be released just in 8 months, I tried to provide a clickable hi-fi Prototype as early as possible to test the design. In the test, the goal was to validate our hypotheses and very our information architecture in order to confidently execute the implementation. The Prototype was designed in Figma and then exported to InVision.


Testing

Usability Testing

Usability Test & SUS

To measure the usability of the app I used the System Usability Scale (SUS) and gave the users some tasks to complete. I had four test users; two of them were already using an insurance scanning app, one who only uses the desktop to complete tasks, and a person who only uses a classic mailing method to send invoices. In addition we also wanted to validate the IA, design perception and copy text.

Testing Cafe

 Testing Cafe:  To assure the quality of the app, our cross-functional team got together at our inhouse cafe on a weekly basis to test the app. We tested the current state of the app for about 30 min to one hour. The cafe helped to create a friendly and chill environment. We wrote down all the bugs and UX flaws and prioritized tasks. The testing cafe helped everyone to see how each individual work contribution fit together and what still needs to be done or fixed.

   Some findings   


Landing Page

Tiles are pushed down for easy one-handed access. All features of the app can be reached with a thumb.
RESULT

Result

Scanning invoices

The scanning process should be intuitive and simple. When users open the scanning app for the first time, we provide an onboarding where users get guided about how to set up lightings when scanning, how to order or rearrange pages, and to attach comments to clarify details if necessary.

WebViews

Some tiles are linked to WebViews, which are showing a responsive mobile web version. These web versions are the same as used on the desktop customer web portal. Reusing those web versions and making sure they are optimized for mobile saved development time and cost. Moreover, users get to see a familiar UI if they used the desktopĀ  customer portal before.

Invoice Search

An important requirement was to be able to search and filter submitted invoices.
By providing a combination of helpful search chips and free text input, users are able to find the correct invoice efficiently and effectively.

Date Filter

A date filter enhances the search input.
User interviews showed, often it is sufficient (for people with only a few invoices per year) to just filter invoices based on the last 3 - 6 months and then browse the result. To make this fast and simple, the date filter also provides helpful chips to show invoices for the last 30 days, the last 3 or 6 months, which can be applied by a simple tap.
A more granular option is provided by picking a date range with the help of a calendar.
The date filter and search can be used in combination to narrow down the exact invoice a user is searching for.

Login with Face ID / Touch ID

A big hurdle when using the desktop application was having your insurance number and password available to login. In interviews, this was one point users mentioned as one of the unpleasant user experiences. For the mobile app, it was crucial to have Touch ID or Face ID to get rid of this obstacle and make it easier and faster for users to securely use the app.

Color Palette

App Icon


MyConcordia ranked #1 in the App Store

Shortly after its release, the MyConcordia App ranked #1 in the Swiss App Store.

ratingtitle
ratings