To content

Alexander Skogberg

UX, Web & Writing

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

Digital solutions for health company Feelgood

In 2017 Swedish health company Feelgood started expanding and improving its digital solutions. Since then, I’ve been responsible for UX in their multi-disciplinary team developing these solutions.

Background

Feelgood is Sweden’s leading health company. It was founded in 1995, has over 700 employees, and is since 2021 owned by Terveystalo, Finland’s biggest healthcare service company.

Feelgood offers a wide range of health services to private individuals, organizations, and businesses in both the private and public sectors in Sweden. 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 and reduced costs of poor health for businesses and increased quality of life for private individuals.

Solutions and their impact

In the Spring of 2017, I joined Feelgood as a designer in their multi-disciplinary team. This team would develop a brand new web portal for the company’s clients. Since then, we’ve developed several solutions in parallel for both Feelgood clients and staff.

Feelgood Web Portal

For a long time, Feelgood’s clients were using different web apps for managing orders, bookings, complaints, and invoice data. We merged all of this into the single web app Feelgood Web Portal. The first version was released in late 2017 and is still being actively developed. It’s available at kund.feelgood.se (only clients can sign in).

The Feelgood Web Portal continuously receives great feedback from Feelgood’s clients. It’s also become crucial for Feelgood’s business side for securing new business contracts.

Feelgood Visitor Registration

Most Feelgood clinics don’t have staff devoted to welcoming and registering visitors for their appointments. With Feelgood Visitor Registration running on a tablet in each lobby visitors can register for their appointments just by entering their personal identity numbers. Concerned staff members are then notified over email. It was released in the Summer of 2018.

The Feelgood Visitor has proved to work very well for visitors. Feelgood staff members have also praised it for saving time and reducing stress on a daily basis.

Feelgood Design System

For providing a consistent, accessible, and great user experience throughout Feelgood’s digital solutions we started working on the Feelgood Design System in the Spring of 2019. It’s currently in use in the Feelgood app, Feelgood Visitor Registration and in the Feelgood Web app.

The design system is available at design.feelgood.se since late 2019. Unfortunately, it’s currently not up-to-date with the latest version in Figma. A big update with all components and minor adjustments is set for a late 2021 or an early 2022 release.

The Feelgood Design System has become an important tool for me as a designer and for the developers in our team. Without it we would be far from as efficient.

Feelgood app

With the Feelgood app employees at Feelgood’s clients can access their occupational healthcare bookings, report absence due to illness, take health tests, and use Feelgood’s private healthcare service Feelgood Plus. It’s being developed together with Stockholm-based studio Redmind.

The app was released for iOS (App Store) and Android (Google Play) in late 2019 and is getting adapted by more and more clients. It’s a top priority for Feelgood and we’re actively updating it with new sought-after features and usability improvements.


Feelgood Web Portal

Screenshot of the Feelgood Web Portal running in a desktop and a mobile web browser.

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

Challenges and goals

Before the release of the Feelgood Web Portal, clients were using different web apps for all of these tasks. The design of these web apps was inconsistent and the user experience on mobile devices was poor.

With these insights we set the following goals:

  • Improve usability as much as possible.
  • Reduce the 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 regular computers.

These 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 it’s wise to immediately invest yourself in business matters and the content you’ll encounter. Hence, the team and I scheduled listening sessions at Feelgood’s call center. We needed to understand the issues employees at Feelgood’s clients are calling about.

We also talked to Feelgood staff handling orders, bookings, and complaints from clients. It was crucial to learn what information they needed from the clients and what the clients had to be able to do on their own.

Eliciting requirements using wireframes

Based on these insights I started drawing wireframes for eliciting requirements, getting answers to questions, and speeding up complex discussions.

Over the years I’ve learned that a single wireframe says more than a thousand meeting minutes. It acts as a catalyst for decision-making!

Since providing a great user experience on mobile devices was one of our goals I worked mobile-first and drew the wireframes for small screens. This is an excellent way for getting rid of unnecessary content and prioritizing what is left.

Photograph of a lot of paper wireframes on a table.
The result of one day of drawing paper wireframes. My hand was hurting a bit.

I presented wireframes to the team and other stakeholders several times per week (sometimes several times per day) over about two months. During each session, 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 involved feel appreciated.

