Customer portal case study

Home / Customer portal case study

Period: November 2015 – May 2016

The problem

The company’s online customer portal product was built on an old development framework. This made it 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 various departments was assigned to work on this project. Initially, the UX team consisted of a 1-month contractor and me to help jump-start the project. Unfortunately, no business analyst or product owner was assigned to help us.

The task required starting with no user research, getting the requirements, and redesigning the customer portal. A waterfall development was used without scheduled weekly meetings.

The primary issue we faced was the inability to relate to the old system as it was unfinished. Another problem was that it was tough to obtain business-related information due to the lack of a dedicated business analyst. Moreover, the project scope was loosely defined, and no requirements were given, to begin with.

Requirements gathering

To acquire more information, we initiated a kick-off workshop with the business analysts and developers to:

  • Get more details about the 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 grasp the scope of this project. To begin with, 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. First, 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 out the 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 were achievable, but they had concerns regarding the time availability of the development team.

Download Usability features presentation

High-fidelity prototype

After finishing the 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
The high-fidelity prototype

This was the moment 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. I could afford that time as there was a lengthy technical, infrastructural preparation happening simultaneously. Because it was a higher-fidelity prototype, a decision was made to include some provisional color, so it resembled a finished product.

Download user test report.

Guidelines

Because our system contained many 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. However, something unexpected happened then.

End of project

To our surprise, 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.

To briefly summarize, we gathered requirements, produced, and iterated on low and high-fidelity prototypes.