To content

Alexander Skogberg

UX, Web & Writing

The Feelgood portal sign in screen

Customer portal for health company Feelgood

In 2017, Swedish health company Feelgood started the major project of combining their web-based systems into a single new customer portal. Being the only designer in a 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 when ordering health services, filing complaints, handling invoices and managing bookings.

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 of these systems were inconsistent and the user experience of using them on mobile devices could definitely be improved.

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

The goals of the new portal were to:

  • Make all tasks easier by reducing needed input and improving the design in general.
  • Provide a consistent user experience regardless of which task the users are performing.
  • Offer a just as great user experience on mobile devices, as on computers with large screens.
  • Save time, energy and costs for their clients, but also for Feelgood’s own support department.
  • Reduce the number calls related to orders and bookings made to Feelgood’s call centre.

Design process

This is how the design work was set up and carried out.

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 and business politics I’m going to come across in the design process. This project was of course 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 regularly talked to Feelgood’s staff responsible for orders, bookings, complaints and invoices. I needed to learn about the content, what input was needed from clients and what the users had to be able to 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, I drew these wireframes for small screens.

Lots of paper wireframes of the Feelgood portal

The result of just one day of paper wireframing. My hand was hurting a bit afterwards.

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

I showed and discussed these wireframes with the rest of the team and other stakeholders several times per week (sometimes several times per day) over two months. By keeping everyone in the loop, the developers never were objected to any unpleasant surprises concerning the design and stakeholders were pushed to make decisions. Potential headaches were caught early on and minimised.

Once the team and I felt content with the wireframes, I created a clickable prototype in InVision with new wireframes made for wider screens suing Sketch. This prototype was used for usability testing, presentations for stakeholders and for explaining the interaction design in detail for the development team.

Creating the graphic design

Creating the graphic design for the portal started early on in the project together with Feelgood’s marketing team. This proved to be more challenging than expected since Feelgood’s graphic guidelines focused on print design. Luckily, I got a lot of freedom and the marketing team were supportive.

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 that rendered numbers more clearly.

We started working in Sketch, but quickly set up an internal online design system. This way everyone there could see how all the components looked, but also how they behaved with transitions and animations.

Snippet of the Feelgood design system.

A snippet of the components used in the portal. This was done in Sketch and shared with the developers using Zeplin.

Usability testing

For evaluating the usability of the portal, a team member at Feelgood and I conducted interviews and usability tests with users of Feelgood’s current systems at the time. I also set up some expert evaluation sessions with a few of my UX Designer colleagues at inUse.

During these usability tests, we asked the users questions while observing them performing tasks on the clickable prototype made using InVision. Audio and video was recorded of these testing session along with notes we took.

The usability tests proved to be a great success! The users had no problems whatsoever completing all of the tasks without any help. However, lots of minor copywriting changes needed to be made. Several users were confused and misunderstood the terminology we used.

Screenshot of the prototype in InVision.

Setting up clickable areas in the InVision prototype. It had over 50 screens at the time and has grown larger since then.

Development

Back end development started early in the project since a lot of time was needed for setting up input to and output fram the different back end systems Feelgood were using. Over time, this proved to be the largest challenge in the project.

Front end development started soon after that, when we were about to finish drawing paper wireframes.

The interaction design and especially 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 by using Sass for writing CSS most changes didn’t require much effort.

Result

The portal was released in November 2017 and has been met with great feedback. During 2018 it has been rolled out to large and increasing number of clients. New users get access to it on a weekly basis.

We’ve learnt that users think the portal is easy to use and looks nice and professional. They enjoy finally having everything they need in one single place. The staff at Feelgood’s call centre has also noted an appreciated decrease in certain types of support calls.

“I must say that the new portal feels great, really user-friendly!” – User in an email to Feelgood

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

Screenshot of the portal on a large screen.

Placing an order for a service in the portal. The wizard pattern tested well during the usability testing sessions.

Screenshot of the Feelgood portal on a small screen.

The portal was designed mobile first. Placing an order for a service on a small screen is just as smooth and easy as on a larger screen.

Current and future development

The portal was released in November 2017, but development is still being carried on at full speed with the great team still intact.

In the Spring of 2018 we made it possible for users to sign in and active your account using BankID in addition to English language support. We also made it easier for users belonging to multiple organisations with differents units. According to user feedback, switching organisation and unit has been made much easier.

In the fall of 2018 we performed much more user research and laid the groundwork for some sought after new features to be released in 2019. We’ve also spent a lot of time fine-tuning details related to graphic design, copywriting and interaction design. Every other week the portal is and has been updated with improvements.

2019 looks to be a great year for Feelgood, their customer portal and its users.

How it made me feel

This project is probably the best project I’ve worked on as a consultant. The team has been fantastic, the design process well-structured and what Feelgood is doing is important to me.

Helping people get better health care (especially for mental health issues) is something dear to me. It has motived me and is the reason I’ve stayed with Feelgood for over a year and a half.

I have a great feeling about continue working on the portal and other parallell projects at Feelgood throughout 2019. This page will be updated continuously.

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