To content

Alexander Skogberg

UX / UI Designer

UX / UI Designer based in Stockholm. I dig design systems, accessibility, and loud rock music.

Illustration of the Feelgood Web Portal shown on an iPhone and on an iPad.

Design system and digital solutions for major national healthcare company

Timeline: Since April 2017
Allocation: Part-Time
Role: UX / UI Designer


Since 2017, I’ve been helping healthcare company Feelgood expand and improve their digital solutions by making sure they offer a great user experience and follow WCAG 2.2 (AA).

About Feelgood

Feelgood was founded in 1995 and has over 1,000 employees and 155 health clinics throughout Sweden. 56 of them are branded as their own. Since 2021 it’s owned by Terveystalo, Finland’s biggest healthcare service company.

Feelgood offers a wide range of health services for private individuals, organizations, and businesses in the Swedish private and public sectors.

Feelgood has over 8,000 companies and organizations as clients in Sweden, with a combined total of about 1,200,000 employees.


Quick summary

I’ve been involved in more solutions, but these are the ones that have had my focus.

Feelgood Web Portal

The page in the Feelgood Web Portal listing all orders including search and filter options

Managers and HR staff at Feelgood’s clients were initially using different web apps for managing orders, bookings, complaints, and invoice data. These web apps all had inconsistent design and poor user experience on mobile devices. Now, everything’s easier and done in the Feelgood Web Portal. It was released in the Autumn of 2017.

The Feelgood Web Portal has:

  • Gotten great feedback from its users
  • Been essential for securing new client contracts
  • Made it possible to perform tasks on mobile devices
  • Helped managers at clients handle more tasks on their own
  • Saved time for both clients and Feelgood staff on a daily basis

Feelgood Visitor Registration

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

Most of Feelgood’s health clinics don’t have any staff for welcoming visitors and registering them for their appointments. Using the Feelgood Visitor Registration, visitors can now do this by simply entering their personal identity numbers on tablet in each clinic lobby. It was first released in the Summer of 2018.

The Feelgood Visitor Registration has:

  • Helped clear up more misunderstandings
  • Saved time for treatment staff at clinics on a daily basis
  • Made it possible for visitors to register for appointments

Feelgood Design System

Some of the components in the Figma file for the Feelgood Design System.

For providing a great and accessible experience in Feelgood’s digital solutions, we’re using a design system that we started working on in the Spring of 2019. Today, it’s used in the Feelgood Mobile App, Feelgood Visitor Registration, and Feelgood Web Portal. It’s available at design.feelgood.se and as a Figma asset library.

The Feelgood Design System has:

  • Made design work more efficient
  • Increased quality of our code base
  • Saved time for our frontend developers
  • Improved accessibility in our the solutions
  • Made the solutions using it look and feel consistent

Feelgood Mobile App

Illustration of three iPhones running the Feelgood app showing the individual start page after signing in.

With their mobile app for iOS and Android, Feelgood has made it possible for client employees to manage bookings, report absence, take health tests, view their vaccination history, and more. It was released in the Autumn of 2019 and has gotten new sought-after features ever since.

The Feelgood Mobile App has:

  • Been essential for securing new client contracts
  • Decreased workload for managers and HR staff at clients
  • Given Feelgood a new platform for new offers and features
  • Made it possible for client employees to manage private matters
  • Saved time for support staff, since employees now need less help

Note: I have not yet written a full case study on the Feelgood mobile app.


In detail: Feelgood Web Portal

The page in the Feelgood Web Portal listing all orders including search and filter options

Challenge to solve

What Feelgood first wanted to improve back in 2017, was the user experience for managing orders, bookings, complaints, and invoice data. This is done by managers and HR staff at clients organizations.

Back then, these tasks were done using different web apps that all had inconsistent user interface design and branding, as well as poor user experience on mobile devices.


Goals to achieve

