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 started expanding and improving their digital solutions. I’m responsible for UX in the multi-disciplinary team developing these solutions.

Background

Feelgood is Sweden’s leading health company. It was founded in 1995, has over 700 employees and is since 2021 owned by Terveystalo, Finland’s largest healthcare service company.

Feelgood offers a wide range of health services to private individuals, organizations and businesses in both the private and public sector in Sweden. The company has 120 health clinics throughout the country.

Feelgood has over 8,000 companies and organizations as clients in Sweden, which in turn have a combined total of about 800,000 employees.

Feelgood believes that investing in health should be profitable as a result of increased productivity and reduced costs of poor health for businesses and increased quality of life for private individuals.

Solutions developed in parallel

In the Spring of 2017 I joined Feelgood as a designer for their small (but quickly growing) multi-disciplinary team assembled for developing a brand new web portal for the company’s clients. Since then, we’ve developed several solutions in parallel for both Feelgood clients and staff.

Feelgood Web Portal

For a long time Feelgood’s clients were using different web apps for managing orders, bookings, complaints and invoice data. We merged all of this into the single web app Feelgood Web Portal. The first version was released in late 2017, and is still being actively developed. It’s available at kund.feelgood.se (only clients can sign in).

Since its release the portal has continuously received great feedback from its users. It has also become crucial for Feelgood’s business side by being vital for securing new business contracts in fierce competition.

Feelgood Visitor Registration

Most Feelgood clinics don’t have staff devoted to welcoming and registering visitors for their appointments. With Feelgood Visitor Registration running on a tablet in each lobby Visitirs can register for their appointments themselves just by entering their personal identity numbers. Concerned staff members are then notified over email.

The first version we released in the Summer of 2018 and has gotten great feedback from both visitors and staff members. Unfortunately, it can’t be viewed online.

Feelgood app

With the Feelgood app employees at Feelgood’s clients can access their occupational healthcare bookings, report absence due to illness, take health tests and use Feelgood’s private healthcare service Feelgood Plus. It’s being developed together with Stockholm based studio Redmind.

The app was released for iOS (App Store) and Android (Google Play) in late 2019 and is getting more and more popular. It’s a top priority for Feelgood, and we’re rapidly updating it with new sought-after features and usability improvements.

Feelgood Design System

For providing a consistent, accessible and good-looking user experience throughout Feelgood’s digital solutions we started working on the Feelgood Design System while we were designing the Feelgood app. The design system is currently in use in the Feelgood app and Feelgood Visitor Registration. Later in 2021 it will be implemented in the Feelgood Web Portal.

An early and incomplete presentation of the design system is available at design.feelgood.se since late 2019. A big update with new content and adjustments is set for the end of 2021.


Feelgood Web Portal

The Feelgood Client Portal viewed a large and small screen

In 2017 Feelgood wanted to improve the user experience for their clients who managed orders, bookings, complaints, invoices and more. This led to the development of the Feelgood Web Portal.

Challenges and goals

Before the release of the Feelgood Web Portal, clients were using different web apps for all of these tasks. The design of these web apps was inconsistent and the user experience on mobile devices was poor.

With these insights we set the following goals:

  • Improve usability as much as possible.
  • Reduce the amount of needed input from users.
  • Provide consistent look and feel regardless of task.
  • 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.

These goals are continuously measured through usability testing, analyzing analytics data and through contact with Feelgood staff and client representatives.

Design process

When starting a new client project, I’ve learned that it’s wise to immediately invest yourself in business matters and content you’ll encounter. Hence, the team and I scheduled listening sessions at Feelgood’s call center. We needed to understand the issues employees at Feelgood’s clients are calling about.

We also talked to Feelgood staff handling orders, bookings and complaints from clients. It was crucial to learn what information they needed from clients and what the clients had to be able to do on their own in the portal.

Eliciting requirements using wireframes

Based on these insights I started drawing wireframes for eliciting requirements, getting answers to questions and speeding up complex discussions.

Over the years I’ve learned that a single wireframe says more than a thousand meeting minutes. It acts as a catalyst for decision-making!

Since providing a great user experience on mobile devices was one of our goals I worked mobile first and drew the wireframes for small screens. This is an excellent way for getting rid of unnecessary content and prioritizing what is left.

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

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.

Wireframing is great for this phase. It’s cheap, fun, fast and puts focus on content and functionality. Drawing together also makes everyone involved feel appreciated.

