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 expand and improve their digital solutions. 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 in Sweden. The company has 120 health clinics, 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.

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.

Solutions developed in parallel

Since the Summer of 2017, I’ve been working as a designer in a multi-disciplinary team at Feelgood. Together we’ve been developing several digital solutions in parallel for both Feelgood’s clients and their own staff.

Some of these solutions have already been released and are continuously being improved. Others are awaiting release and will be presented in more detail in this case study later.

Feelgood Web Portal

For a long time, Feelgood’s clients were using several different web apps for managing orders, bookings, complaints and invoices. We successfully merged this into one single web app with the Feelgood Web Portal released in the Fall of 2017.

Feelgood Visitor Registration

Many of Feelgood’s health centres don’t have staff just for registering visits. With the Feelgood Visitor Registration released in the Spring of 2018, you just register your visit just by entering your personal identity number on a tablet located at each centre.

Feelgood App

In the Fall of 2019, Feelgood released their first proper app for iOS and Android developed together with a third-party agency. With the app, client employees can access Feelgood’s add-on private health care service Feelgood Plus. We’re currently working on a major update with more sought-after features.

Feelgood Design System

For providing a consistent user experience throughout Feelgood’s digital solutions, we’re currently developing and using and a design system titled Feelgood Design System. It will be released, soon…


Feelgood Web Portal

The Feelgood Client Portal viewed a large and small screen

In 2017, Feelgood set out to improve the user experience for their clients when managing orders, bookings, complaints et cetera. This resulted in the release of the Feelgood Web Portal.

Challenges and goals

Before the portal’s release, Feelgood’s clients were using different web apps for all of these tasks. The interaction design and graphic design of these solutions 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 usability as much as possible.
  • Provide a consistent look and feel regardless of task.
  • Reduce the amount of needed data input from users.
  • Save time for Feelgood’s staff handling orders and booking.
  • Reduce calls to Feelgood’s call centre about orders and bookings.
  • Provide a great user experience on both mobile devices and regular computers.

The goals are continuously measured through usability testing, analyzing analytics data and having conversations with responsible Feelgood staff.

Design process

When starting a client project, I immediately start learning about business matters and content I will encounter. This project was no exception. The team and I scheduled several listening sessions at Feelgood’s call center. We needed to understand the issues employees at Feelgood’s clients are calling about.

We also spent a lot of time talking to Feelgood staff handling orders, bookings and complaints. It was crucial to learn what information they needed from clients and what the clients must be able to do in the portal.

Eliciting requirements using wireframes

Based on these learning about Feelgood’s business and web apps, I started drawing paper wireframes for eliciting detailed requirements for the rest of the design process.

Since providing a great user experience on mobile devices was a top priority, I worked mobile first and drew wireframes for small screens. Based on my experience this is also an excellent method for getting rid of unnecessary content.

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

I presented wireframes to the team and other stakeholders several times per week (sometimes several times per day) over about two months. During each session, we raised new questions but always answered more.

From my experience, paper wireframing is great for this phase. It’s cheap, fast and puts focus on content and functionality. Drawing together also makes team members and other stakeholders feel included.

Keeping everyone in the loop like this went well. Our developers were gradually eased into implementing our design choices and our stakeholders were driven to take needed high-level decisions.

Once everyone felt content with the wireframes, I created a clickable prototype using InVision with wireframes drawn for wide screens in Sketch. We used this prototype for usability tests with clients, presentations for stakeholders, and for documenting detailed interaction design for the developers.

Expanding the graphic profile

Putting together graphic design for the portal stared early in the design process, in parallel with the wireframing. It proved to be more time-consuming than expected since Feelgood only had graphic guidelines for print design. Thankfully, the marketing team were supportive and trusted me making necessary adjustments.

I kept the portal’s graphic design close to the print style for brand recognition. However, I improved accessibility by adding new high contrast complementary colors and a new typeface for rendering numbers better. All interface components were drawn from scratch.

Once the graphic design was set, the developers and I started working on the first version of the Feelgood Design System. We started in Sketch, but quickly switched to HTML, CSS and Javascript. We wanted to show our stakeholders not only how components looked, but also how they behaved.

A sample of the components used in the Feelgood Client Portal
Some components in the first version of the Feelgood Design System. They were drawn in Sketch and shared using Zeplin.

Usability testing a clickable prototype

For evaluating the previously mentioned InVision prototype, a member of the Feelgood marketing team and scheduled testing sessions with users of Feelgood’s web apps.

In these sessions we interviewed the users about using the web apps, but focus was on observing them performing specific tasks in the prototype and discussing issues that came up. We recorded the sessions on video in addition to taking notes so we could revisit them later if needed. We had to travel outside of Stockholm for these sessions, but it was well worth it.

