To content

Alexander Skogberg

UX, Web & Writing

Illustration of the Feelgood Client Portal running on a phone and laptop

Digital solutions for health company Feelgood

In 2017, Swedish health company Feelgood set out to improve their digital solutions for their clients and staff. I’m currently working as a designer in the multi-disciplinary team developing these solutions.

Background

Feelgood is one of Sweden’s leading health companies. It was founded in 1995, is listed on the Nasdaq Stockholm register of small companies and has over 750 employees.

Feelgood offers a wide range of health services to private individuals, organisations and businesses in both the private and public sector. The company has 120 health clinics all over Sweden, 60 of which are its own.

Feelgood has over 8,300 companies as clients in Sweden, which in turn have a combined total of 825,000 employees.

The company’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.

Solutions developed in parallel

Since the Spring of 2017, I’ve been working as a designer in the multi-disciplinary team developing digital solutions for both Feelgood’s clients and the company’s staff.

Some of these solutions have been released and are actively being developed further, while others are awaiting future release.

Feelgood Client Portal

For a long time, Feelgood’s clients were using different web apps for managing orders, bookings, complaints and invoices. With the Feelgood Client Portal we’ve successfully merged all of this into one single web app.

Feelgood Visitor Registration

Most of Feelgood’s own health centers don’t have staff just for visitor registration. We made this process much smoother by installing tablets at these centers running a web app visitors now use for registering their visits.

Feelgood Frisk App

In the Fall of 2019, Feelgood will release the app Feelgood Frisk. Through this app, employees at Feelgood’s clients will get access to private health services in addition to help for work-related health needs.

Feelgood Design System

For providing a consistent user experience in all of Feelgood’s digital solutions, we’re continuously developing and using a design system. It’s not public, yet.


Feelgood Client Portal

The Feelgood Client Portal viewed a large and small screen

Back in 2017, Feelgood planned to improve the user experience for their clients when managing orders, bookings, complaints and more. This resulted in the development of the Feelgood Client Portal.

Challenges and goals

Before the release of the portal, Feelgood’s clients were using different web apps for all of these tasks. The interaction design and graphic design of these web apps were inconsistent and the user experience on mobile devices could definitely had been better.

With these insights, we set the following goals for the portal:

  • Improve the interaction design in general
  • Reduce the amount of requested input from users
  • Provide a consistent look and feel regardless of task being performed
  • Save time and energy for Feelgood’s staff handling orders placed using the portal
  • Reduce the number of calls made to Feelgood’s call centre about orders and bookings
  • Make sure the user experience is just as good on mobile devices as on computers with large screens

These goals are continuously measured through usability testing with clients, data from analytics tools and talks with Feelgood employees.

Design process

When I start working on a project with a client, I immediately start learning about the content and business matters I’m likely to encounter. This project was no exception.

The team and I scheduled time to listen to staff at Feelgood’s call center. We needed to learn about what type of issues employees at Feelgood’s clients are calling about.

The team and I also spent time talking to Feelgood staff working with orders, bookings and complaints. We needed to learn what information is needed from clients and what users have to be able to do in the portal.

Drawing wireframes

Based on what we learnt about Feelgood’s business and current web apps, I started drawing paper wireframes of the upcoming portal. Working mobile first, I drew these wireframes for small screens.

Lots of paper wireframes on a table
The result of one day of drawing paper wireframes. My hand was hurting a bit afterwards.

From my experience, paper wireframes are perfect for this phase in a project. They’re cheap and fast to draw, easy to modify and share, and drawing them together makes team members and stakeholders feel included.

I presented these wireframes to the team and stakeholders several times per week (sometimes even several times per day) over two months.

By keeping people in the loop like this, the developers never were subjected to any unpleasant design surprises and the stakeholders were pushed to make high-level decisions.

Once we felt pleased with the wireframes, I created a clickable prototype using InVision and Sketch with new wireframes drawn for wide screens. I used this prototype for usability tests with clients, presentations for stakeholders, and for explaining interaction design for the developers.

Creating graphic design

Creating graphic design started early in the design process together with Feelgood’s marketing team. Since Feelgood’s only had graphic guidelines for print design, this took much more time than expected. Thankfully, the marketing team were pleasant to work with and gave me lots of freedom and guidance.

For recognition, we decided to keep the portal’s graphic design close to the current print style. However, for improving accessibility I added complementary colors for higher contrast and a new typeface for rendering numbers more clearly.

When the developers and I set up the first rough version of the Feelgood Design System, we started working in Sketch but quickly moved over to HTML, CSS and Javascript. Having the design system “live in the real world”, stakeholders could see how components both looked and behaved.

A sample of the components used in the Feelgood Client Portal
Some of the components in our design system. They were first drawn in Sketch and shared with the developers using Zeplin.

Usability testing

For evaluating the usability of the prototype, a marketing team member and I conducted interviews and usability tests with users of Feelgood’s web apps at the time.

During these sessions, we asked the users detailed questions about the web apps and observed them performing tasks on the prototype. We recorded audio and video of these sessions in addition to taking notes.

The usability testing went well. The users had no problems completing the tasks without assistance. However, we needed to make adjustments to our terminology since our choice of words often were confusing.

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

Development

Backend development started at the same time I was drawing wireframes, since a lot of time was needed for setting up input and output to our backend systems. This proved to be the most time-consuming task for the developers.

Frontend development started when we’re finishing drawing the paper wireframes. Since the interaction design and especially the graphic design was changed a lot during this phase, our frontend developers had to play catch-up from time to time.

Release

We released the portal in the Fall of 2017 and it was met with great feedback from both clients and Feelgood staff. It’s reached at kund.feelgood.se. However, you can’t sign up for an account unless you’re a client of Feelgood.

The Feelgood Client Portal running in the browser on a large screen
Placing an order for a service in the portal. The wizard pattern tested well during the usability testing sessions.
The Feelgood Client Portal running in the browser on an iPhone X
The portal was designed mobile first. Placing an order for a service on a small screen is just as easy as on a large screen.

Through continuous user research, we learnt that users find the portal easy-to-use, professional and nice looking. They enjoy having everything in one place. Feelgood’s call centre has also noted a decrease in certain calls.

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

After release, we realised we had made both minor and major design mistakes despite of previous usability testing. Luckily, working agile it’s been easy to prioritise, solve and push design changes. We update the portal every other week.

Current and future development

We’re still actively developing the portal by adding sought-after features and solving many minor and major usability issues found through continuous user feedback.

Here are some of the features we’ve added, with many more to come.

Signing in using BankID

For making it easier and more secure to sign in and active your account, we added the option of using BankID.

English language support

With a growing number of English speaking users, we made it easier to switch between Swedish and English at any time when using the portal.

Managing invoice data

This sought-after feature got a lot of criticism after its release. By making it possible to hide pieces of invoice data you’ve taken care of, users loved it.


What about the other solutions?

Once the previously mentioned upcoming solutions and features are released in the Fall of 2019, this page will be updated with information how they were designed.

How working here made me feel

Working at Feelgood is probably the best gig I’ve had as a consultant. The team is fantastic, our design process is great and what we’re doing is important to me. It has made me feel good (pun intended).

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

I have a great feeling about continue working with Feelgood for the rest of 2019 and hopefully 2020 too. We have a lot of good stuff to design for improving Feelgood’s digital solutions further.

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