Keeping everyone in the loop this way went well. The developers were eased into understanding and contributing to the design and other stakeholders were driven to take needed high-level decisions, as expected.

Once everyone felt content with the wireframes, I created a clickable prototype using Sketch and InVision. This time I drew the digital wireframes for wide screens for taking advantage of more screen real estate when needed. For putting focus on content and interaction design I made the prototype black and white without any visual flair. In the past I’ve learned this is a good approach for avoiding stakeholders getting hung up on visual details.

We used this prototype for usability tests with clients, presentations for stakeholders and for documenting interaction design for the developers. It saved us a lot of time.

Expanding the graphic guidelines

I started working on graphic design while I was drawing wireframes. 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 and additions.

I kept the graphic design close to the print style for brand recognition, but I added complementary colors for improving accessibility and a new typeface for rendering numbers better. All interface components were drawn from scratch.

At this point, creating a design system was just a vague thought I had. We were just working on a single solution and a separate digital graphic profile had barely been discussed.

Once I had expanded the graphic guidelines, the developers and I started creating a simple component library. We started in Sketch, but quickly switched to HTML, CSS and Javascript and designed in the browser. For managing expectations we wanted to show stakeholders how colors, typefaces and components looked and behaved in different browsers on different type of screens. A perfect high-resolution PDF is deceitful.

A sample of the components used in the Feelgood Client Portal
Some components based on the expanded graphic guidelines. They were drawn in Sketch and shared with the team using Invision.

Usability testing the clickable prototype

For evaluating the InVision prototype a member of the Feelgood marketing team and I scheduled usability testing sessions with several users of Feelgood’s then-current web apps.

In these sessions we interviewed them about using the web apps, but we mainly observed them performing planned tasks using the prototype and discussed issues that came up. We used screen recording in addition to taking notes, so we could revisit sessions later. We had to travel outside of Stockholm for some sessions, but it was well worth it.

Users completed all tasks without any assistance. However, many found Feelgood’s terminology difficult to understand. Afterwards, we rewrote a lot of copywriting.

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 began while I was drawing wireframes. Setting up input and output to Feelgoods’s backend systems proved to be very challenging and time-consuming according to the developers. Luckily, no obstacle forced us to abandon or limit any major design decision.

Frontend development

Frontend development started early when everyone was satisfied with the paper wireframes. Once we had usability tested and improved the clickable prototype we really picked up the pace. From this point our frontend developer Adam and I worked closely since I was still adjusting interaction design and graphic design while he was writing code.

I did my best not waste time, but I went back and forth on too many visual details I should have decided on earlier.

The Feelgood Client Portal running in the browser on a large screen
Placing an order in the portal. The wizard pattern tested well in our prior usability testing 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 large screens compared to the previous web apps.

Release, feedback and impact

We released the portal in the Autumn of 2017. It’s available at kund.feelgood.se, but you can only sign in if you’re a client at Feelgood.

Immediately, we got great and constructive feedback from our users. We learned that they found it easy-to-use, that it felt professional and looked good. A lot of users appreciated finally having all features in one place, which was one of our goals.

“I must say that the new portal feels great, really user-friendly!”

– User in an actual email to Feelgood

“Now that your account manager has presented the portal, I can simply say one thing – amazing!”

– Client to Feelgood’s marketing department during a meeting

Feelgood’s call center noted welcome a decrease in order-related calls, which was another goal. There was a sense of excitement among the Feelgood staff when the portal was released.

Feelgood CEO Joachim Morath has multiple times stated that the Feelgood Web Portal has been crucial for Feelgood’s business in securing new client contracts.

Usability issues after release

Even though usability testing went well and the feedback we got after release was good, we still had to handle some tricky usability issues afterwards.

Unbearable switching organization

Some users are linked to multiple clients of Feelgood. When they wanted to switch to their account at another client, they had to sign out and sign in again with those credentials (another email and password). For making this easier we added a select element to the navigation. Using this element these users could switch to any another account with just two clicks.

This worked well for users linked to few clients. However, it became unbearable for users linked to many. We had missed that users could be linked to hundreds (!) of sub-organizations at each client. This broke the select element completely.

We finally solved it by not listing sub-organizations in the select element. For filtering content for specific sub-organizations on content-heavy pages we just added a new filter control among the others. The complaints stopped immediately! The issue was solved.

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

