Alexander Skogberg

UX, Web & Design

To content

Customer portal for health company Feelgood

Screenshots of the Feelgood portal
In 2017, Swedish health company Feelgood started the major project of combining some of their web-based systems into a single new portal for their clients. Being the only designer in their small multidisciplinary team, I was fully responsible for interaction design, graphic design and usability testing.

Background

Feelgood is one of Sweden’s leading health companies. The company was founded in 1995 and is listed on the Nasdaq Stockholm register of small companies.

Today, Feelgood has 500 employees and 10,000 companies as clients in Sweden, which in turn have a combined total of 500,000 employees.

Feelgood offers a wide range of health services to these businesses, organisations and private individuals in over 200 towns in Sweden.

Feelgood’s motto is that investing in health should be a profitable investment as a result of increased productivity and reduced costs of ill-health for businesses and increased quality of life for individuals.

Goals

For some time, Feelgood has planned to improve the user experience for their clients even further when ordering health services, filing complaints, handling bills and managing scheduled appointments.

Before the release of the portal, Feelgood’s clients were using several different web-based systems for these tasks. The interaction design and graphic design on these systems were somewhat inconsistent and the user experience when using them on mobile devices could definitely be improved.

Feelgood set out to combine these systems into a single new customer portal with great usability and a fresh new look.

The goals of the new portal were to:

Design process

Learning about Feelgood’s systems and business
Whenever I start working on a project with a client, I immediately try to learn as much as possible about the content I’m going to come across in my design. This project was no exception.

The team and I scheduled time to listen to the staff at Feelgood’s call center for learning more about what type of issues employees of Feelgood’s clients usually are calling about.

Throughout the design process, I also talked to Feelgood’s staff responsible or educated on matters such as orders, appointments, complaints and billing. I needed to learn about the content, what input was needed from users and what users had to see and do in the portal.

Drawing wireframes
Based on what I learnt about Feelgood’s systems and business, I started drawing paper wireframes of how the portal would look and behave. Working mobile first, these wireframes were drawn for small screens.

Lots of paper wireframes on a table

The result of one day of paper wireframing.

From my experience, paper wireframes are perfect for this phase in a design process. They’re fast, cheap, easy to modify and share and makes everyone feel included (everyone can draw on paper).

I presented and discussed these wireframes with the rest of the team several times per week (sometimes several times per day) over two months. By keeping everyone in the loop like this, there never were any unpleasant surprises for the developers concerning the design. Potential headaches were caught early on and minimized.

Once the team and I felt content with the paper wireframes, I created a clickable prototype in inVision with remade wireframes (in Sketch) with layout for wider screens. This prototype was then used for usability testing, presentations for different stakeholders and for showing the interaction design in detail for the developers.

Creating the graphic design
Creating the graphic design for the portal started early on in the project together with Feelgood’s marketing team.

For brand awareness, we made the decision to keep the design close to Feelgood’s current visual style. However, for contrast and readability improvements some adjustments were made including new complementary colors and a new typeface.

Graphic design of some interface elements.

A snippet of the graphic design for some components in Sketch.

An internal online design system was set up so everyone at Feelgood could see not just how all the components looked, but also how they behaved.

Usability testing
For evaluating the portal’s usability, a coworker at Feelgood and I conducted usability tests (combined with interviews) with users of Feelgood’s previous systems. I also set up expert evaluation sessions with some of my fellow designer colleagues at inUse.

During the usability tests, users were observed and asked questions while performing common tasks using the clickable inVision prototype. Audio and video was recorded of this along with notes we took.

Screenshot of the inVision prototype.

Setting up clickable areas in the inVision prototype.

The usability tests were a great success! The users had no problems whatsoever completing all of the tasks without any help.

However, lots of minor copy changes needed to be made for decreasing doubt and confusion that several users expressed.

Development
Back end development started early in the project since a lot of time was need for setting up input to and output from the different back end systems (this was the main challenge of the project). Front end development was started soon after that, when paper wireframing was coming to an end.

The portal’s interaction design and graphic design changed a lot during the development phase, forcing our front end developer to play catch-up from time to time. Luckily, he was very skilled and since Sass was used for generating CSS many changes required almost no effort.

Result

The portal was released in November 2017 and has been met with great feedback! Users think the portal is easy to use and looks nice and tidy. They are overjoyed that they now have everything they need in one place.

Screenshot of the finished portal.

Ordering a service using the portal.

The portal can be reached at kund.feelgood.se. However, if you’re not a client of Feelgood you can’t sign in for obvious reasons.

Future improvements

Despite the release in November 2017, the project will carry on. The portal will be evaluated and improved with new sought after features and even better interaction design and graphic design throughout 2018 and beyond.

Much responsive Many CSS Very breakpoint So media query Such HTML Wow