Keeping everyone in the loop this way went well. The developers were eased into understanding and contributing to the design. Other stakeholders were pushed to take needed high-level decisions, as expected.

Once everyone felt content with the wireframes, I created a clickable prototype using Sketch and InVision. This time I drew the digital wireframes for wide screens. This way we could take advantage of more screen real estate when available. For putting the focus on content and interaction design I made the prototype black and white without any visual flair. In the past, I’ve learned this is a good approach for avoiding stakeholders getting 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 graphic 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 for rendering numbers better. I also drew new interface components from scratch.

At this point, creating a design system was just a vague thought I had. We were just working on a single solution and a separate 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 in 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 type 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 the users about the then-current web apps but mainly observed them when they performed planned tasks in our prototype. When issues came up we could discuss them in detail. We used screen recording in addition to taking notes so we could revisit sessions later. We had to travel outside of Stockholm for some sessions, but it was well worth it.

Users completed all tasks without any assistance. However, many found Feelgood’s terminology 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. Setting up input and output to Feelgoods’s backend systems proved to be challenging and time-consuming according to the developers. Luckily, no obstacle forced us to abandon or limit any major design decision.

Frontend development

Frontend development started early when everyone was satisfied with the paper wireframes. Once we had usability tested and improved the clickable prototype we really 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 our users. We learned that they found it easy-to-use, that it felt professional and looked good. A lot of users 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 easier we added a select element to the navigation. Using this element users could now switch to any other account with just two clicks.

This worked well for users linked to few clients. However, it became unbearable for users linked to many. We had 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 on a regular basis. 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 hadn’t done that since we didn’t have phone numbers for some of them.

Luckily, this was an easy fix. We just added additional input fields in the order placement flow when incomplete information for a selected employee was 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 had missed that we didn’t include a link to the order page in the email template. For privacy reasons, the reply can’t be included in the email template. 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 still weren’t satisfied. On the page listing all your orders, we decided to highlight orders that had gotten new replies. We even added a filter control to only show orders with new replies. Now users could spot orders with new replies without having to check their inboxes. According to feedback all of this was very 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 an incredibly 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 as a way to sign in to the portal, we quickly added the option of using 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 also had to be done since more and 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 weren’t satisfied since they couldn’t hide invoice data they had taken care of and were forced to remember. Luckily, this was an easy fix. Once we added it everyone was satisfied.

Feelgood Design System update

In the Autumn 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 Web portal.

Now it follows the design guidelines in the Feelgood Design System, which was previously available in the Feelgood app and Feelgood Visitor Registration. In this update we also included several adjustments to copywriting, accessibility and usability.

Our frontend developers Adam and Andreas should be praised for their hard work on this update. A lot of frontend code had to be rewritten from scratch.

While a lot of work and fine-tuning remains to be done, this big design update has gone over well. Apart from some notable 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 that are completely branded as their own. Prior to the Feelgood Visitor Registration visitors didn’t always have a smooth experience registering for their appointments at these clinics. This is because most of them simply didn’t have staff devoted to welcoming and registering visitors.

This also affected staff members who repeatedly had to go and check if their visitors had arrived or not.

With these insights we set the following goals for the solution:

  • Registering your appointments should be simple enough to do on your own.
  • Automatically notify concerned staff when an appointment is registered.
  • Create an easily scalable solution for a wide national release.
  • Offer visitors help over the phone if technical issues arise.

Design process

With the recent release of the Feelgood Web Portal, we felt confident about developing this much simpler 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 since clinics with devoted staff also were interested we met with them too. Despite having devoted staff members these clinics wanted to be able to relieve them during busy hours.

When discussing common 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
Right away 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 even 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. The reason for this was because phones could 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 a certain appointment time had arrived. The staff members were still a bit reluctant but agreed to give it a try.

Creating a high-fidelity prototype

Because the Feelgood Visitor Registration was much simpler in scope 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. The prototype was done in Invision and shared with the team and other stakeholders for communicating and getting feedback on what we were designing.

We actually didn’t usability test the prototype outside of our team. This was because we felt confident in our research, but mainly because we were planning a limited release at a single clinic in Stockholm. This way 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 easily scalable we developed it as a website to be shown 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.