Missing contact information

Feelgood clients are obliged to supply personnel files to Feelgood on a regular basis. The contact information in these files is used when placing orders and making bookings for client employees. This way users don’t have to remember information such as personal identity numbers and phone numbers for all of their colleagues.

I was naive and assumed these files always were tidy and complete. We quickly learned this wasn’t the case when clients started raising complaints about some of their employees not being contacted for a scheduled booking. We hadn’t done that since we didn’t have phone numbers to some of them.

Luckily, this was an easy fix. We just added additional input fields in the order placement flow when incomplete information for a selected employee was identified.

Frustrating finding replies to orders

After placing an order, a user can continue discussing it with Feelgood using a message thread on the page for that specific order. Replies from Feelgood can be very important and should be read as soon as possible. Hence, we send the user an email whenever a new reply from Feelgood is posted.

However, I had missed that we didn’t include a link to the order page in the email template. For privacy reasons the reply can’t be included in the email template. This made the users very frustrated since they had to go through all of their orders one by one to find the reply. We had to fix this immediately!

Luckily, the solution was obvious. We added the link to the email template, but we still weren’t satisfied. On the page listing all your orders we decided to highlighted orders that had gotten new replies. We even added a filter control to only show orders with new replies. Now users could spot orders with new replies without having to check their inboxes. According to feedback all of this was very appreciated.

The order list in the portal
Orders with unread replies are clearly marked with these yellow labels.

New features

Apart from bug fixes and usability improvements we have kept updating the Feelgood Web Portal with new sought-after features since its release in 2017.

Sign in using BankID

BankID is incredibly popular electronic identification system in Sweden. It’s used by banks, government agencies and private businesses for offering a safe and secure way of verifying your identity when signing in to services and making transactions. It’s used by over 80 percent of the Swedish population according to the 2019 edition of the annual study Svenskarna och Internet by Internetstiftelsen.

Though we initially only offered email and password as a way to sign in to the portal, we quickly added the option of using BankID.

From a business perspective support for BankID was a must-have feature. Many clients require it for signing a contract.

English language support

Many Feelgood clients have a substantial amount of native English-speaking employees. Therefore, it made sense to offer English language support for making the portal more accessible. From a business perspective this also had to be done since more and more clients are requiring it by contract.

Manage invoice data

This was a simple but sought-after feature we couldn’t include in the initial release of the portal due to backend limitations, but thankfully soon afterwards. At first, users weren’t satisfied since they couldn’t hide invoice data they had taken care of and were forced to remember it on their own. Luckily, this was an easy fix and once we added this option everyone was satisfied.


Feelgood Visitor Registration

Screenshot of the Feelgood Visitor Registration when entering your personal identity number with a numpad.

After releasing the Feelgood Web Portal, Feelgood set their sights on improving the visitor registration process at their clinics. This led to the development of the Feelgood Visitor Registration during 2018.

Challenges and goals

Feelgood has 56 clinics throughout Sweden that are completely branded as their own. Prior to the Feelgood Visitor Registration visitors didn’t always have a smooth experience registering for their appointments at these clinics. This because most of them simply didn’t have staff devoted to welcoming and registering visitors.

This also affected staff members who repeatedly had to go and check if their visitors had arrived or not.

With these insights we set the following goals for the solution:

  • Registering your appointments should be simple enough to do on your own.
  • Automatically notify concerned staff when an appointment is registered.
  • Create an easily scalable solution for a wide national release.
  • Offer visitors help over phone if technical issues arise.

Design process

With the recent release of the Feelgood Web Portal we felt confident about developing this much simpler solution. However, we understood we had a broader user group this time.

Every employed person in Sweden with access to occupational healthcare could be a potential user. Hence, research and usability testing had high priority. 

Interviewing clinic staff

For learning about issues visitors and staff had been facing we scheduled interviews with staff members at a few clinics in Stockholm.

We focused on clinics without staff devoted to welcoming visitors, but since clinics with devoted staff also were interested we met with them too. Despite having devoted staff members these clinics wanted to be able to relieve them during busy hours.

When discussing issues we learned that visitors upon registration had to be informed when being:

  • So late they have to reschedule the appointment.
  • Several days, weeks or even months early.
  • Slightly late but maybe not too much.
  • On time but at the wrong clinic.

Sometimes visitors show up too early to register for their appointments. Usually days or weeks, but sometimes even months!

