Digital solutions for health company Feelgood
Ongoing since April 2017
In 2017 Swedish health company Feelgood started expanding and improving its digital solutions for both its clients and staff. I’m responsible for UX in their multi-disciplinary team developing these solutions.
Background
Feelgood is Sweden’s leading health company. It was founded in 1995 and has over 1,000 employees. Since 2021 it’s owned by Terveystalo, Finland’s biggest healthcare service company.
Feelgood offers a wide range of health services to private individuals, organizations, and businesses in the Swedish private and public sectors. The company has 155 health clinics throughout the country.
Feelgood has over 8,000 companies and organizations as clients in Sweden, with a combined total of about 1,200,000 employees.
Feelgood believes that investing in health should be profitable as a result of increased productivity, reduced costs of poor health for businesses, and increased quality of life for private individuals.
Quick summary
Since 2017, the team Im in has developed the following solutions for Feelgood’s clients and staff.
Feelgood Web Portal
Feelgood’s clients were initially using different web apps for managing orders, bookings, complaints, and invoice data. Now they do all of this using the Feelgood Web Portal. It was initially released in the Autumn of 2017. It’s available at kund.feelgood.se.
Feelgood Web Portal keeps getting great feedback from clients year after year. It’s also become crucial for Feelgood’s business side in securing new client contracts.
Feelgood Visitor Registration
Most Feelgood clinics don’t have staff devoted to registering visitors for appointments. Using Feelgood Visitor Registration, visitors can do this themselves just by entering their personal identity numbers. It was initially released in the Summer of 2018.
Feelgood Visitor Registration makes it easy for visitors to register for their appointments at Feelgood’s clinics. Staff praises it for saving time and reducing stress on a daily basis.
Feelgood Design System
For making sure everyone has a great and accessible experience using Feelgood’s digital solutions we started working on a design system in the Spring of 2019. It’s now used in the Feelgood mobile app, Feelgood Visitor Registration, and Feelgood Web Portal. More solutions will follow.
The design system is presented at design.feelgood.se and is also available in Figma. A big update with (most) components was released in November 2022. More updates will follow in 2023.
Feelgood Design System is an essential toolbox for me as a designer and the developers in our team. Without it, we would be far from as efficient in our daily work.
Feelgood mobile app
Using the Feelgood mobile app, employees at Feelgood’s clients can view bookings, report absence, take health tests, manage vaccination shots, and more. We’re actively updating it with new sought-after features and usability improvements after its inital release in the Autumn of 2019.
The app is developed together with Stockholm-based studio Redmind. It’s available for iOS (App Store) and Android (Google Play). How it was designed will be added to this case study in 2023.
Feelgood Web Portal
In 2017 Feelgood set out to improve the user experience for client employees managing orders, bookings, complaints, invoices, and more. This led to the development of Feelgood Web Portal.
Challenges and goals
Before Feelgood Web Portal, these employees were using different web apps for each task. These web apps had inconsistent design and user experience on mobile devices was poor.
With this in mind we set the following goals:
- Improve usability as much as possible.
- Reduce amount of needed input from users.
- Provide a consistent look and feel regardless of the task.
- Save time for Feelgood’s staff handling orders and bookings.
- Reduce calls to Feelgood’s call center about orders and bookings.
- Provide a great user experience on both mobile devices and desktop computers.
These goals are measured through usability testing, analytics data, and through contact with Feelgood staff and client representatives.
Design process
Immediately, the team and I scheduled listening sessions at Feelgood’s call center. We needed to understand what issues Feelgood’s clients were calling about and we wanted to hear from then directly.
We also set up meetings with Feelgood staff who handled orders, bookings, and complaints. We needed to learn what information they needed from clients and what clients had to be able to do on their own.
Eliciting requirements using wireframes
With this insight I started drawing wireframes for eliciting requirements, getting answers to complicated questions, and speeding up high-level decision-making among stakeholders.
One wireframe says more than a thousand meeting minutes. It acts as a catalyst for decision-making!
For providing a great user experience on mobile devices I worked mobile-first and drew wireframes for small screens. This is a great way to prioritize content and get rid of what’s not necessary.
I discussed the wireframes with the team and other stakeholders several times per week (sometimes several times per day) over two months. Each time 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 feel appreciated.
Keeping everyone in the loop proved to be smart. The developers were eased into understanding and contributing to the design. Other stakeholders got help taking high-level decisions, as expected.
Once everyone was satisfied, I created a prototype using Sketch and Invision. Now I made wireframes for wide screens to take advantage of more screen real estate. For putting focus on content and functionality I made everything black and white without much visual flair. I’ve learned this is a great approach for avoiding stakeholders to get hung up on graphical 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 the wireframes. It was more time-consuming than expected since Feelgood only had graphic guidelines for print design. Thankfully, I got to make necessary adjustments. I added new colors for improving accessibility and a new typeface that rendered numbers better.
At this time a design system was just a thought. We were just working on a single solution and new graphical guidelines had not been discussed.
Once I had expanded the graphic guidelines, the developers and I created a component library. We started in Sketch, but quickly switched to HTML, CSS, and Javascript. We wanted to show stakeholders how colors, typefaces, and components looked and behaved in different browsers on different types of screens.
Usability testing the prototype
For evaluating the prototype, Sofia of the Feelgood marketing team and I scheduled usability testing sessions with users of Feelgood’s then-current web apps.
We interviewed users about these web apps, but we mainly observed them performing tasks in our prototype. When issues arose, we discussed them in detail. We had to travel outside of Stockholm for, but it was well worth the time.
All ssers actually completed all tasks without assistance. However, many found Feelgood’s terminology too confusing. We had to rewrite a lot of copywriting.
Backend development
Backend development began while I was drawing wireframes. Working with Feelgood’s backend systems was very time-consuming according to the developers. Luckily, nothing forced us to abandon or limit any planned design.
Frontend development
Frontend development started when stakeholders were satisfied with the paper wireframes. When we had finished usability testing we picked up the pace. Our frontend developer Adam and I worked closely since I was still adjusting some of the design while he was writing code.
I tried not to waste time, but I went back and forth on too many visual details I should have finished earlier.
Release and impact
We released the portal in the Autumn of 2017. Immediately we got got great and constructive feedback from users.
Users found it easy-to-use, professional, and good-looking. They appreciated finally having all features in one place, which was one of our goals. Feelgood’s call center also noted a decrease in order-related calls, which was another of our goals.
“I must say that the new portal feels great, really user-friendly!”
– User in an email to us
“Now that your account manager has presented the portal, I can simply say one thing – amazing!”
– Client to Feelgood’s marketing department
Feelgood CEO Joachim Morath has stated that Feelgood Web Portal is crucial for Feelgood’s business in securing new client contracts.
Usability issues after release
Even thougg usability testing went well and initial feedback was great we still had to handle some tricky usability issues shortly after release.
Unbearable switching organization
Some users are linked to multiple organizations. At first, they had to sign out and sign in again (with different credentials) for switching organization. For making this easier we put a select element in the bottom of the navigation. Now users could switch accounts with just two clicks.
This worked well for users linked to a few organizations, but it became unbearable for some users who were linked to hundreds (!) of sub-organizations at an organization. This broke the design completely.
We solved it by not listing sub-organizations in the select element. For filtering content for specific sub-organizations, we added a new filter control on content-heavy pages. No more complaints!
Missing contact information
Feelgood clients are obliged to supply personnel files to Feelgood regularly. Information in these files is then used when placing orders so users don’t have to remember personal and contact information for employees they’re responsible for.
I was naive and assumed these files were tidy and complete. I quickly learned it wasn’t so when clients started raising complaints about their employees sometimes not being contacted for appointments. We simply didn’t have their phone numbers since it wasn’t included in personnel files. We solved this by adding input fields for incomplete information in the order placement flow
Frustrating finding replies to orders
After placing an order, users can ask Feelgood additional questions in a message thread on the page for the specific order. Replies from Feelgood are often important and should be read as soon as possible. Hence, we send the user an email whenever a new reply is posted.
Unfortunately, I had missed that we didn’t include a link to the page in the emails. This made users frustrated since they had to go through all orders one by one to find the reply. For privacy reasons, the reply cannot be included in the email
We immediately added the link to the emails, but we wanted to do more. On the page listing all orders, we started highlighting orders with new replies. Now users could spot orders with new replies here too.
New features
Apart from bug fixes and usability improvements Feelgood Web Portal has also been updated with new and sought-after features.
Sign in using BankID
BankID is a 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.
From a business perspective, support for BankID was a must-have feature. Many clients require it for signing a contract.
English language support
A lot of Feelgood’s clients have a substantial amount of native English-speaking employees. Hence, adding English language support made sense for two reasons. First, it made the portal more accessible. Second, it was good for business since more clients were asking for it.
Manage invoice data
This was a simple but sought-after feature we couldn’t include in the initial release due to backend limitations, which were sorted out a couple of months later.
Feelgood Design System update
In the Autumn of 2021 after a delay due to the Covid-19 pandemic and business prioritizations that followed, we shipped a visually updated version of Feelgood Web Portal.
Now it follows Feelgood Design System just like the Feelgood mobile app and Feelgood Visitor Registration. The update also included improvements to copywriting, accessibility, and usability.
Our frontend developers Adam and Andreas did a fantastic job on this update!
While a lot of fine-tuning remains, this major design update has been well received. Apart from some performance issues and a few bugs during the first two days after release, Feelgood support staff has not noted any complaints about the new look.
Feelgood Visitor Registration
After releasing Feelgood Web Portal, Feelgood set its sights on improving the visitor registration process at its clinics. This led to the development of Feelgood Visitor Registration in 2018.
Challenges and goals
Feelgood has 56 clinics in Sweden branded as their own. Visitors often struggled a bit when registering for their appointments at these clinics. Simply because most of these clinics don’t have staff devoted to welcoming them. Hence, treatment staff repeatedly had to check if their visitors had arrived or not.
We set the following goals:
- It must be easy to scale for a nationwide release.
- Treatment staff are to be notified when an appointment is registered.
- Registering an appointment must be simple enough to do on your own.
- Visitors must be able to get help over the phone if technical issues arise.
Design process
Compared to Feelgood Web Portal we had an even broader group of users to design for now. Every employed person in Sweden with access to occupational healthcare could be a potential user.
Interviewing clinic staff
For learning about issues visitors and staff had been facing, we scheduled interviews with staff at clinics in Stockholm. We focused on clinics without staff devoted to welcoming visitors, but we also met with others. Some were interested in what we were doing and wanted to relieve their staff during busy work hours.
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.
Concerns about notifications
We learned that staff preferred the built-in notifications in their journal system. Unfortunately, it couldn’t be triggered by a separate solution.
When discussing options most staff members were reluctant to try using SMS or email. They didn’t want to have their email client open all day for privacy reasons. They disliked using SMS because it meant they would always have to carry both their work phone and their personal phone.
We ended up choosing email. Phones can be forgotten at home, but the clinics always have computers available.
Concerning privacy we assured staff members that the email subject line wouldn’t contain any personal information about the visitor. It would just say that a visitor for an appointment at a certain time had arrived. The staff members were still a bit reluctant, but they agreed to try.
Creating a high-fidelity prototype
Because Feelgood Visitor Registration was a simpler solution than Feelgood Web Portal I created a high-fidelity prototype using Invision without drawing paper wireframes first.
For usability testing we decided to do a limited release of at a single clinic in Stockholm. This way we could test the solution in field before a later nationwide release.
Development
Once all stakeholders felt satisfied with the prototype we started development. The developers and I sat right next to each other so we always had time for questions and taking decisions on the fly. This way of working continues to be a great strength of our team.
We chose a web-based solution over a native app. We felt we could do quicker updates this way and wouldn’t be dependent on a tablet running a specific operating system.
How registering for an appointment works:
- The visitor enters a Swedish personal identity number.
- The journal system is searched for an appointment linked to this number.
- The concerned staff member gets an email when the appointment is found.
- The visitor is informed that the appointment was found and is instructed to wait.
If the visitor is too late or the registration fails we show a message with instructions for how to proceed. If registration fails due to a technical issue we show a phone number to call.
Limited release and feedback
After talking to a few clinics in Stockholm about the pilot study we settled on Feelgood Marievik. After two days of setting up the tablet and instructing the staff how it worked, we agreed they would get back to us in two months.
After two months we got the following feedback:
- It worked 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 visitors for ID and personal identity numbers.
- Some staff members had continued using their journal system, which led to confusion.
However, there were also usability issues:
- Appointments created in the journal system just before their time slots were sometimes not found.
- Registrations failed when staff members didn’t have their email addresses in the journal system.
- Some staff members didn’t notice emails due to individual settings in their email clients.
- Visitors didn’t understand they had to enter the full year in their identity numbers.
- Sometimes the tablet screen got dirty, which made it hard to read.
- Some visitors had trouble reading due to text being too small.
Fixing usability issues
Supporting two formats for personal identity numbers
Despite hinting that users must enter their personal identity numbers using the format YYYYMMDDNNNN we added support for YYMMDDNNNN. It was naive and lazy of us not to support it initially.
Importing appointment data more frequently
Not finding recently created appointments was something our developers solved by importing data from the journal system every tenth minute. It was initially done less frequently.
Providing instructions for configuring email clients
For helping staff members configure their email clients our project lead Sofia added instructions in the guide we sent to clinics that were about to set up Feelgood Visitor Registration. She included a reminder to clean the tablet screen regularly.
Scaling up the interface
Even though no interface text was smaller than 16 pixels, some users still had trouble reading. We decided to make the entire interface larger in scale. This was a great example that you can’t achieve great accessibility just by following WCAG 2.1. You have to do usability testing too.
Additional issues found during observations
Our developer Andreas and Sofia found two more issues when performing observations at another clinic. Sofia had noticed that some visitors didn’t understand that they had to use the tablet. They just sat down and waited.
We solved this issue by putting framed posters next to the tablets telling visitors what to do. This was a great reminder that there’s more to great usability than a solid digital interface.
How could visitors know they should register for their appointments on a tablet without proper instructions?
Andreas had noticed that some users fumbled when entering their personal identity numbers due to input delay on the custom on-screen keyboard. This confused fast-typing users who thought they had entered digits they hadn’t.
While Andreas couldn’t remove the delay completely, he managed to reduce it so much so the issue became neglectable. We had opted for a custom on-screen keyboard instead of the default one on Android because we:
- Could discard characters not valid in a Swedish personal identity number.
- Wanted a keyboard that followed our expanded graphic guidelines.
- Needed to remove the risk of closing the keyboard by accident.
Nationwide release and impact
After we sorted out the initial usability issues, Feelgood Visitor Registration has become an important part of most Feelgood clinics throughout Sweden. Clinic managers and regional managers continue to praise it. Despite initial hesitation staff now appreciates using email for being notified about arriving visitors.
Feelgood Visitor Registration is currently running at 30 out of Feelgood’s 56 clinics. According to staff it saves time and reduces stress for everyone on a daily basis.
Feelgood Design System update
In the Spring of 2021 after a delay due to the Covid-19 pandemic and business reprioritizations that followed, we shipped a visually updated version of Feelgood Visitor Registration. Now it follows the design guidelines in the Feelgood Design System.
We notified the clinics about the update and the reasons why months in advance. After we shipped it, everything has continued to work just as well as before.
Feelgood Design System
For ensuring a consistent, accessible, and great user experience in Feelgood’s digital solutions we started putting together design system while working on the Feelgood mobile app during 2019.
Challenges and goals
Design systems have been a hot topic in the design community for several years. Many agree that design systems are challenging to put together, but maybe even more challenging to maintain.
Hence, the team and I were humble when we started to work on our design system. We spent much time discussing needs and expectations. I also talked to colleagues at inUse experienced in this area and read quite a few bookmarked articles on design systems I had set aside for too long.
We agreed that the Feelgood Design System should be:
- Initially catered for the frontend developers in our team.
- A guide for designers, developers, and marketing staff.
- Interactive and easily accessed over the internet.
- Focused on just what our solutions need.
- Compliant with WCAG 2.1 (AA).
- Constantly evolving.
Design process
After releasing Feelgood Web Portal and Feelgood Visitor Registration, the next project was a mobile app for which higher-ups wanted a new set of digital graphic guidelines. I felt the same way since the then-current graphic guidelines were too limited.
I brought up the need for a design system with the rest of the team and they agreed. We couldn’t end up rewriting the same frontend code again and again in the future.
Assistance with graphic design
Creating a set of digital graphic guidelines from scratch was too big of a task to pull off on my own. I needed help from a seasoned graphic designer. Luckily, my colleague Johan Kuno was perfect for the task and available.
After introductory meetings, Kuno started working on the guidelines. He was going to put together:
- Icons
- Colors
- Imagery
- Typography
- Logotype variants
Kuno did all of the work while I reviewed his drafts and pointed out issues. Kuno chose to work in Sketch since we both had most experience using it. For sharing and discussing drafts we used Zeplin, but we usually just sat down next to each other for lengthy discussions.
For icons we had a look at several libraries before choosing Streamline Icons library. It had an impressive amount of varied and well categorized icons available in multiple variants.
Late change of typography
Kuno’s first draft looked great. However, we had to replace Open Sans for body text. We noticed that Open Sans rendered characters like I, l, and 1 too similarly. This could confuse users when handling order IDs and invoice references numbers with random characters.
We replaced it with IBM Plex Sans, which didn’t have this issue. This also gave the design system a small performance boost since this font family was available as a single variable font file.
For headlines, we continued using Raleway Extra Bold for brand recognition. It worked well in a digital context just as in print.
Crafting the components
While a design system is much more than a component library, components would be a big part of our first version. With the new graphic guidelines approved by the Feelgood marketing department, Kuno and I started crafting the first batch of components.
Since the budget was limited and Kuno also had to do concept work for the mobile app, we focused on just the components the app needed. Since I had already drawn a lot of wireframes of the mobile app we had a head start.
It is tempting to just churn out components at this stage. But Kuno and I had been advised to focus on just the components we needed.
We got this piece of advice came from our colleagues at inUse, but also from renowned experts Dan Mall and Brad Frost. Earlier in the Spring of 2019, I had the privilege of listening to them at the conference An Event Apart in Boston.
Expanding the component library
Once Kuno had finished the concept work for the app, we took what time we had left and applied the design system on Feelgood Web Portal. Many components proved to be flexible enough to handle it, but we had to add new ones like:
- A modal window for showing and asking for crucial information.
- “Stickers” for highlighting smaller pieces of information.
- Tabs for diving content on the same page.
- Wizard step indicators for longer flows.
- An input field for longer pieces of text.
This phase proved to be straining for Kuno and I. We were tired and had a some heated discussions. However, we pulled through!
Development
For making the design system interactive and easily accessed we decided to present it on a website. While some might have opted for a public Figma file we chose a website for the following reasons:
First, different browsers on different screens and devices render things differently. What a design system looks like in a PDF file will never match how it will look and behave “in the field”,
Second, anyone could view it whenever they wanted to. No need to sign up for a design tool and ask for an invite just to view some sketches or download a logotype.
Third, the website could use the same tech stack as Feelgood Web Portal, Feelgood Visitor Registration, and future solutions. This would save us a lot of time.
Fourth, all components on a website could be interactive in a way they can’t be otherwise (yes, I know it’s possible in Figma).
Basic content first
With very limited time on our hands the team and I knew we had to start small and ship an initial release with just the basics before gradually updating it. In between the updates, we would share the website with developers and designers for feedback.
The first release would contain:
- Icons
- Colors
- Spacing
- Typography
- Print guidelines
- Logotype variants
The first update would then contain minor improvements based on feedback, but mainly our first batch of components including clickable examples, instructions for designers and and detailed information for development.
The second update would then contain more improvements based on feedback, but mainly different sets of principles for validating forms, writing easy-to-read and accessible text, and more. We didn’t plan further ahead at this time.
Release and feedback
We shared the first subtle release of design.feelgood.se with a handful of designers at inUse. Before sharing it with developers we wanted some feedback and add all components. We learned that:
- The home page could have been more welcoming and guiding.
- Instructions on how to use the logotype variants were needed.
- Colors were well presented but lacked instructions for usage.
- Spacing was also well presented but also lacked instructions.
- Typography was nicely presented with links to Google Fonts.
- It felt mainly oriented to developers, but not too much.
- It was simple, clean, tidy, and good-looking.
- Some download links were easy to miss.
As expected, every designer we shared the design system with asked us to add components.
Update and pandemic hiatus
We released an update two weeks later with minor improvements, but without any components. We had to postpone this for a few months due to needed design work on our other solutions.
After I had finished writing content for all components by February 2020, the we finally got back to work. Then the Covid-19 pandemic hit. This sudden shift in everyday life in Sweden led to major business reprioritizations for Feelgood and our work was once again put on hold.
However, I continued improving the design system in Sketch before migrating it to Figma later in 2020.
In November 2022 we finally released a major update of design.feelgood.se with (most components) and other adjustments. More updates with additional components and improvements based on user feedback will be made during 2023.
Impact
Feelgood Design System is now implemented in the Feelgood mobile app, Feelgood Visitor Registration, and Feelgood Web Portal. It’s proved to be both sturdy and flexible. It’s being updated a bit every now and then, just as planned.
The design system is also being implemented in Feelgood Client Management. This is an internal data-heavy web app Feelgood staff use to manage everything about the company’s clients. It’s something I haven’t been that involved in. Hence, I haven’t mentioned it earlier.
As a designer it’s great to have a solid design system to rely on. Having everything lined up in Figma saves me a lot of time and reduces stress on a daily basis.
The developers in our team also enjoy working with Feelgood Design System. They know the more work they put into it now, the easier it will get later.
Feelgood mobile app
Information about the Feelgood mobile app will be added later in 2023.
How working at Feelgood has made me feel
Working at Feelgood is the best and definitely most challenging consultant gig I’ve ever had. Our team consists of lovely, fun, and skilled people. We get to choose our own tools and tech stack. Our way of working is smooth and flexible. What we’re doing has great effect on people’s health and well-being.
Helping people get better healthcare and improve their well-being is one of the main reasons I’ve stayed with Feelgood for over five years.
I look forward to working with Feelgood throughout 2023. We have great things planned for expanding and improving the company’s digital solutions even further.
