Case Study — Mobiliar Customer Portal
Die Mobiliar is one of Switzerland’s industry leading insurance companies. Our goal was to migrate the out-dated client portal to a modern platform. Knowing about the value of human centered design we took it one step further and redesigned it from the ground up with UX in mind.
Interaction Design: Field Study // Personas // Paper Prototype // Lab Study // Workshops // Wireflows // Mockups // Agile Stories
My job as a Freelancer was to help the in-house UX Team design that new client Portal. During those seven months I had many roles: from planning and conducting the initial research, designing concepts, creating visual specs and wireflows to coaching the devs and making sure they understood our designs.
My partners in crime were Benedikt Merz (interaction designer) and Dario Füglister (product owner). Both work for die Mobiliar and we colaborated as close as possible.
When our UX project started, we had two major constraints:
- Being a migration we could only do minor changes to the data services
- The schedule was incredibly tight ‒ roughly 6 months from the kick-off to release day
Okay, enough background information, this is how our journey started back in October 2016.
October to mid-November
Initial User Research
There wasn’t much previous UX research, insights or documentation we could build upon. So we came up with a very ambitious plan to answer three basic questions:
- Who are our users?
- What are their goals?
- What content do we have (or miss)?
When Benedikt and I started in October the developers where stuck in other projects. This was unpleasant for the project but perfect for us. It gave us roughly three sprints (1.5 month) lead time to create and validate our design concept. Or in the words of our Product Owner:
“With few resources at hand and working on a demanding schedule, one of our biggest challenges was to quickly identify the right leverages to effectively improve the user interface. Since this was a migration project, backend services and business processes had to be treated as a constant.
Our designers didn’t waste a second to draw up a plan, talk to our customers, analyse the pain points and create a solid conceptual foundation. The concept for the new customer portal turned out to be not only scalable and future-proof, but also feasible and — most importantly — it performed extremely well in our usability tests.”
Dario Füglister, Product Owner
Getting to know the Content
Our Business Analysts and Product Owner had a rough idea what content was available, but there was no written down inventory. So my first step was to create a visual content map. This helped me to understand the eco system we worked in and created a shared understanding.
Personas
The existing personas didn’t tell us much about our target audience. Because an insurance company serves many different people we chose a large sample base of twenty participants. With less data it would have been hard to tell if an answer was a common pattern or an edge case.
Bringing order to such a large data set had its own challenges.
We tried several traditional mapping methods but they didn’t scale well. So we ended up using a combination of color coding and proximity scoring to group our participants. This visual representation allowed us to discover patterns that we would have missed otherwise. In the end we distilled the findings into three personas.
Color Mapping (above) was the first step. It gave us a general idea of which patterns could make sense to explore further. The second step was to take each of these groups and compare how well they aligned. Arrows indicate to which side of the main cluster they deviate (below). This way it is possible to detect trends instead and not only count exact answers.
Our three final personas ended up being used for broader research and designing across all digital touch points — way more than we had in mind when we created them.
While writing this case study I compared the results of all twenty participants with the first six which is a common sample size used for this type of research. From what I can tell the results would have been slightly different. In particular two of the first six participants ended up being edge cases and would have skewed the results. In hind-sight I’m glad we chose the larger sample base.
Iterative Usability Tests early on
With the personas and content map in place, Benedikt and I created our fist drafts for the new portal.
Each one of us sketched up a paper prototype making sure to use very distinct approaches. We then tested those prototypes with several employees (not related to the project) and compared how they performed.
With those insights we then crafted a Balsamiq-Prototype together and tested it with real users. The old portal was usability tested a year ago and we used the same scenarios to be able to compare the results. Our Low-Fi-prototype already performed significantly better giving us confidence in our design decisions.
Because of those results we started tweaking it in-between test sessions. If something didn’t work frictionless we’d try an alternative solution. This gave us a very rapid feedback cycle allowing us to iterate and validate the design two or three times during one usability study.
We also invited key members of the project team to be part of the Usability Tests. Having them there helped to build trust in our UX approach and getting them excited for the new redesign.
Content and Layout Guide
The last missing deliverable of our initial concept phase was a content and layout guide. I analysed all available contents and split them into reusable parts (Title, Lead, Content, Actions …). Placing them on a consistent grid created a seamless experience across the portal while being flexible enough to adapt each view.
Mid November to March
Production Time
After the initial research our tight collaborative work mode changed. Benedikt had to dedicate most of his time to adjacent projects while I created the detailed specs and kept in touch with the devs. Dario (the Product Owner) and I had regular Co-Design Sessions where I’d talk him through my sketches. He could give feedback on them and I altered the designs on the fly to show him what the changes would look like.
“Tim quickly grasped the essential insurance know-how and convinced with his conception skills, his elaborate ideas and his high understanding of quality standards. Furthermore, he proved to have a fine sense for the balance between a great solution and its feasibility — which was crucial to maximize the business value of our product.”
Dario Füglister, Product Owner
Breaking Down the High-Level Concept
Per Sprint I got assigned to a particular feature or area of the portal. My work flow was to do initial research, write scenarios, then sketch up the concept and get it reviewed by the UX team. For the specs we simply used the wireframes from the UX Review. The only additions I made where annotations and wireflows to communicate the process. Then I got them printed out as huge A0 spreads and hung them on the wall.
Prior, the devs had worked with either no documentation at all or those well-known spec bibles that explain every tiny aspect of a single control in full detail. When I presented the first story in this new form I made sure to put a handwritten comment on the huge paper spread. The comment wasn’t relevant at all but it encouraged everybody to add their own.
And oh boy, they did… they used the sheets for everything from naming framework components to adding code related specs. They started asking me questions and even pointed out flaws in our concept.
“Our project started as a migration of a boring client portal. But with the help of Tim we instead built a new, fresh and modern client experience — in a very short time. As a developer I appreciate his friendly and forthcoming personality. And his brain doesn’t think in Adobe and pixels alone but also in CSS, HTML and JavaScript - a developer in mind. :D“
Sven Schöni, Lead Frontend Developer
My desk was close to the wall so I could overhear discussions. Once I picked up the devs were uncertain about an aspect of the concept I would pop over and see if I could help them out. It was brilliant. True, real time collaboration and definitely a very fast paced way to develop the portal.
Usability Test 3
Two months before launch we conducted a third usability test with our final concept. Because the coded portal wasn’t ready yet for a usability test Benedikt mocked it in webflow. This way we could test a high fidelity prototype that felt close to the real product.
The findings from our usablity test where very helpful. The main use cases where fine, but some users had trouble finding certain call to actions. As a result we had to tweak the information architecture and optimized the in-content navigation.
Co-ordinate web agency
During the last two months we contracted a web agency to style our front-end. It was my task to keep in touch with them, manage their stories and review the delivered work. Having a background as a web developer made this a lot easier. It was rewarding to see everything come to life.
“With knowledge in both development and design, Tim made the communication between us [novu] and Mobiliar much easier. He managed all our tasks and took over the whole communication and he even assisted us in some front-end tasks to finish the project even better.”
Michael Schmidt, Front End Developer at Novu
March — April
Release
In the last weeks before the release we switched to a daily mode. We backlogged every Bug we found during testing. Our Product Owner would then rank them on a daily basis. The devs grabbed the top ranked issue, crunched it, shipped it for retesting and then picked the next one from the top of the backlog. This added even more speed to the already fast paced development. Common sentences during our daily stand-ups where “I worked on this and that and… uh… sorry, I’ve done so much since yesterday I don’t remember it all” (followed by a charming smile) — or — “Oh, that? I saw that and already fixed it.” (when our Product Owner found a new Issue and wanted to get our feedback on it).
Our Product Owner focused on setting high level priorities and coordinating the dev-issues. My responsibility was the design and UX backlog. I spent a lot of time coordinating and reviewing the work of the contracted agency and answering UX questions from our devs. Besides that I got my hands dirty with practical HTML, CSS and angular work.
It was a very busy time with a lot of extra hours. But these fast paced couple of weeks are one of the most satisfying work experiences I’ve ever had so far. It reminded me of those days of playing competitive hockey where everyone on the team played their role perfectly.
Easter was our release Weekend and by the time it arrived — to use the same metaphor — we had reached the playoff finals. In an attempt to win the championship we worked late to fix those last bugs and then hit the “Deploy” Button. And it worked. Like a Boss. We had won the cup.
Conclusion
From October to mid-April it took us roughly 13 sprints to design and build the whole frontend.
In this short time we did our research, created and tested two prototypes, spec’d and built the final product, did another usability test, polished the final product and then released everything on time.
It is a testament to the whole team and how tight we worked together that we managed to pull this off. I’m truly grateful that I was a part of this team and able to help them build the portal. Honestly, I feel a bit of melancholy creeping up on me while writing these lines. I guess I’ve grown somehow attached to this team ‒ but ah well, saying good bye is part of being a freelancer. So, Onwards my noble steed! Great adventures are to be had.
Thank you Mobiliar! All the best with your upcoming challenges.
