Customer portal case study

Home / Customer portal case study

The problem

The company had an online customer portal product built on an old development framework. It was very hard to use and modify. Consequently, the management decided to start afresh with the UX team and a technical overhaul of the product.

the old interface of the customer portal which needed a redesign
Screen from the outdated customer portal system

Role and process

A team from the whole development stack was assigned to work on this project. Initially, the UX team consisted of me and a 1-month contractor to help jump-start the project. Unfortunately, no business analyst or product owner was assigned to help us.

The task was to start without user research, get requirements, and redesign the customer portal. A waterfall development was used without scheduled weekly meetings.

One issue was that we couldn’t relate to the old system as it was unfinished. Another issue was that it was really hard to obtain business-related information due to the lack of a dedicated business analyst. The scope of the project was loosely defined, and no requirements were given to start with.

Requirements gathering

To acquire more information we initiated a kick-off workshop with the business analysts and developers. The goal was to:

  • Get more details about requirements
  • Outline the collaboration between the UX and the development teams
  • Set deadlines

schedule for producing a prototype and collaborating with development team
Action plan for the project

The discussion was beneficial and we created an action plan. We understood more about the requirements and technical hurdles. Furthermore, a user journey map was created to get a grasp of the scope of this project. To start we decided to work on two processes, auto claim and life quote, with one process for each designer.

Online insurance user journey
Online insurance user journey

Low fidelity prototype

We started with a brainstorming session. Each of us had to draw as many designs for our user journey as we could. Next, we used Adobe Illustrator and Invision to create a low-fi prototype based on the most favorable sketches. Initially, the prototype was based only on usability heuristics. Later, we refined it, conducting interviews and tests with employees. They gave us great feedback and pointed us to domain-related mistakes we omitted.

Low fidelity prototype of the home screen of the insurance customer portal

When the Invision prototype was ready, a meeting was appointed with the whole development stack (database, middle, front end). The goal was to present new usability features and discuss their technical feasibility. We intentionally didn’t include color schemes to avoid color preference discussions; however, our colleagues insisted they would like to see a colorful prototype. In the end, the developers assured us that the proposed features are achievable, but they had concerns regarding time availability of the development team.

Download Usability features presentation

High fidelity prototype

Later, after we finished with the first prototype, it was time to create the high-fidelity one. The goal was to use it for user tests and provide a reference for the development team. The good news was that our target user group was broad, and we could use commercial user testing services.

The home screen of the high fidelity prototype
To view the prototype visit this link, and register with any credentials (doesn’t need to be real) to enter the prototype

This was the time when my fellow UX contractor had to leave the project, and I was the lone UX designer left on the project. Before leaving he helped set up the high-fidelity prototype using the Meteor framework. From then on, I was responsible for the prototype development. It took me around 2 months to create it. We could afford that time as there was a lengthy technical infrastructural preparation going on simultaneously. Because it was higher-fidelity prototype we decided to put in some provisional color so it resembled a finished product.

Download user test report.

Guidelines

Because our system contained lots of input forms, a web form usability guidelines were produced to serve as a reference for the front-end developers. Also, I started developing a usability guidelines site that encompasses not only forms but usability “best practices” and how they fit in our context. Then something unexpected happened.

Future work

Surprisingly, the project was paused due to technical and business reasons. It was unfortunate as we put a lot of effort into making the new system usable. Anyway, to recap, we gathered requirements, produced, and iterated on low and high-fidelity prototypes. Two user journeys were tested: insurance life quote and auto quote. There is a lot more work left to be done on this project evaluating the rest of the user journeys, also making a plan for continuous user research and obtaining of objective analytics data.