To content

Alexander Skogberg

UX Designer in Stockholm

Hi, I’m a UX 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.

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 700 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 120 health clinics throughout the country.

Feelgood has over 8,000 companies and organizations as clients in Sweden, with a combined total of about 800,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.

The solutions

Since 2017, my team has developed multiple solutions for both Feelgood’s clients and staff. Here’s a short summary of each solution.

Feelgood Web Portal

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

Feelgood’s clients were initially using different web apps for managing orders, bookings, complaints, and invoice data. Now, they can do all of this in the Feelgood Web Portal. We released it in late 2017 and are still developing it further. It’s available at kund.feelgood.se (only clients can sign in).

Feelgood Web Portal keeps getting great feedback from Feelgood’s clients year after year. It has also proved to be crucial for Feelgood’s business side in securing new contracts.

Feelgood Visitor Registration

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

Most Feelgood clinics don’t have staff devoted to registering visitors for their scheduled appointments. Using Feelgood Visitor Registration, visitors can do this themselves just by entering their personal identity numbers. It was released in the Summer of 2018 and is still being improved further.

Feelgood Visitor Registration makes it easy for visitors to register for their appointments in Feelgood clinics all over Sweden. Staff praises it for saving time and reducing stress on a daily basis.

Feelgood Design System

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

For providing an accessible and great user experience in all of Feelgood’s digital solutions we started putting together Feelgood Design System in the Spring of 2019. It’s currently used in the Feelgood app, Feelgood Visitor Registration, and Feelgood Web Portal.

It’s available for everyone at design.feelgood.se. Unfortunately, this website is not completely up-to-date. A major update with components and adjusted content will be released in 2022.

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 app

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

Using the Feelgood app, employees at Feelgood’s clients can access their occupational healthcare bookings, report absence, take health tests, and use Feelgood’s private healthcare service Feelgood Plus. The app is developed together with Stockholm-based studio Redmind.

We released the app for iOS (App Store) and Android (Google Play) in late 2019. It’s a top priority for Feelgood and we’re actively updating it with new sought-after features and usability improvements.


Feelgood Web Portal

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

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

Challenges and goals

Before Feelgood Web Portal, clients were using different web apps for all these tasks. These web apps had inconsistent design and their 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 booking.
  • Reduce calls to Feelgood’s call center about orders and bookings.
  • Provide a great user experience on both mobile devices and desktop computers.

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

Design process

When starting a new client project, I’ve learned that you should get first-hand knowledge of the users you’ll be designing for. Hence, the team and I scheduled listening sessions at Feelgood’s call center. We needed to understand what issues Feelgood’s clients were calling about.

We also talked to staff members 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 questions, and speeding up decision-making.

I’ve learned that 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 and get rid of unnecessary content.

Photograph of a lot of paper wireframes on a table.
After this productive day of drawing paper wireframes my hand was hurting a bit.

I presented and 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 this way was great. The developers were eased into understanding and contributing to the design. Other stakeholders got help taking high-level decisions, as expected.

Once everyone felt content with the wireframes, I created a clickable prototype using Sketch and InVision. Now I made wireframes for wide screens so we could take advantage of more screen real estate. For focusing on content and interaction design I made everything black and white without much visual flair. In the past, I’ve learned this is a great approach for avoiding stakeholders to get hung up on details.

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

Expanding the graphic guidelines

I started working on graphic design while I was drawing wireframes. It proved to be more time-consuming than expected since Feelgood only had guidelines for print design. Thankfully, the marketing team was supportive and trusted me to make necessary adjustments and additions.

I kept the graphic design close to the print style for brand recognition. But I added new colors for improving accessibility and a new typeface that rendered numbers better. I also drew new interface components from scratch.

Creating a design system was just a vague thought I had at this time. We were working on a single solution and a new digital graphic profile had barely been discussed.

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

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

Usability testing the clickable prototype

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

In these sessions, we interviewed users about the then-current web apps- But we mainly observed them performing tasks in our prototype. When issues arose, we discussed them in detail. We used screen recording and took notes so we could revisit sessions later. We had to travel outside of Stockholm for some sessions, but it was well worth it.

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

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 at the time.

Backend development

Backend development began while I was drawing wireframes. Communicating with Feelgood’s backend systems was very time-consuming according to our developers. Luckily, no obstacle forced us to abandon or limit any big design decision.

Frontend development

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

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

The Feelgood Web Portal running in a desktop web browser.
Placing an order. The Wizard pattern tested well in our usability testing sessions.
The Feelgood Web Portal running in a mobile web browser.
Placing an order on small screens is now just as easy as on large screens.

