Design system and business-critical digital products for a national health company
Since 2017, I’ve been helping the Swedish corporate health provider Feelgood strengthen its digital product suite. I’ve been working in two cross-functional teams designing products empowering both staff and clients.
About Feelgood
Feelgood offers a wide range of health services for private individuals, organizations, and businesses across both the private and public sector in Sweden.
Founded in 1995, the company now has more than 800 employees and operates at 140 locations nationwide. Since 2021, Feelgood has been owned by Terveystalo, Finland’s largest healthcare provider.
Today, Feelgood serves over 8,000 client companies representing roughly one million employees.
Summary
My focus has been on these four products.
Feelgood Web Portal
Managers at client companies were previously using separate web apps to manage content like orders, bookings, complaints, and invoice data. These apps had inconsistent UI design, weak branding, and a poor user experience. This web app released in 2017 solved these issues.
- Gathered all features in one place
- Significantly improved accessibility
- Reduced daily workload for internal staff
- Played a key role in winning new business
- Saved managers time in their everyday work
- Greatly improved usability on mobile devices
More about Feelgood Web Portal …
Feelgood Visitor Registration
Most of Feelgood’s 55 health clinics don’t have staff that assist visitors with appointment registration. This caused missed appointments, confusion, and stress for both visitors and staff on a weekly basis. This web app released in 2018 significantly mitigated these issues.
- Saved time for staff on a daily basis
- Reduced weekly misunderstandings
- Enabled visitors to register themselves
More about Feelgood Visitor Registration …
Feelgood Design System
To ensure a great and accessible user experience across Feelgood’s digital products, we began implementing a design system in 2019. It’s available as a Figma library and at design.feelgood.se. We call it Feelgood Design System, or simply FDS.
- Higher codebase quality
- Simplified daily design work
- Significantly improved accessibility
- More time-efficient software development
More about Feelgood Design System …
Feelgood App
The Feelgood App (iOS and Android) released in 2019 has empowered employees at client companies. Using it they can manage their bookings, report absence, update their vaccination history, submit sick notes, fill out health surveys, and get health tips.
- Provided a new platform for marketing
- Played a key role in winning new business
- Reduced workload for managers at client companies
- Enabled employees to handle their personal healthcare
Note: I have not yet written a case study on this app.
Feelgood Web Portal
A detailed look on how we empowered managers at client companies.
In 2017, managers at Feelgood’s client companies were using separate web apps to manage orders, bookings, complaints, and invoice data.
These web apps had inconsistent UI design, weak branding, and a poor user experience – especially on mobile devices.
Feelgood recognized that merging and improving these web apps was essential to keep existing clients happy and win new business.
To do this, CTO Paul Cohen put together a cross-functional team. I joined as Product Designer.
Goals
We planned to measure these goals through usability testing, analytics, and follow-ups with internal staff and managers at client companies.
- Improve the usability of every single feature
- Align the portal with Feelgood’s graphic profile
- Minimize data entry by users whenever possible
- Significantly improve user experience on mobile devices
- Save time for internal staff managing orders and bookings
- Reduce support calls about healthcare orders and bookings
User research through listening to support calls
Right away we scheduled listening sessions with support staff to understand the issues managers at client companies were facing firsthand.
Additionally, we met with staff handling orders, bookings, and complaints to learn what information they needed from client compnaies and what managers should be able to enter themselves.
Speeding up decision-making through sketching
Using insights from our user research, I started sketching to quickly elicit additional requirements, get answers to complex questions, and speed up decision-making among stakeholders.
To focus on the user experience on mobile devices, I worked Mobile-First and sketched for small screens. Over the following two months, I met with stakeholders several times per week to discuss and refine these sketches.
Paper sketching is fun, fast, inclusive, and keeps the focus on content and functionality.
This approach worked well! Developers gradually understood how to implement features, while stakeholders were pushed to make important decisions.
Creating a prototype for usability testing
After having focused on small screens when sketching in paper, I now designed a prototype for large screens. This prototype saved us time by serving multiple purposes:
- Explaining interaction design to developers
- Keeping other stakeholders up to date
- Conducting usability tests with clients
Usability testing revealed confusing terminology
A colleague at Feelgood’s marketing department and I conducted interviews with managers at various client companies, both in and outside of Stockholm.
We asked about their experiences with the current web apps, but focused on observing them perform tasks using the prototype. When they ran into issues or had questions, we discussed them in detail.
All participants completed the tasks with barely any assistance. However, many found the healthcare terminology confusing.
Afterwards, we spent many hours identifying and simplifying the healthcare terminology.
Expanding limited print guidelines
While usability testing, I also worked on graphic design. This was challenging because Feelgood only had graphic guidelines for print design.
I added new colors to improve contrast and a new typeface that rendered characters more clearly.
Our frontend developer Adam Heidmark and I then started designing components from scratch. We started in Sketch but quickly moved on to using HTML, CSS, and JavaScript.
We wanted to show how colors, typefaces, and components would be rendered and work across different web browsers, operating systems, and screen types.
Designing in the browser to save time
Adam began frontend development while I was running usability tests. Once those were completed, I supported him by clarifying interaction design and testing directly in the browser.
At the same time, I continued refining the visual design. Many design decisions were made directly in the browser, which helped us avoid time-consuming back-and-forth in Sketch.
I also optimized accessibility by testing with VoiceOver and navigating the interface using only a keyboard.
Release and impact
The Feelgood Web Portal was released in November 2017. Managers at Feelgood’s client companies found it professional and easy to use. They especially appreciated having all features in a single web app.
After a few months internal support staff noted a welcome decrease in calls regarding healthcare orders and bookings. This was one of our goals.
Complying with the latest version of WCAG paid off (and continues to pay off), since new potential client companies specifically request and inquiry about it for signing contracts with Feelgood.
Former Feelgood CEO Joachim Morath has repeatedly stated that the portal has played a key role in winning new business.
“I must say that the new portal feels great! It’s really user-friendly.”
– User in an email in 2017
“Now that your account manager has presented the portal, I can simply say one thing – amazing!”
– Client to the marketing department
Overall, it looks great and seems to work really well! Intuitive to both use and understand.
– Potential new client in 2024
Fixing usability issues after release
Despite the strong initial feedback, usability issues needed attention.
Missing contact information led to missed appointments
Client companies regularly supply Feelgood with personnel files to make it smoother for their managers to place orders for employees.
I had assumed these files were complete, which wasn’t always the case. Hence, there was no way to add missing phone numbers or email addresses for employees.
This led to complaints about employees missing appointments they hadn’t been notified about. We solved this by adding input fields for entering missing contact information.
Frustrating to find replies to specific orders
After placing an order, users can send follow-up questions through its own page. Since replies from Feelgood are important and time-sensitive, we send users an email for each new reply.
Through a mistake, the email template didn’t include a link to the order page. This forced users to dig through their order history to find the order with the new reply.
We solved this by adding the link to the email template, but we also started highlighting orders with new replies directly in the portal. Now, users didn’t have to check their inboxes.
Adding requested features
Since its release, the portal has been continuously updated with requested features. Here are four examples.
Sign in using BankID
From a business and security perspective, support for BankID was essential. Many potential client companies require it.
English language support
Some of Feelgood’s client companies have a lot of native English-speaking employees. This feature was great for business.
Manage invoice data
This feature was planned for the initial release, but was delayed due to backend limitations. It was finally implemented a few months later.
Secure email
This feature for sending encrypted and sensitive information was previously available as a separate web app due to backend limitations.
Feelgood Design System update
In 2021, we implemented the Feelgood Design System so the portal would share the same look and feel as the Feelgood App and Feelgood Visitor Registration. Aside from a few performance issues and minor bugs, support staff reported no complaints.
Feelgood Visitor Registration
A detailed look on how we reduced misunderstandings during visitor registration at Feelgood’s clinics.
While Feelgood operates at 140 locations in Sweden, only 55 of these clinics are branded as Feelgood’s own. Most of these 55 clinics lack staff to assist visitors with appointment registration.
This led to missed appointments and confusion for both visitors and staff on a weekly basis.
Goals
Two goals were clear from the start: visitors must be able to self-register, and staff must be notified automatically. After further discussions, we added the following goals:
- The solution must easily scale nationwide
- Visitors must be supported if technical issues arise
- Registration should only require your personal identity number
Learning about issues by interviewing staff
Right away we set up interviews with staff at clinics that didn’t have receptionists. We needed to hear about the issues visitors and staff had been facing. We learned that visitors had to be informed if they were:
- So late that they would need to reschedule
- Several days, weeks, or even months early
- Slightly late, but not forcing cancellation
- On time, but at the wrong clinic
For these interviews, I was joined by our new frontend developer Andreas Reinholdsson. I think it’s great when developers spend time meeting users like Andreas did.
Handling privacy concerns among staff
All clinics use the same journal system, which includes a notification feature – but it couldn’t be triggered by an external solution.
This meant we needed to send staff notifications using SMS or email. Unfortunately, they were hesitant about using both.
They rejected email because they didn’t want to keep email clients open for privacy reasons. They rejected SMS because they didn’t want to carry both their work and personal phones all day.
We chose email. Phones can be misplaced, but clinics always have computers available.
To address the privacy concerns, we ensured that email subject lines would never contain personal information – only that a visitor with an appointment at a specific time had arrived.
Staff were still somewhat hesitant, but agreed to give it a try.
Why we built a web app instead of a mobile app
The solution would run on a tablet placed in each clinic lobby. We chose to build a web app instead of a native app so we could:
- Avoid Apple and Google’s review requirements
- Ship updates faster thanks to no review process
- Use any tablet regardless of its operating system
How the registration process works using the web app:
- The visitor enters their personal identity number
- The journal system is queried for appointments
- The visitor is informed if the appointment is found
- The staff is sent an email that the visitor has arrived
If a visitor is too late, they are asked to book a new appointment. If registration fails due to a technical issue, a phone number is displayed.
Usability testing in production for best possible feedback
After the interviews, I designed a high-fidelity prototype of the web app. I skipped paper sketches since I felt the interface was simple enough.
For usability testing, we did a limited release of the functioning web app at a clinic in Stockholm. This let us observe how it worked for both visitors and staff in real conditions.
Testing a prototype would only have given us feedback on the interface – not on the full solution.
Great feedback and fixable issues
It took two days to set up the tablet and instruct staff on how the everything worked. After two months, they got back to us with feedback.
What was great:
- It worked well for both visitors and staff
- Staff liked not having to ask visitors for ID
- There were no technical issues with the tablet
- It was easily managed thanks to our instructions
What needed to be fixed:
- 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 in their personal identity numbers
- Registrations failed if staff members didn’t have an email address in the journal system
- Some staff members missed emails due to settings in their email clients
- When the tablet screen got dirty, it became hard to read
- Some visitors had trouble reading the text
How we fixed the issues
Even though there were quite a few issues, we sorted them out.
Supporting multiple formats for personal identity numbers
Despite asking for the format YYYYMMDDNNNN, visitors still entered the shorter format YYMMDDNNNN, which we simply added support for.
Importing appointment data more frequently
Developers fixed the issue with recently created appointments not being found by importing data from the journal system more frequently.
Better instructions for email notification
We updated the setup guide with clearer instructions. We also mentioned that staff should clean the tablet screen regularly.
Making all text larger
Some visitors struggled to read text, even though nothing was smaller than 16 pixels. We increased its size as much as possible.
Putting up posters for attention
When visiting another clinic that tested our solutions, we noticed some visitors didn’t see the tablet – they just sat down and waited.
Soon afterwards, we set up posters next to the tablets telling users to register here. It was a simple oversight, but exactly the kind usability testing is meant to catch.
Release and impact
Feelgood Visitor Registration was released in summer 2018. Today, it’s used at more than 35 of Feelgood’s 55 health clinics and has had a significant impact.
- Saved time for staff on a daily basis
- Regularly solved misunderstandings
- Enabled visitors to register themselves
Feelgood Design System update
In 2021, we implemented the Feelgood Design System so the Feelgood Visitor Registration would share the same look and feel as the Feelgood App and Feelgood Web Portal.
We notified clinics about this update months in advance. They reported no issues afterwards.
Feelgood Design System
A detailed look on how we ensure a great and accessible user experience across Feelgood’s digital products.
Design systems have been a hot topic for years in the design community. Many designers agree they’re challenging to build – and even harder to roll out and maintain.
To ensure a great and accessible user experience across Feelgood’s digital products, we began implementing a design system in autumn 2019. We call it the Feelgood Design System, or simply FDS.
Goals
Based on Feelgood’s expectations and needs, discussions with colleagues, and best practices, we decided that FDS should:
- Serve as a guide for designers, developers, and marketing staff
- Initially focus on the needs of frontend developers
- Comply with the latest version of WCAG
- Be continuously improved over time
- Focus on what our products require
- Be easily accessed as a website
Higher-ups gave approval
After releasing the Feelgood Web Portal and Feelgood Visitor Registration, the next project was the Feelgood App. Higher-ups at the company felt a new digital graphic profile was needed for this.
I argued that we should also start building a design system to align with this work. After one or two weeks, all stakeholders had agreed on this.
With our growing number of products, not having a single frontend codebase would have been inefficient.
Getting support from a senior graphic designer
Creating the new graphic profile was more than I could manage on my own while working part-time, so I asked for support – and got it!
Luckily, my colleague and senior graphic designer Johan Kuno was available. He joined the team for a few months and immediately began working on icons, colors, typography, logotypes, and imagery.
We worked in Sketch and shared drafts via Zeplin. Kuno led the work on the new graphic profile, while I reviewed his work, gave feedback, and assisted him when needed.
Regarding accessibility, I made sure our work complied with the guidelines in WCAG 2.2 (AA).
I really enjoyed my and Kuno’s detailed discussions, which ranged from overall look and feel to the smallest visual details. We had both fun and some heated discussions.
Choosing an icon library
Kuno and I reviewed several established icon libraries before selecting Streamline. This library offered the largest collection of well-categorized icons in different variants. its search function was also excellent!
Expanding the color palette twice
For colors, we stayed close to Feelgood’s existing palette of blue, red, and white. However, we did make adjustments to improve their appearance on screens.
We also added additional shades of these colors for upcoming component design. In hindsight, even more shades would have been helpful. By early 2024, I was finally able to expand the palette further.
Switching typeface to improve accessibility
Kuno and I were slow to notice that our initial choice of Open Sans for body text rendered characters like I, l, and 1 too similarly.
This wasn’t just a general accessibility concern – it could have caused problems for users handling invoice references and other IDs combining both random letters and numbers.
After convincing the marketing department that had already started using Open Sans, we switched to IBM Plex Sans for solving this issue.
Only designing components we needed
With Kuno’s limited time, we focused on designing components exclusively for the Feelgood App. I would add more later.
Although it was tempting to create as many components as possible, I had been advised against this by design system experts Dan Mall and Brad Frost during the conference An Event Apart in Boston in 2019.
Publishing the design system on a website
Early on, we had decided to publish FDS on a website due to the following four reasons:
- Easy access – You shouldn’t need Figma to copy a HEX code.
- Realism – Different web browsers render elements differently.
- Interaction – Try components using mouse, keyboard, and touch.
- Efficiency – Using the same tech stack as our other digital products.
Setting up a plan for regular feedback
With limited time on our hands, the team and I decided to ship a first version containing only basic design tokens like:
- Icons
- Colors
- Spacing
- Typography
- Logotype variants
In between updates, we planned to gather feedback by sharing the website with other designers and developers.
First round of feedback
After sharing the first version of the website with five designers at inUse, we learned the following:
- The website felt tidy and looked great
- Some download links were easy to miss
- Logotype variants needed usage guidelines
- It felt catered to developers, but not too much
- Colors looked great but also needed guidelines
- The homepage should provide clearer guidance
- Spacing was well presented, but needed examples
- Typography was well presented with the Google Fonts links
Every designer we shared the website with also asked us to add components.
Pandemic postponement and Figma migration
In February 2020, we were about to add components to the website, but the COVID-19 pandemic led to reprioritization. Fortunately, I got time to migrate our Sketch library to Figma.
In November 2022, we finally added the components and made tweaks to existing design tokens.
In 2023, we focused on our other products. However, I still made big updates to the Figma library by adding variables and component properties.
In 2024, we made another major update to the website by switching from Stencil to Storybook to better manage our components.
Release and impact
The first version of the Feelgood Design System was released in 2019. Today, it is used across the Feelgood App, Feelgood Visitor Registration, and Feelgood Web Portal. Its impact has been substantial!
- Increased codebase quality
- Simplified everyday design work
- Significantly improved accessibility
- More time-efficient software development
As a designer, having everything lined up in Figma is a huge time-saver on a daily basis.
How working at Feelgood has made me feel
Working at Feelgood has been both the most challenging yet the most rewarding client gig I’ve ever had. It’s impossible to sum up in a couple of paragraphs, but I’ll try.
Playing a part in helping people improve their health and well-being is the main reason I’ve stayed with Feelgood since 2017.
Another big reason has been my helpful, kind, fun, and geeky team members. When my assignment ends sometime in 2026, I’ll truly miss them – especially beating them on table tennis.
/Alexander