Since we knew what features the Feelgood Web Portal had to have, we set these goals:

  • Improve the user experience for each feature
  • Provide a consistent look and feel for all features
  • Reduce calls about orders and bookings to support staff
  • Don’t ask users to enter information we can get ourselves
  • Save time for Feelgood staff who manage orders and bookings
  • Provide a great user experience on both small and large screens

We decided that these goals should be continuously measured through usability testing, analyzing analytics data, and follow-up talks with Feelgood staff and client representatives.


Design process

We immediately scheduled listening sessions with the support staff at their call centre. We had to learn about the issues clients were calling about and we wanted to hear it from them directly.

We also set up meetings with staff at Feelgood who were managing orders, bookings, and complaints. We needed to learn what information they had to get from clients and what information clients had to be able to enter on their own.

Speeding up decision-making with wireframes

With these insights in mind, I started drawing wireframes of the upcoming web portal. My goal was to elicit additional requirements, help get answers to complex questions, and speed up decision-making by stakeholders.

One wireframe says more than a thousand meeting minutes. It acts as a catalyst for decision-making.

Since one of our goals was to improve the user experience on small screens, I worked mobile first and drew wireframes for small screens. This helped us prioritize content and get rid of what was unnecessary. To save time and not get hung up on pixels, I drew on paper.

Photograph of a lot of paper wireframes on a table.
After this full day of drawing wireframes, my hand was cramping up a bit.

During the following two months, I met with the team and stakeholders several times per week (sometimes several times per day) for discussing and improving these wireframes.

Drawing paper wireframes is great for this phase. It’s cheap, fast, and puts focus on content and functionality. Drawing together also makes everyone feel included.

Keeping everyone in the loop like this proved to be smart. Developers were eased into understanding how to build things and the other stakeholders got pushed into taking high-level decisions.

Making a prototype for large screens

Once we were satisfied, I made a clickable prototype using Sketch and Invision. This time I drew new wireframes for large screens to take advantage of more screen real estate. However, I still drew them in grayscale without much visual flair to keep focus on content and functionality.

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 print guidelines

While wireframing, I was also working on graphic design for the web portal. This was challenging since Feelgood only had guidelines for print design. Thankfully, I got to expand these guidelines by adding new colors for improving accessibility and a new typeface for rendering numbers better.

Once done, the developers and I created a component library. We started using Sketch, but quickly moved on to HTML, CSS, and Javascript. We wanted to show how colors, typefaces, and components would look and behave in different web browsers on different operating systems on different type of screens.

Som of the components used in the Feelgood Web Portal
Some of the components based on the print guidelines.

Usability testing the prototype

For usability testing the prototype, a coworker at the marketing department and I scheduled interviews with managers at different clients.

We interviewed these managers about the past web apps, but mainly observed them doing pre-planned tasks using the prototype. If they ran into issues and had questions, we discuss it in detail. We had to travel outside of Stockholm for some meetings, but it was well worth the effort.

Everyone actually completed all tasks without barely any assistance. However, many found the occupational healthcare terminology too confusing. We had to improve UX Copy.

Setting up clickable areas in the InVision prototype of the Feelgood Web Portal.
Setting up clickable areas in the Invision prototype. It had over 50 screens.

Early start with development

Backend development started while I was wireframing. Working with the backend systems was very challenging according to the developers. Luckily, it didn’t force is to abandon or limit our design.

Frontend development started a bit later, when I was done with the paper wireframes were done. When we finished usability testing the prototype, we picked up the pace. I worked closely with our frontend developer since I was still adjusting the design while he was writing code.

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

The Feelgood Web Portal running in a desktop web browser.
Selecting health service when placing an order. The Wizard pattern tested well.
The Feelgood Web Portal running in a mobile web browser.
Placing an order on small screens was now just as easy as on large screens.

Release and impact

After started working on the Feelgood Web Portal since April 2017, we released it later in the Autumn. Immediately, it got both great and constructive feedback.

Users thought it was easy-to-use, looked good, and felt professional. They appreciated finally having the features from the different web apps in one place. The support staff at Feelgood also noted a decrease in order-related calls after some time.

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