Release, feedback, and impact

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

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

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

– User in an actual email to Feelgood

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

– Client to Feelgood’s marketing department during a meeting

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

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

Usability issues after release

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

Unbearable switching organization

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

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

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

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

Missing contact information

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

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

Luckily, this was an easy fix. We added additional input fields in the order placement flow when missing information for an employee is identified.

Frustrating finding replies to orders

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

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

Luckily, the solution was obvious. We added the link to the email template, but we weren’t satisfied. On the page with all orders, we started highlighting orders with new replies. We also added a filter control to only show orders with new replies. Now users could spot orders with new replies without checking their inboxes. According to feedback, this was much appreciated.

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

New features

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

Sign in using BankID

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

Though we initially only offered email and password to sign in to the portal, we quickly added the option to use BankID.

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

English language support

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

Manage invoice data

This was a simple but sought-after feature we couldn’t include in the initial release of the portal due to backend limitations, but thankfully later. At first, users were frustrated they couldn’t hide invoice data they had reviews and had to remember it. Luckily, this was an easy fix that made everyone happy.

Feelgood Design System update

In the Autumn of 2021, after a long delay due to the Covid-19 pandemic and the following business reprioritizations, we finally shipped a visually updated version of the Feelgood Web portal.

Now it follows the design guidelines in the Feelgood Design System, which was heretofore available in the Feelgood app and Feelgood Visitor Registration. The update also included adjustments to copywriting, accessibility, and usability.

Our frontend developers Adam and Andreas should be praised for their hard work on this update. They rewrote a lot of frontend code.

While a lot of work and fine-tuning remains, this big design update has been well received. Apart from some performance issues and a few bugs during the first two days after release, the Feelgood support staff has not noted any complaints about the new graphic design.

Screenshot of the Feelgood Web Portal with the Feelgood Design System update running in a desktop web browser.
Placing an order in the Feelgood Web Portal that now uses the Feelgood Design System.
Screenshot of the Feelgood Web Portal with the Feelgood Design System update running in a mobile web browser.
The Feelgood Web Portal now has the same look and feel as the app.

Feelgood Visitor Registration

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

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

Challenges and goals

Feelgood has 56 clinics throughout Sweden branded as their own. Before Feelgood Visitor Registration, visitors had a less than smooth experience registering for appointments at these clinics. Most clinics simply didn’t have staff devoted to welcoming them.

Staff members were also affected since they repeatedly had to go and check if their visitors had arrived or not.

With this in mind, we set the following goals for the solution:

  • It must be easily scalable for a quick national release.
  • Concerned staff must 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

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

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

Interviewing clinic staff

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

We focused on clinics without staff devoted to welcoming visitors, but we also met with clinics with this kind of staff. They were interested in what we were building and wanted to relieve their staff during busy hours.

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

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

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

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

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

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

After some thought, we chose email over SMS. Phones can be forgotten at home, but the clinics always had computers available.

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

Creating a high-fidelity prototype

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

Thanks to the prior research and the already expanded graphic guidelines I had everything I needed. I created the prototype using Invision and shared it with the team and other stakeholders for communicating and getting feedback on what we were designing.

We didn’t even usability test the prototype outside of our team. Yes, we felt that confident in our research, but we were also planning a limited release at a single clinic in Stockholm. We knew we would test the solution in the field and solve any issues before a wide national release.

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

Development

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

For making the solution easy to scale we made a website that would run on a tablet. By having a web-based solution instead of a native app we wouldn’t be dependent on a tablet running Android or iOS.

How successfully registering for an appointment works:

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

If the visitor is too late or the registration fails we show the visitors a message instructing them how to proceed. If it fails due to a technical issue we show a phone number to call.

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

Limited release and feedback

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

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

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

After two months we got the following feedback:

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

However, there were some usability issues:

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

Fixing usability issues

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

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, which solved the issue. This is a valid format in Sweden. We were just naive not to support it initially.

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

Providing instructions for configuring email clients
For helping staff members configure their email clients our project lead Sofia added a section about this in a guide we send to staff members when we set up Feelgood Visitor Registration at a new clinic. Sofia also added a reminder for staff to clean the tablet screen regularly.

Making the interface larger in scale
We made the entire interface larger by increasing the browser zoom level. This issue is a great example that you can’t achieve great accessibility by just following WCAG 2.1 (as we do in all projects). You must also perform usability testing to find all accessibility issues.