This is 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 a message about this is shown instructing the visitor how to proceed. If the reason is due to technical issues we provide 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 that 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.

Two months later 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 leading to internal 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 of their personal identity numbers.
  • Some staff members didn’t notice emails due to individual settings in their email clients.
  • From time to time 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 address entered in the journal system is still an ongoing but not too frequent issue. When it occurs we solve it within 20 minutes. Thankfully, Feelgood has put more manpower 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 and 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 starting importing data from the journal system every tenth minute. Previously it was done less frequently.

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

Making the interface larger in scale
For solving the issue of some text being too small to read 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). Usability testing is also needed for finding all accessibility issues.

Fixing more issues found during observations
Apart from these issues our developer Andreas and project lead Sofia documented two more issues when performing observations at another clinic in Stockholm we had expanded the limited release to.

Sofia had noticed that some visitors didn’t see or understand they should even use the tablet! They just sat down and waited without using it at all. This issue took us by surprise, but in retrospect it was so obvious.

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

Luckily, we solved this huge issue by putting framed A3 posters next to the tablet telling visitors what to do. This is a great example of how context matters and you need 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 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 get rid of the input 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 also appreciate the automatic notifications over email.

Feelgood Visitor Registration is currently set up at 30 out of Feelgood’s 56 own clinics in Sweden saving time and reducing stress 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 scope and maintain.

Hence, the team and I were humble when we started working on our design system. We spent a lot of time discussing needs and expectations and I also talked to colleagues at inUse with more experience in this area. Finally, I also 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 well before it became an actual project we started working on. After the release of the Feelgood Web Portal and Feelgood Visitor Registration, the next priority for Feelgood was their app and they wanted a new set of digital graphic guidelines done by then. This was what 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 move on we needed the new graphic guidelines set and done.

Assistance with graphic design

While I have both experience and confidence in graphic design work I still 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 while 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 his drafts and discussing details we used Zeplin, but usually 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 drop our initial choice of Open Sans for body text after getting it approved by the Feelgood marketing department. 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 choice we also got a small performance boost since the entire IBM Plex Sans font family is available as a single variable font file.

For headlines, we continued to use Raleway Extra Bold, which Feelgood already was using in their 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 basic components we needed.

We needed to work smart. Kuno had joined Feelgood on a limited budget and 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 so we knew what we needed.

While it might be tempting to just churn out components at this stage Kuno and I had been advised to just create the components we needed.

This advice came from experienced colleagues at inUse, but also from renowned design system experts like 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 add new components and variations to existing ones?

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 very well together to this point, 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 and I was stressed and frequently bringing up potential issues regarding accessibility and edge cases as well as ideas for aesthetic adjustments. We pushed ourselves and each other too hard. Luckily, we’re still friends. Two years later this thorough work paid 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 had 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, on a website all components 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 with new content. In between these updates, we planned to share the website with developers and designers for feedback. 

The first release would contain the following:

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

The first update would then contain improvements based on feedback and information, examples, and development instructions for all of the components.

The second update would apart from new improvements based on feedback also contain instructions on topics such as designing and validating forms, writing easy-to-read and accessible text, and more. We didn’t plan further ahead at this time.

Release and feedback

Just as planned we shared the first subtle release of design.feelgood.se with a handful of designers at inUse. Before sharing it with any developers we wanted some feedback and ship the update with 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, clear, 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 more content about all components. Unfortunately, I had to postpone this for a few months due to needed design work on the other solutions we were working on.

After finally having finished 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 lead to tough 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) as the Feelgood app was still being developed with sought-after features and usability improvements.

Impact

The Feelgood Design System has been implemented in the Feelgood app, Feelgood Visitor Registration and Feelgood Web Portal.

The design system is also currently 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

Currently, 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.

Hopefully, we’ll release the big update with all components later in 2021 or at the beginning of 2022. Either way, the Feelgood Design System will continue to evolve and make design work better, easier, efficient, and more cost-effective at Feelgood.


Feelgood app

Information about this solution will be added in 2022.

App prototype running on iPhone 8
Usability testing a prototype of a big app update in the end of 2019.

How working at Feelgood has made me feel

Working at Feelgood is the best consultant gig I’ve ever had! Our team is filled with 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