– A user actually wrote this in an email

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

– Client to Feelgood’s marketing department

In short, the Feelgood Web Portal has:

  • Gotten great feedback from its users
  • Been essential for securing new client contracts
  • Made it possible to perform tasks on mobile devices
  • Helped managers at clients handle more tasks on their own
  • Saved time for both clients and Feelgood staff on a daily basis

Fixing new usability issues

Despite usability testing going well and solid initial feedback, usability issues still emerged shortly after release. It always does.

Unbearable switching organizations

Some users are linked to multiple organizations. To switch to another organization, they had to sign out and sign in with different credentials. To make this easier, we put a select element in the bottom of the header section. Now, they could switch accounts by just clicking twice.

This worked well for most of these users, but it was unbearable for users linked to hundreds (!) of sub-organizations at an organization. This broke the design.

We solved this issue by simply not listing sub-organizations in the select element. On content-heavy pages, we added the possibility to filter the content for specific sub-organizations.

Combined screenshots of filtering content in the Feelgood Web portal by selecting different sub-organisation.
Top: Selecting top organization. Bottom: Adding sub-organization filter.

Missing employee contact information

Clients must regularly supply Feelgood personnel files. Information in these files is used when placing orders so users don’t have to look up information for every employee for every new order.

I had been naive and assumed that these files always were tidy and complete, which they weren’t. Hence, our design offered no way to add missing information like a phone number or email address.

We solved this issue by adding input fields for entering missing information after having gotten complaints from clients that some of their employees hadn’t been contacted about and missed scheduled appointments.

Frustrating to find replies to orders

After having placed an order, users can send Feelgood follow-up questions in a message thread on the page for that specific order. Replies from Feelgood are important and should be read as soon as possible. Therefore, we send users an email when there’s a new reply.

Unfortunately, I had missed that the email template didn’t include a link to the actual page. This was incredibly frustrating for users, who had to go through order by order to find the reply. For privacy reasons, the reply cannot be included in the email.

We solved this by simply adding a link to the page in the email template. However, we also began highlighting orders with new replies on the page listing all of them. Now, users could spot new orders there directly.

A list of orders in the Feelgood Web Portal.
Orders with unread replies marked with yellow labels.

Adding sought-after features

Apart from usability improvements and bug fixes, the web portal has also been updated with new sought-after features since its release.

Sign in using BankID
From a business perspective, adding support for BankID was a must-have feature. Many clients required it for even signing a contract with Feelgood.

English language support
Several of Feelgood’s clients have a substantial amount of native English-speaking employees. Therefore, adding English language support made sense for both accessibility and business reasons.

Manage invoice data
This was a feature we planned to include in the initial release, but couldn’t due to backend limitations. Luckily, this was sorted out a couple of months later.


Feelgood Design System update

In the Autumn of 2021, we made a big visual update by implementing the Feelgood Design System. Since then Feelgood Web Portal has had the same look and feel as the Feelgood Mobile App and Feelgood Visitor Registration. This update also included general improvements to usability, accessibility, and UX Copy.

While lots of fine-tuning still remains, this update has been well received. Apart from some initial performance issues and a couple of visual bugs, support staff hasn’t noted any complaints.

Screenshot of the Feelgood Web Portal with the Feelgood Design System update running in a desktop web browser.
Placing an order with the new look and feel.
Screenshot of the Feelgood Web Portal with the Feelgood Design System update running in a mobile web browser.
On small screens the web portal now looks similar to the mobile app.

In detail: Feelgood Visitor Registration

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

Challenge to solve

After launching the Feelgood Web Portal, the next goal was to make things easier for everyone involved in appointment registration at Feelgood’s 56 health clinics throughout Sweden.

Unfortunately, visitors at these clinics often struggled to register for their appointments because most of the clinics simply don’t have any dedicated staff for welcoming and helping visitors.

Therefore, the treatment staff repeatedly had to go and check if their visitors had arrived or not. This had led to confusion and stress. This is what we were going to solve.