Screenshot of the Feelgood Visitor Registration showing a failed appointment registration.
It happens that visitors are on time for their appointment, but at the wrong clinic. This is how we alert them about this.

Concerns about getting notifications
Right away it was clear staff members preferred the built-in notification feature in their journal system. Unfortunately, we knew this system was limited. The feature couldn’t be triggered by a separate solution.

When discussing options most staff members were reluctant to even try using SMS or email. They didn’t want to use email because they didn’t like having their email client open all day for privacy reasons. They disliked using SMS because they had separate work phones they seldom used in favor of their own.

After some thought we chose email over SMS. This because phones could be forgotten at home, but the clinics always had computers available.

Concerning issue of privacy we assured staff members that the subject line of an email wouldn’t contain any personal information about the visitor. It would just say that a visitor for a certain appointment time had arrived. They staff members were still a bit reluctant but agreed to give it a try.

Creating a high-fidelity prototype

Because the Feelgood Visitor Registration was much simpler in scope compared to the Feelgood Web Portal I created a high-fidelity prototype right away instead of drawing wireframes.

Thanks to the prior research and the already expanded the graphic guidelines I had everything I needed. The prototype was done in Invision and shared with the team and other stakeholders for communicating and getting feedback on what were designing.

We actually didn’t usability test the prototype outside of our team. This because we felt confident in our research, but mainly because we were planning a limited release at a single clinic in Stockholm. This way we would test the solution in the field and solve any issues before a wide national release.

Screenshot of the Feelgood Visitor Registration when entering your personal identity number with a full keyboard.
Temporary personal identity numbers can contain letters. Hence, you can switch between a numpad and a full on-screen keyboard.

Development

Once everyone in the team felt confident in the prototype we started development. Once again the developers and I sat right next to each other. We always had time for quick questions, designing in the browser and taking decisions on the fly. This way of working has and continues to be one of the strengths of our team.

For making the solution easily scalable we developed it as a website to be shown on tablet. By having a web-based solution instead of a native app we wouldn’t be dependent on a tablet running Android or iOS.

This is how successfully registering for an appointment works:

  1. The visitor enters his or her Swedish personal identity number.
  2. The journal system is searched for an appointment linked to this number.
  3. When the appointment is found an email is sent to the concerned staff member.
  4. The visitor is informed the appointment was found and is instructed to wait for the staff.

If the visitor is too late or the registration fails a message about this is shown instructing the visitor how to proceed. If the reason is due to technical issues we provide a phone number to call.

Screenshot of the Feelgood Visitor Registration showing a successful appointment registration.
How it looks when you’ve successfully registered for an appointment.

Limited release and feedback

After talking to a few clinics in Stockholm about the pilot study we settled on Feelgood Marievik. Their staff was eager and could start as soon as possible.

After two days of setting up the tablet and instructing the staff how it worked we agreed that they would get back to us in two months. In the meantime we contacted to two more clinics about expanding the limited release.

Screenshot of the Feelgood Visitor Registration using the previous graphic guidelines.
How Feelgood Visitor Registration looked when first released. It was later updated to use the Feelgood Design System.

Two months later we got the following general feedback:

  • It worked really well, both for visitors and for staff members.
  • It was easy to get it running and our instructions were great.
  • There had been no technical issues regarding the tablet at all.
  • Staff liked not having to ask for ID and personal identity numbers.
  • Some staff members had continued using their journal system leading to internal confusion.

However, there were some usability issues:

  • Registrations failed when the concerned staff member didn’t have his or her email address in the journal system.
  • Appointments created in the journal system just before their time slots were sometimes not found.
  • Visitors didn’t understand they had to enter the full year of their personal identity numbers.
  • Some staff members didn’t notice emails due to individual settings in their email clients.
  • From time to time the tablet screen got dirty, which made it hard to read.
  • Some visitors had trouble reading due to some text being too small.

Fixing usability issues

While the issues listed above were solvable, the issue of registrations failing due to staff members not having their email address entered in the journal system is still an ongoing but not too frequent issue. When it occurs we solve it within 20 minutes. Thankfully, Feelgood has put more manpower on going through their journal system for finding incomplete entries like this.

Supporting two formats for personal identity numbers
Despite hinting that users must nter their personal identity numbers using the format YYYYMMDDNNNN we added support for YYMMDDNNNN, which solved the issue. This is a valid format in Sweden and we were just naive not to support it initially.