The usability tests went well! Users completed all tasks without any assistance. However, many found Feelgood’s terminology too difficult to understand. We ended up rewrite a lot of expressions.

Clickable areas in the InVision prototype
Setting up clickable areas in the InVision prototype. It had over 50 screens at the time.

Backend development

Backend development started in parallel with the wireframing. Setting up input and output to Feelgoods’s backend systems proved to be very challenging and time-consuming for the developers. Luckily, no obstacle forced us to abandon or limit any major design decision.

Frontend development

Frontend development started once we were content with the paper wireframes. From that point on, our frontend developer and I worked closely since the interaction design and especially the graphic design still was being adjusted as we were developing. We did our best trying to minimize wasting time.

Release and feedback

We released the portal in the Fall of 2017. It’s reached at kund.feelgood.se. However, you can’t sign in without being a client of Feelgood.

The portal was instantly met with good feedback. We learned that users at clients found the portal easy-to-use, professional and visually pleasing. They appreciated finally having everything in one place. Feelgood’s call centre also noted a welcome decrease in calls related to orders.

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

“Now your account manager has presented the portal, I can simply say one thing – amazing!” – Client to Feelgood’s marketing department

The Feelgood Client Portal running in the browser on a large screen
Placing an order in the portal. The wizard pattern tested well during our user sessions.
The Feelgood Client Portal running in the browser on an iPhone X
Placing an order on small screens is just as easy as on larger screens.

Usability issues after release

Even though our prior usability testing went well and the initial feedback was good, we still ran into some tricky usability issues after releasing the portal. This is how we solved them.

Unbearable switching organisation

Some users are linked to multiple organisations that are clients of Feelgood. For making it easy to switch between multiple organisations, we added a select element in the header of the website. While this worked well for users linked to few organisations, it became unbearable for others.

I had missed that users could be linked to hundreds (!) of sub-organisations. This broke the select element solution and raised complaints from clients using ut. The team and I immediately focused the upcoming sprint on this issue.

Selecting and filtering by sub-organisation
Top: Selecting your top organisation. Bottom: Adding a sub-organisation filter.

We limited the select element to just listing top organisations. For filtering content such as orders based on sub-organisations we made it possible to search for and add sub-organisations to the filtering controls on those pages. The complaints stopped. Our design update was thankfully well received

Missing contact information

For not making users enter the same information again and again, Feelgood has their clients supplying personnel files containing contact information on a regular basis. This contact information is used when placing orders among other things.

I took for granted these personnel files always were complete. However, we learned this wasn’t the case when clients started raising complaints about not being contacted about orders. How could we? We didn’t have all of their email addresses.

Thankfully, this was an easy fix. We simply added extra input fields in the order placement flow when incomplete contact information was found.

Frustrating finding replies to orders

After having placed an order, you can communicate with Feelgood through the page for that specific order. Replies from Feelgood are important and should be read as soon as possible.

While we sent users emails when replies were posted, I didn’t realize we didn’t include links to the specific order pages. This made the emails useless and frustrated users who had to go through orders one by one to find specific replies. For security reasons the actual replies aren’t included in the emails.

The order list in the portal
Orders with unread replies are clearly marked with yellow “stickers”.

We solved this issue by adding links to the order pages in the emails. We also added a “sticker” to each order preview with unread replies in the portal. Now, users could more easily see orders with unread replies directly on the order list page. According to our feedback, this was an appreciated addition!

New features

The portal is still being actively developed with usability improvements and new sought-after features. This is what we’ve added so far.

Sign in using BankID

For making it easier and more secure to sign in (and active your account), we added the option of using BankID. For some clients it’s the only option they allow.

Support for English

With a growing number of English speaking employees at Feelgood’s clients, we made the portal more inclusive by adding support for English.

Manage invoice data

This was a simple, but very sought-after feature we were happy to add. At first, users were not satisfied since you couldn’t hide data related to invoiced they had already handled. Once we added this option, they loved it!

Handle bookings

Handling bookings like vaccinations, health checkups and therapy sessions scheduled after having placed orders took more time than expected due to technical obstacles. It’s currently being evaluated with a pilot client.


What about the other solutions?

The Feelgood Visitor Registration has been up and running since the Spring of 2018. The first version of the Feelgood app was released in the Fall of 2019. The Feelgood Design System is currently being designed and developed.

More information about these digital solutions will be presented in this case study during late 2019 to early 2020.

App prototype running on iPhone 8
Usability testing a prototype of the upcoming app in the Fall of 2019.

How this made me feel

Working at Feelgood is the best gig I’ve had as a consultant. The team is fantastic, our design process is solid and what we’re doing is important to me.

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 and a half years.

I have a great feeling about continue working with Feelgood for the rest of 2019 and 2020. We have a lot of good stuff in our pipeline for expanding and improving Feelgood’s digital solutions.

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