Goals to achieve

We knew we had to design a solution that enabled visitors to register for their appointments on their own and that treatment staff had to be notified of this somehow. We set the these goals for the solution:

  • It must be possible to scale nationwide
  • Registering must be swift, easy, and accessible
  • Treatment staff needs to be notified automatically
  • You must be able to call for help if a technical issue arises

Design process

We had a broad group of users to design for. Now, we weren’t just designing for managers and HR staff. Every employed person in Sweden with access to occupational healthcare could be a potential user.

Interviewing staff at clinics

For learning about the issues visitors and treatment staff had been facing, we interviewed staff at several clinics without receptionists in Stockholm. We learned that visitors upon registration had to be informed if they were:

  • So late they would have to reschedule the appointment
  • Several days, weeks, or even months early
  • A bit late, but maybe not too much
  • On time, but at the wrong clinic
Screenshot of the Feelgood Visitor Registration showing a failed appointment registration.
How we alert visitors who are on time, but at the wrong clinic.

Discussing privacy concerns

All the clinics were using the same journal system that had a notification feature. Unfortunately, this feature couldn’t be triggered by a separate solution.

Concerning options, staff was reluctant to try using both SMS or email. They disliked using email, since they didn’t want to have their email clients open for privacy reasons. They disliked using SMS, since they didn’t want to carry around both their work phones and personal phones.

We decided to use email. Phones can be forgotten and misplaced, but clinics always have computers with email clients available.

Concerning privacy, we assured staff 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. They were still a bit reluctant, but agreed to give it a try.

Making a prototype right away

After the interviews, I designed a high-fidelity prototype using Sketch and Invision. I decided to skip drawing paper wireframes beforehand. We felt this solution was so simple that it wasn’t needed.

For usability testing, we didn’t even use the prototype and instead did a limited release of the final web app at a clinic in Stockholm. This way we could test everything in the field before a nationwide 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 from a numpad to a full keyboard.

Why we built a web app

We chose to build web app that would run on tablets placed in the lobby of each clinic. We believed that building a web app instead of a native mobile app would enable us to do quicker updates compared. We also wouldn’t be dependent on a tablet running a specific operating system.

How the web app works:

  1. A visitor enters a Swedish personal identity number
  2. The journal system is searched for a linked appointment
  3. The staff member gets an email when the appointment is found
  4. The visitor is informed that the appointment was found

If visitors are too late, they are told how to make a new appointment. If the registration fails due to a technical issue, we show a phone number they can call.

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

Feedback after limited release

It took two days to set up the tablet at the first clinic and instruct the staff how to manage it. We all agreed that they would get back to with feedback after two months.

Screenshot of the Feelgood Visitor Registration using the previous graphic guidelines.
How Feelgood Visitor Registration initially looked. Now it uses the Feelgood Design System.

After two months, we learned that:

  • It worked well for both visitors and for staff
  • Staff liked not having to ask visitors for ID any more
  • It was easy to manage and our instructions were great
  • There had been no technical issues regarding the tablet
  • Some staff continued to use the journal system, which led to confusion

However, it also had usability issues:

  • 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 a staff member 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 got hard to read
  • Some visitors found the text too small to read

Fixing usability issues

This is how we solved these usability issues, including a new one we found on our own.

New format for personal identity number
Despite explaining that visitors had to enter their personal identity numbers using the format YYYYMMDDNNNN, we added support for YYMMDDNNNN. It was just lazy of us to not support it initially.

Importing data more frequently
The developers solved the issue that recently created appointments sometimes weren’t found by importing data from the journal system more frequently, every tenth minute to be exact.

Tips for configuring email clients
Since some staff members hadn’t set up notifications in their email clients, we added instructions for this in the guide we sent to each clinic. We also recommended that they should clean the tablet screen regularly.

Increasing text size
Even though no text was smaller than 16 pixels, some visitors still had trouble reading. Hence, we simply increased the text size in general. This was great reminder that you can’t achieve great accessibility by just following WCAG, you have test with users too.