Fixing more issues found during observations
Apart from these issues our developer Andreas and project lead Sofia found two more issues when performing observations at another clinic in Stockholm.

Sofia had noticed that some visitors didn’t see or understand that they should use the tablet at all! They just sat down and waited. This took us by surprise, even though it was obvious looking back.

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

We solved this big issue by putting framed A3 posters next to the tablet telling visitors what to do. This is a good example of how context matters and that you must consider more than just the digital interface of your product.

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

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

While Andreas couldn’t remove the delay completely, he managed to reduce it so much that this issue became neglectable.

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

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

Wide release, feedback, and impact

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

Clinic managers and regional managers consistently give us great feedback, and we barely hear about any usability issues. Staff members appreciate the email notifications.

Feelgood Visitor Registration is currently set up at 30 out of Feelgood’s 56 own clinics in Sweden. It saves time and reduces stress on a daily basis for both visitors and staff.

Feelgood Design System update

In the Spring of 2021 after a long delay due to the Covid-19 pandemic and the business reprioritizations that followed we finally shipped a visually updated version of the Feelgood Visitor Registration.

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

We notified the clinics about the update and the reasons why months in advance. Once we shipped it, everything continued to work just as well as before.


Feelgood Design System

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

For providing a consistent, accessible, and great user experience throughout Feelgood’s digital solutions we created a design system while working on the Feelgood app in the Spring and Autumn of 2019.

Challenges and goals

Design systems have been a hot topic in the design community for several years now. Many agree that design systems are challenging to put together but possibly even more challenging to maintain.

Hence, the team and I were humble when we started to work on our design system. We spent a lot of time discussing needs and expectations. I also talked to colleagues at inUse with more experience in this area. Finally, I read those bookmarked articles on design systems I had set aside for too long.

After much thought, 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

Having a design system at Feelgood was an idea I had had before it became a project we started working on. After releasing the Feelgood Web Portal and Feelgood Visitor Registration, the next priority for Feelgood was their app. For the app, they wanted a new set of digital graphic guidelines. This sparked the idea.

Initially, the plan was to continue using the graphic guidelines for print I had expanded for the Feelgood Web Portal. But the Feelgood marketing department realized that the brand needed to be visually tweaked further for a digital context. I agreed since I had felt the guidelines were too limited, especially concerning colors and typography.

With the growing number of solutions, we needed a single codebase for typography, icons, colors, and components. Rewriting the frontend code, again and again, wouldn’t be efficient and cost-effective in the long run.

The rest of the team felt the same way, and our project manager later agreed. But before we could start we needed the new graphic guidelines finished.

Assistance with graphic design

I felt that creating new 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. He jumped at the opportunity to create something great for Feelgood. I felt confident and relieved he was onboard.

After some introductory meetings, Kuno immediately started working on the guidelines. He was going to put together:

  • Icons
  • Colors
  • Imagery
  • Typography
  • Logotype variants

Kuno did all of the work and I reviewed his drafts, pointed out issues, and offered new ideas. Kuno chose to do his work in Sketch since we both had the most experience of that editor. For sharing and discussing drafts we used Zeplin, but mainly we just sat down next to each other.

Together we benchmarked several icon libraries before choosing Streamline Icons library, which proved to be a fantastic choice with its many and varied icon sets.

The main new colors in the new digital graphic guidelines.
The main colors in Kuno’s final draft. Since then I’ve added a darker shade of green and two darker shades of yellow.
The logotype variants in the new digital graphic guidelines.
The logotype variants in Kuno’s final draft. The variant with just the f and the g was later discarded. It wasn’t needed and strayed too far from the original logotype.

Late change of typography

Everything progressed well and Kuno’s first draft looked great! However, we had to discard our choice of Open Sans for body text. We noticed that Open Sans render characters like I, l, and 1 too similarly. This could confuse users when handling order IDs, invoice references numbers, and other strings with random characters.

Instead, we chose IBM Plex Sans. Thanks to this, we also got a performance boost since the entire IBM Plex Sans font family is available as a single variable font file.

For headlines, we continued using Raleway Extra Bold. Feelgood was already using this typeface in the graphic guidelines for print. Luckily, it worked just as well in a digital context.

Crafting the components

While a design system is much more than a components 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 we needed.

We needed to work smart. Kuno had joined Feelgood on a limited budget. Apart from creating the new graphic guidelines, he was also obliged to put together high-fidelity concept work of the app. Hence, we focused on finishing just the components the app needed. Thankfully, I had already drawn a good amount of wireframes of the app. We knew what we needed.

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 colleagues at inUse, but also from international experts Dan Mall and Brad Frost. Earlier in the Spring of 2019, I had the privilege (and great timing) of listening to their talks at the An Event Apart conference in Boston.

