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 project of combining their web-based systems into a single 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.

Problems and goals

For some time, Feelgood has planned improve the user experience for their clients for tasks such as ordering health services, filing complaints, handling invoices and managing bookings.

Before the release of the current portal, Feelgood’s clients were using several web-based systems. The interaction design and graphic design of these systems were inconsistent and the user experience on mobile devices could definitely had been better.

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

The goals we set for the new portal were:

  • Make all tasks easier by improving the design in general and especially reducing needed input from users.
  • 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 Feelgood’s clients, as well as for Feelgood’s support department.
  • Reduce the number calls about managing orders and bookings made to Feelgood’s call centre.

These goals were and are continuously measured through usability testing with clients, expert evaluations, data from analytics tools and regular talks with Feelgood employees such as client account managers and call center staff.

Design process

This is how the design process 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 learn as much as possible about the content and business politics I’m going to encounter. This project was no exception.

The multi-disciplinary team and I scheduled time to listen to staff at Feelgood’s call center. We wanted to learn more about what type of issues employees of Feelgood’s clients usually were calling about.

Throughout the design process, I also talked to Feelgood’s staff responsible for orders, bookings, complaints and invoices. I needed to learn what pieces of information was needed from clients and what 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 was supposed to look and work. Working mobile first, these wireframes were drawn 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 team members and other stakeholders feel included.

I presented and discussed these wireframes with the rest of the team and 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 needed high-level decisions. Potential “headaches” were caught early on and taken care of.

Once the team and I felt content with the wireframes, I created a clickable prototype in InVision with new wireframes made for wider screens using Sketch. This prototype was used for usability testing, presentations for stakeholders and for explaining the interaction design in detail for the developers in my 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 heavily on print design. Luckily, I got a lot of freedom and the marketing team were pleasant to work with.

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 better.

We started working in Sketch, but quickly set up an internal design system in HTML, CSS and Javascript. This way everyone at Feelgood could see how all the components looked, but also how they behaved when interacted with.

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 at their request.

Usability testing

For evaluating the usability of the portal, a Feelgood employee 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 UX Designer colleagues at my employer inUse from time to time.

During these usability tests, we asked the users questions while observing them performing tasks on the clickable InVision prototype. We recorded audio and video of these testing sessions while also taking notes.

The usability tests proved to be a great success! The users had problems completing the tasks without any help. However, lots of minor copywriting changes needed to be made since lots of users misunderstood and got confused by 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 for our developers.

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.

Result

The portal was released in November 2017 and has been met with great feedback from both clients and Feelgood personnel. Since the beginning 2018, the portal has been rolled out to a large and growing group of clients. New users get access to the portal on an almost weekly basis.

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

Through our continuous user research, we’ve learnt that users find the portal to be easy-to-use, nice looking and professional. They enjoy finally having everything in one place. Feelgood’s call centre has also noted an appreciated decrease in certain types of support calls.

Throughout the project we’ve of course encountered several minor and some major design issues. Luckily, working agile using Scrum it’s been easy to quickly solve, develop and push design changes. Every other week the portal is updated!

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 as on a large screen.

Current development

The portal was released in November 2017, but it’s still being developed and improved at full speed with our great team still intact. Here are some new things we launched in 2018:

Signing in using BankID
In the Spring of 2018 we made it possible for users to sign in and activate your account using BankID.

Support for English language
In the Spring of 2018, we also launched a complete translation of the portal into English. Now users can toggle between Swedish and English at any time they prefer.

Switching between organisations
For users belonging to multiple organisations, switching between them proved to be very inconvenient for some clients. Luckily, we quickly did a redesign and according to user feedback this problem is now completely solved.

Groundwork for new features in 2019
In the fall of 2018, we performed extensive user research and laid the groundwork for some sought after new features to be released in 2019. There’s also some other really secret stuff I can’t disclose yet.

2019 looks to be a great year for the Feelgood 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 is fantastic, the design process is well-structured and what Feelgood is doing is important.

Helping people get better health care (especially for mental health issues) is important to me. It has motived me and is the reason I’ve stayed with Feelgood for over two years.

I have a great feeling about continue working with Feelgood for improving their portal and doing other parallell projects throughout 2019.

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