Putting up posters about the tablet
When we visited another clinic and observed their visitors, we noticed some of them didn’t understand that there even was a tablet to use. They just sat down and waited.

Afterwards, we put up posters next to the tablets that told visitors what to do. It was embarrassing that we hadn’t thought of this before, but that’s why you do usability testing.

The lobby of a Feelgood clinic.
The lobby of a 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 helped guide visitors to the tablets.

Impact after nationwide release

Today, Feelgood Visitor Registration is used at more than 35 of Feelgood’s 56 health clinics throughout Sweden. In short, it has:

  • Helped clear up more misunderstandings
  • Saved time for treatment staff at clinics on a daily basis
  • Made it possible for visitors to register for appointments

Feelgood Design System update

In the Spring of 2021, we made a big visual update by implementing the Feelgood Design System. Since then Feelgood Visitor Registration has had the same look and feel as the Feelgood Mobile App and Feelgood Web Portal (updated later in the Autumn of 2021).

We notified the clinics about this update and the reasons why months in advance. There were no issues after the update, everything continued to work just as well as before.


In detail: Feelgood Design System

Some of the components in the Figma file for the Feelgood Design System.

Challenge to solve

For providing a great and accessible user experience in Feelgood’s digital solutions, we’ve been using a design system that we started working on in the Spring of 2019. We call it FDS, Feelgood Design System.

Design systems have been a hot topic in the design community for several years. Many agree that they are challenging to make, but perhaps even harder to maintain and put to use. Therefore, the team and I had a humble approach when we started.


Goals to achieve

After having read articles, discussed needs and expectations at Feelgood, and talked to experienced coworkers at inUse I decided that our design system should:

  • Be a guide for designers, developers, and marketing staff
  • Initially be catered for our frontend developers
  • Be compliant with the latest version of WCAG
  • Easily be accessed using a web browser
  • Focus on what our solutions need
  • Constantly be edited

Design process

After having released the Feelgood Web Portal and Feelgood Visitor Registration, the next project was a mobile app for which higher-ups at Feelgood felt we needed new guidelines for digital graphic design. I agreed.

Since our print guidelines were too limited, I suggested putting together a design system. The rest of the team agreed. With our growing number of solutions, it would be efficient to have as much as possible of our frontend code in one single codebase.

Getting help with new graphic profile

Creating a new graphic profile was too big of a task to pull off on my own, I needed help. Luckily, my coworker and graphic designer Johan Kuno was available and joined the team. He started working on the basics, like:

  • Icons
  • Colors
  • Imagery
  • Typography
  • Logotype variants

We decided to work in Sketch and share and discuss drafts using Zeplin. Kuno did the actual graphic design work while I reviewed it and gave pointers. I loved our lengthy discussions that covered everything from overall look and feel to tiny details.

Choosing an icon library

Continuing to find matching free-to-use SVG icons wasn’t going to cut it any more. We needed a proper icon library. We had look at several libraries before going with Streamline.

Streamline has an impressive amount of well-categorized icons available in multiple variants. We later noticed that Booking.com is using this library.

Setting the color palette

For colors, Kuno stayed close to Feelgood’s current choices of blue, red, and white. He made some adjustments to the colors in the print guidelines to make them look better on screens. He then added some much needed shades to be used for making components.

The main new colors in the new digital graphic guidelines.
The main colors in Kuno’s final draft. So far, I’ve only had to add one more shade of green and yellow.

Switching typeface for better accessibility

After getting Kuno’s final draft approved by the marketing department, we had to replace our inital choice of Opens for body text.

I had noticed that it rendered characters like I, l, and 1 too similarly. This would likely have been a problem for users handling IDs, invoice references, and other pieces of text with random characters.

We replaced it with IBM Plex Sans (also used on this website). This choice also came with a performance boost, since it was available as a single variable font file.

Making just the needed components