Importing appointment data more frequently
Not finding recently created appointments was something our developers figured out. They solved it by starting importing data from the journal system every tenth minute. Previously it was done less frequently.

Providing instructions for configuring email clients
For helping staff members configure their email clients correctly our project lead Sofia added a section about this in the guide we send to everyone when Feelgood Visitor Registration is set up at a new clinic. Sofia also added a section explaining that the tablet screen must be cleaned on a regular basis.

Making the interface larger in scale
For solving the issue of some text being too small to read we made the entire interface larger by increasing the browser zoom level. This issue is a great example that you can’t achieve great accessibility by just following WCAG 2.1 (as we do in all projects). Usability testing is also needed for finding all accessibility issues.

Fixing more issues found during observations
Apart from these issues our developer Andreas and project lead Sofia documented two more issues when performing observations at another clinic in Stockholm we had expanded the limited release to.

Sofia had noticed that some visitors didn’t see or understand they should even use the tablet! They just sat down and waited without using it at all. This issue took us by surprise, but in retrospect it was so obvious.

How could visitors possibly know they should register for their appointments on a tablet without some instructions?

Luckily, we solved this huge issue by putting framed A3 posters next to the tablet telling visitors what to do. This is a great example of how context matters and you need consider more than just the digital interface of your product.

The lobby of a Feelgood clinic.
The lobby of a Feelgood clinic. Can you spot the tablet?
The tablet running Feelgood Visitor Registration standing on a reception desk next to a poster telling visitors to register here.
Posters like this managed to draw visitors’ attention to the tablets at the clinics.

Andreas noticed that some users fumbled when entering their personal identity numbers due to a small input delay on the on-screen keyboard. After having pressed a button the remaining buttons weren’t clickable until after a few hundred milliseconds. Hence, following clicks didn’t always register which confused visitors.

While Andreas couldn’t get rid of the input delay completely he managed to reduce it so much that this issue became neglectable.

The reason for this input delay was because we had designed a custom on-screen keyboard instead of using the default on provided in the Android operating system. We did this because:

  • We could discard characters not valid in a Swedish personal identity number.
  • We wanted a keyboard that followed our expanded graphic guidelines.
  • We needed to remove the risk of closing the keyboard by accident.

Wide release, feedback and impact

After the initial and expected usability issues Feelgood Visitor Registration has and continues to work very well. It has become a vital part of Feelgood’s clinics throughout Sweden.

Clinic managers and regional managers give us consistent great feedback and we barely hear about any usability issues anymore. Staff members really appreciate the automatic notifications over email.

Feelgood Visitor Registration is currently set up at 30 out of Feelgood’s 56 own clinics in Sweden saving time and reducing stress for both visitors and staff.

Late Feelgood Design System update

In the spring of 2021 after a hefty delay due to the pandemic and the business prioritizations that followed we finally rolled out a visually updated version of the Feelgood Visitor Registration.

Now it follows the design guidelines in the Feelgood Design System that was previously just available in the Feelgood app. We also improved some copywriting for messages related to failed registrations.

The clinics were notified about the update an the reasons why months in advance. Once it was rolled out everything continued to work just as well as before.


Feelgood app

Information about this solution will be added later in 2021.

App prototype running on iPhone 8
Usability testing a prototype of a big app update in the end of 2019.

Feelgood Design System

Information about this solution will be added later in 2021.

Adam looking at a whiteboard sketch.
Frontend developer Adam Heidmark having a look at a sketch of the website presenting Feelgood Design System.

How working at Feelgood has made me feel

Working at Feelgood is the best consultant gig I’ve ever had! Our team is filled with fun, skilled and lovely people, our way of working is smooth and flexible with very few meetings and what we’re working on contributes to a positive effect on the lives of many people.

Feelgood CTO Paul Cohen standing next to a whiteboard fileld with post-it notes taking a photo after a sprint retrospective.
Feelgood CTO Paul Cohen documenting a sprint retrospective at the office. As usual the positive notes clearly outweigh the negative ones.

Helping people get better healthcare (especially for mental health issues) is one of the main reasons I’ve stayed with Feelgood for over four years. It’s the longest consultant gig I’ve had by far.

I look forward to working with Feelgood throughout 2021 and beyond. We have a lot of great things planned for expanding and improving the company’s digital solutions even further.

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