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 digital 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 primary focus has been on these four products.
Feelgood Web Portal
Managers at client companies were previously using separate web apps to manage orders, bookings, complaints, and invoice data. These web apps had inconsistent interface design, weak branding, and a poor user experience – especially on mobile devices.
The Feelgood Web Portal released in 2017 solved these issues.
- Gathered features in one place
- Significantly improved accessibility
- Reduced workload for internal staff
- Saved managers time in their daily work
- Played a key role in winning new business
- Greatly improved usability on mobile devices
Feelgood Visitor Registration
Most of Feelgood’s 55 health clinics in Sweden lack staff to assist visitors with appointment registration, which used to cause confusion and stress for both visitors and treatment staff on a weekly basis.
This web app released in 2018 greatly mitigated this issue.
- Reduced weekly misunderstandings
- Enabled visitors to register on their own
- Saved treatment staff time on a daily basis
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.
- Higher codebase quality
- Simplified daily design work
- Significantly improved accessibility
- More time-efficient software development
Feelgood App
The Feelgood App (iOS and Android) released in 2019 allows employees at client companies to manage bookings, report absences, update vaccination history, submit sick notes, fill out health surveys, and more.
- Provided a new platform for marketing
- Played a key role in winning new business
- Reduced workload for managers at client companies
- Enabled employees to manage 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.
Feelgood recognized that merging and improving these web apps was essential to keep existing client companies and win new business.
The web apps had inconsistent design, vague branding, and a poor user experience – especially on mobile devices.
To solve 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 each feature
- Align the portal with Feelgood’s graphic profile
- Reduce support calls about orders and bookings
- Minimize manual data entry by users whenever possible
- Significantly improve user experience on mobile devices
- Save time for internal staff managing orders and bookings
User research through listening to support calls
We immediately scheduled listening sessions with support staff to understand the issues users were facing firsthand.
Additionally, we met with staff handling orders, bookings, and complaints to learn what information they needed from clients and what clients 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 started sketching for small screens.
Paper sketching is fun, cheap, inclusive, and keeps the focus on content and functionality.
Over the following two months, I met with stakeholders several times per week (sometimes per day) to discuss and refine these sketches.
This approach worked well! Developers gradually understood how to implement features, while stakeholders were pushed to make decisions.
Creating a prototype for usability testing
After having focused on small screens for the paper sketches, I designed a prototype for larger 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 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 hours and hours simplifying the healthcare terminology.
Expanding limited print guidelines
While usability testing, I also worked on graphic design. This was challenging because Feelgood only had 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. We started in Sketch but quickly moved on to HTML, CSS, and JavaScript.
The goal was to demonstrate how colors, typefaces, and components would appear across different web browsers, operating systems, and screen types.
Designing in the browser to save time
Adam had begun frontend development while I was still conducting usability tests. Once I finished, I focused on supporting him by explaining interaction design and performing browser testing.
During this time, I was also refining the graphic design. To save time, we made many design decisions directly in the browser, avoiding the time-consuming back-and-forth in Sketch.
Release and impact
Feelgood Web Portal was released in November 2017. Managers at client companies found it professional and easy to use, and they especially appreciated having all features in a single web app.
After a few months, internal support staff reported a welcome decrease in calls regarding orders and bookings.
Former Feelgood CEO Joachim Morath has repeatedly stated that this 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 positive usability tests and strong initial feedback, some usability issues needed attention.
Missing contact information led to missed appointments
Client companies regularly supply Feelgood with personnel files to make it easier for managers to place orders for their employees.
I had assumed these files were complete, which was often not 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 that order’s page. Because 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, forcing users to dig through their order history to find the order with the new reply.
We fixed this by adding a this link in the email and also highlighting orders with new replies directly in the portal.
Adding new sought-after features
Since its release, the portal has been continuously updated with requested features:
Sign in using BankID
From a business perspective, support for BankID was essential. Many client companies require it.
English language support
Some client companies have a lots of native English-speaking employees. Apart from improved accessibility this feature was good 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.
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. We also included some accessibility improvements.
Aside from some initial performance issues and minor bugs, support staff reported no complaints.
Feelgood Visitor Registration
A detailed look on how we reduced misunderstandings during appointment registration
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, confusion, and stress for both visitors and staff on a weekly basis.
Goals
We knew that the solution was simple: visitors needed to register for appointments themselves, and treatment staff needed to be notified when they did. With this in mind, we set the following goals:
- It must be easily scaled nationwide
- Registering must be fast and accessible
- Treatment staff need to be notified automatically
- Visitors must be provided help if technical issues arise
Learning about common issues by interviewing staff
We scheduled interviews with staff at clinics without receptionists to understand 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
I was joined by our new frontend developer Andreas Reinholdsson. I think it’s great when developers take time to meet with users.
Handling privacy concerns among staff
All clinics use the same journal system, which includes a notification feature – but it can’t be triggered by an external solution.
This meant we needed to send staff notifications using SMS or email. They were hesitant about 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’s lobby. We chose to build a web app instead of a native app so we could:
- Avoid Apples and Googles requirements
- Ship updates faster thanks to no review process
- Use any tablets regardless of its operating system
How the web app works:
- Visitor enters their personal identity number
- Journal system is queried for appointments
- Staff is sent an email if an appointment is found
- Visitor is informed that the appointment was found
If a visitor is too late, they are told to book a new appointment. If registration fails due to a technical issue, a phone number is shown.
Usability testing in production for best possible feedback
After the interviews, I designed a high-fidelity prototype of the web app. We skipped paper sketches because the interface was so simple.
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 the prototype would only have given us feedback on the interface – not on the full solution.
Testing resulted in 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 was 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 clients
- When the tablet screen got dirty it got hard to read
- Some visitors had trouble reading the text
How we fixed these usability issues
Supporting multiple formats for personal identity numbers
Even though we hinted the format YYYYMMDDNNNN, visitors still entered the shorter format YYMMDDNNNN, which we 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 simply added recommended instructions in the setup guide. 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 first released in summer 2018. Today it’s used at more than 35 of Feelgood’s 55 health clinics. It has had this impact:
- Regularly solved misunderstandings
- Enabled visitors to register on their own
- Saved time for treatment staff on a daily basis
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 and its reason months in advance. They told us there had been no issues after the update.
Feelgood Design System
A detailed look on how we keep ensuring a consistent look and feel 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
- Just ficus on what our products require
- Be continuously improved over time
- Be easily accessed as a website
Higher-ups gave us the green light
After releasing the Feelgood Web Portal and Feelgood Visitor Registration, the next project was the Feelgood App. Higher-ups at Feelgood felt a new digital graphic profile was needed for this product.
I argued that we should also begin building a design system to align with this work. After a couple of weeks of discussion, all stakeholders agreed.
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 beyond what I could manage alone, so I brought in support.
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 and logotypes.
We worked in Sketch and shared drafts via Zeplin. Kuno handled the majority of the graphic design, while I reviewed and provided guidance.
I enjoyed our detailed discussions, which ranged from overall look and feel to the smallest visual details.
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. It’s search function was also great.
Expanding the color palette twice
For colors, we stayed close to Feelgood’s existing palette of blue, red, and white. We did make some 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 letters and numbers.
After convincing the marketing department that had already started using Open Sans, we switched to IBM Plex Sans, which solved 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 every basic interface component, 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.
Reasons for publishing the design system on a website
- Easy access: You shouldn’t need a Figma account to copy a color.
- Honesty: Browsers render elements differently on different screens.
- Interactivity: Try components using touch, keyboard, or mouse input.
- Effiency: By 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
Between updates with more content, we planned to gather feedback by sharing the website with outside designers and developers.
First round of feedback
After sharing the first version of the website with 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 digital products. However, I still made big updates to the Figma library like adding variables and component properties.
In 2024, we made another major update to the website by switching from Stencil to Storybook to better manage 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 hard to sum up in a couple of paragraphs.
Playing even a small part in helping people improve their health and well-being is the main reason I’ve stayed with them since 2017.
Equally important are my fun, helpful, and kind team members. When my assignment ends sometime in 2026, I’ll truly miss them.
/Alexander