Since Kuno’s time was running out and he still had to do some concept work for the upcoming mobile app, we focused on just making components for the app. Since I had already started drawing wireframes for it, we had a head start.

It was tempting to churn out as many components as possible now, but we had been advised by coworkers and experts to just focus on what was needed.

Dan Mall, Alexander Skogberg (me) and Brad Frost smiling at An Event Apart Boston in 2019.
I got to listen to Dan Mall (left) and Brad Frost (right) at An Event Apart in Boston in 2019. Their talks on design systems sure helped us.

Making a few more component

After Kuno finished his concept work, we took his last remaining hours to try to redesign the Feelgood Web Portal using the new guidelines. This resulted in new components and patterns such as:

  • Modal, for showing and asking for more information
  • Wizard, for asking for information step by step
  • Textarea, for entering longer amounts of text
  • Sticker, for highlighting something important
  • Tabs, for dividing content on the same page

Why we put it on a website

For making our design system easily accessed and interactive, we decided to present it using a website (with the help of Stencil) for the following reasons:

First, different web browsers render things differently on different types of screens. What looks perfect in Figma will probably don’t look perfect “in the field”.

Second, everyone would be able access it without having to sign up for a design tool and ask for an invite just to download a logotype variant or copy a HEX color code.

Third, the website could use the same tech stack as Feelgood Web Portal and Feelgood Visitor, which would save us a lot of time.

Fourth, all components could more easily be made interactive for touch, keyboard, and mouse input.

Adam looking at a whiteboard sketch.
Our frontend developer Adam having a look at a sketch of the logotype page.
Screenshot of the logotype page on design.feelgood.se.
The logotype page ended up looking very similar to the sketch.

Plan for regular feedback

With limited time on our hands, the team and I decided to start small and ship a first version with just the basics and then gradually add more.

In between the updates, we were going to share the website with designers and developers for feedback. The first version included:

  • Icons
  • Colors
  • Spacing
  • Typography
  • Print guidelines
  • Logotype variants

Initial release and feedback

As planned, we shared the first version of design.feelgood.se with a handful of designers at inUse. We learned that:

  • Some download links were easy to miss
  • It felt catered to developers, but not too much
  • The website was simple, clean, tidy, and looked good
  • Our home page could be more welcoming and guiding
  • Logotype variants needed instructions how to be used
  • Colors looked great, but also needed these instructions
  • Spacing was well presented, but also needed these instructions
  • Typography was presented well, especially the links to Google Fonts

Every designer we shared the design system with asked us to add components as soon as possible


Pandemic postponement

Two weeks after the first release, we shipped another one with minor improvements. We then had to postpone work on the next update to work on Feelgood’s other solutions.

By the end of February 2020, I had finally written content for all components. Just as we were going to add them, the Covid-19 pandemic hit Sweden. This led to major reprioritizations for Feelgood and work on the design system was postponed again. However, I continued working on our library in Sketch and migrated it to Figma later in 2020.

In November 2022, we finally updated the website with most of our components and other minor improvements.

During 2023, focus has once again been put on other digital solutions: However, we’re improving the Figma library for yet another a big update in 2024.


Impact today

Today, Feelgood Design System is used in the Feelgood Mobile App, Feelgood Visitor Registration, and Feelgood Web Portal. It’s also being implemented in Feelgood Client Management, an internal data-heavy web app I’ve haven’t been much involved in.

As a designer, it’s great to have FDS to rely on. Having everything lined up in Figma saves me a lot of time on a daily basis.

The Feelgood Design System has:

  • Made design work more efficient
  • Increased quality of our code base
  • Saved time for our frontend developers
  • Improved accessibility in our the solutions
  • Made the solutions using it look and feel consistent

Finally, how working at Feelgood has been

Working at Feelgood is the best and definitely most challenging consulting gig I’ve ever had. Helping people get better healthcare and improve their well-being is the main reason I’ve stayed with them since 2017. My fun and awesome team members is another reason.

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. The positive notes always outweigh the negative ones.

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