This made a lot of sense since we weren’t creating a massive public design system like Google’s Material Design. Designing solutions for healthcare requires a very different set of components compared to designing a streaming app for music or a platform for trading cryptocurrencies.

Dan Mall, Alexander Skogberg (me) and Brad Frost smiling at An Event Apart Boston in 2019.
Hanging out with Dan Mall (left) and Brad Frost (right) at An Event Apart in Boston in 2019. Their talks and advice on design systems were invaluable when creating the Feelgood Design System.

Expanding the component library

Once Kuno and I had finished the concept work for the app, we applied the design system on the Feelgood Web Portal. Did the system have everything we needed or would we have to expand it?

Many of the components proved to be flexible enough to handle a lot of the interface, but we still 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.

Kuno and I had worked well together so far. But this phase proved to be straining on both of us. We were tired and had a few heated discussions.

Kuno’s hours at Feelgood were running out. I was stressed and frequently brought up potential issues regarding accessibility and edge cases. We pushed ourselves and each other too hard. Luckily, we’re still friends. Our thorough work did pay off since the design system is still about 80 % intact.

Design of some components presented to developers in Zeplin.
Some of the components Kuno and I added later. The “Stickers” proved to be useful in both the Feelgood app and Feelgood Web Portal.

Development

For making the design system interactive and easily accessed we decided to present it on a website. While some might have opted for just a Sketch or Figma file we chose a website for the following four reasons:

First, different browsers on different screens on different 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 one would have to sign up for a design tool and ask for an invite (like with Figma) or pay for software and get a computer running a specific operating system (like Sketch on macOS).

Third, the website could use the same tech stack as the Feelgood Web Portal, Feelgood Visitor Registration, and other solutions that would later implement the design system. This would save us a lot of time.

Fourth, all components on a website could be interactive in a way they couldn’t be in Sketch or Figma. Remember! Design is not just what it looks like and feels like. Design is how it works.

Adam looking at a whiteboard sketch.
Frontend developer Adam having a look at a sketch of design.feelgood.se/#/logotypes. It ended up being very similar.

Basic content first, more later

While I had ambitious plans for the design system 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 contain improvements based on feedback and information, examples, and development instructions for all components.

The second update would contain more improvements based on feedback. But it would also include instructions 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.

The colors in the Feelgood Design System presented on design.feelgood.se.
The colors used in Feelgood Design system presented at design.feelgood.se/#/colors.

Update and pandemic hiatus

We released the first update two weeks later. We had fixed everything we could, but I needed to write content about the components. Unfortunately, I had to postpone this for a few months due to design work on the other solutions.

After finishing writing this content by February 2020, the developers got back to work on the update. Then the Covid-19 pandemic hit. While Feelgood faired quite well, the sudden shift in everyday life in Sweden led to business prioritizations. The design system website was put on hold.

However, work on the Feelgood Design System didn’t stop! It continued in Sketch (and later Figma) while we developed the Feelgood app.

Impact

The Feelgood Design System is now implemented in the Feelgood app, Feelgood Visitor Registration, and Feelgood Web Portal.

The design system is also being implemented in Feelgood Client Management. This is an internal data-heavy web app Feelgood staff members use to manage clients and their staff. It’s something I haven’t been that involved in. Hence, I haven’t mentioned it earlier in this case study.

As a designer having a proper design system at hand has been lovely. It’s a huge time saver and stress reducer having all components, typography, icons, and colors lined up in Figma.

While our developers had to rewrite a lot of the frontend code for the solutions now using the design system, they enjoy working with it more and more. They know the more work they put into it, the more time and energy they’ll save on future development work.

Planned updates

The Feelgood Design System is in great shape, but design.feelgood.se isn’t. The website hasn’t gotten an update since late 2019. It’s not an accurate presentation of the design system at this time.

We’ll release the big update with all components sometime in 2022. Either way, the Feelgood Design System will continue to evolve and make design work better, easier, more efficient, and more cost-effective at Feelgood.


Feelgood app

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

More information about the Feelgood app will be added in 2022.


How working at Feelgood has made me feel

Working at Feelgood is the best consultant gig I’ve ever had. Our team consists of skilled and lovely people. Our way of working is smooth and flexible with few meetings. What we’re working on contributes to a positive effect on people’s lives. It’s just great!

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

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

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

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