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.


Quick summary

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

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 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’s 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 ensuring an accessible and great user experience in all of Feelgood’s digital solutions we started working on a design system in the Spring of 2019. It’s currently used in the Feelgood mobile app, Feelgood Visitor Registration, and Feelgood Web Portal, with more to follow.

The design system is available at design.feelgood.se. A major update with (most) components was released in November 2022. More updates will follow in early 2023.

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 mobile app

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

Using the Feelgood mobile app, employees at Feelgood’s clients can view bookings, report absence, take health tests, manage vaccination shots, and more. It’s a top priority for Feelgood and we’re actively updating it with new sought-after features and usability improvements.

The app is developed together with Stockholm-based studio Redmind. It’s available for iOS (App Store) and Android (Google Play). How it was designed will be added to this case study later in 2022.


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 employees at clients managing orders, bookings, complaints, invoices, and more. This led to the development of Feelgood Web Portal.

Challenges and goals

Before Feelgood Web Portal, these employees 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 bookings.
  • 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, 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 get first-hand knowledge of the users you’re 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 who handled orders, bookings, and complaints. We needed to learn what information they needed from clients and what these clients had to and should be able to do on their own.

Eliciting requirements using wireframes

With this insight I started drawing wireframes for eliciting requirements, getting answers to complicated questions, and speeding up high-level decision-making among stakeholders.

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 content and get rid of what’s not necessary.

Photograph of a lot of paper wireframes on a table.
After this productive day of drawing wireframes my hand was cramping up 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 smart. 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 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 visual flair. In the past, I’ve learned this is a great approach for avoiding stakeholders to get hung up on graphical details like typefaces, icons, and color choices.

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 the 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 all interface components from scratch.

Creating a design system was just a thought at this time. We were just working on one single solution and new graphical guidelines 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 components based on the expanded print guidelines. They were shared with the team using InVision. Later in the project we migrated to Figma.

Usability testing the 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 these 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 the time.

Users completed all tasks without any assistance. However, many found Feelgood’s terminology too confusing. We ended up rewriting 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. Working with Feelgood’s backend systems was very time-consuming according to the developers. Luckily, nothing forced us to abandon or limit any planned design.

Frontend development

Frontend development started when everyone felt satisfied with the paper wireframes. When we had finished usability testing and improving the prototype we picked up the pace. Our frontend developer Adam and I worked closely since I was still adjusting interaction design and graphic design while he was writing code.

I tried not to waste time, but I still 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 is now just as easy as on large screens.

Release and impact

We released the portal in the Autumn of 2017. It’s available for Feelgood clients at kund.feelgood.se. We immediately got great and constructive feedback from users.

We learned that they found it easy-to-use, professional, and good-looking. They appreciated finally having all features in one place, which was one of our goals. Feelgood’s call center also noted a decrease in order-related calls, which was another met goal.

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

– User in an email to us

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

– Client to Feelgood’s marketing department

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


Usability issues after release

Even though usability testing went well and initial feedback was great we still had to handle some tricky usability issues soon after afterwards.

Unbearable switching organization

Some users are linked to multiple organizations. At first, they had to sign out and sign in again (with different credentials) for switching organization. For making this easier we put a select element in the bottom of the navigation. Now users could switch accounts with just two clicks.

This worked well for users linked to a few organizations, but it became unbearable for users linked to many. We had missed that users could be linked to hundreds (!) of sub-organizations at an organization. This broke the new design adjustments completely.

We solved it by not listing sub-organizations in the select element. For filtering content for specific sub-organizations, we added a new filter control on content-heavy pages. 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 for filtering content.

Missing contact information

Feelgood clients are obliged to supply personnel files to Feelgood regularly. Contact information in these files is used when placing orders and making bookings. This way users don’t have to remember personal and contact information for their colleagues.

I was naive and assumed these files always were tidy and complete. I quickly learned it wasn’t so when clients started raising complaints about their employees sometimes not being contacted for scheduled appointments. How could we? We didn’t have their phone numbers.

We solved this issue by adding input fields in the order placement flow when missing information for an employee is identified.

Frustrating finding replies to orders

After placing an order, users can ask Feelgood additional questions in message thread on the page for the specific order. Replies from Feelgood are often important and should be read as soon as possible. Hence, we send the user an email whenever a new reply is posted.

Unfortunately, I had missed that we didn’t include a link to the page in the emails. For privacy reasons, the reply cannot be included in the email. This made users incredibly frustrated since they had to go through all orders one by one to find the reply.

We immediately added the link to the emails, but we weren’t satisfied. On the page listing all orders, we started highlighting orders with new replies. Now users could spot orders with new replies without checking their inboxes. We got 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 are still updating Feelgood Web Portal with new sought-after features. 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.

Initially we only offered using email and password to sign, but 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 of Feelgood clients have a substantial amount of native English-speaking employees. Therefore, it made sense to offer English language support for making the portal more accessible. From a business perspective, this had to be done since more and more clients are requiring.

Manage invoice data

This was a simple but sought-after feature we couldn’t include in the initial release due to backend limitations, which were sorted out later.


Feelgood Design System update

In the Autumn of 2021 after a delay due to the Covid-19 pandemic and business prioritizations that followed, we shipped a visually updated version of Feelgood Web Portal.

Now it follows Feelgood Design System just like the Feelgood mobile app and Feelgood Visitor Registration. The update also included improvements to copywriting, accessibility, and usability.

Our frontend developers Adam and Andreas did a fantastic job on this update including rewriting a lot of frontend code.

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

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

Feelgood Visitor Registration

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

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

Challenges and goals

Feelgood has 56 clinics in Sweden branded as their own. Prior to this solution, visitors often struggled a bit when registering for their appointments at these clinics. Most clinics simply didn’t have staff devoted to welcoming them. Hence, treatment staff had to repeatedly check if their visitors had arrived or not.

Knowing this, we set the following goals for the solution:

  • It must be easily scalable for a nationwide release.
  • Treatment staff are 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

After just releasing Feelgood Web Portal, we felt confident developing this more simple solution. However, we understood we had an even broader group of users including every employed person in Sweden with access to occupational healthcare. Hence, research and usability testing had top priority.

Interviewing clinic staff

For learning about issues visitors and staff had been facing, we scheduled interviews with staff at clinics in Stockholm. We focused on clinics without staff devoted to welcoming visitors, but we also met with others. They were interested in what we were doing and wanted to relieve their staff during busy work hours.

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.

Visitors regularly 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.
Visitors are sometimes on time for their appointments, but at the wrong clinic. This is how we alert them about this.

Concerns about getting notifications

We learned that staff preferred the built-in notifications in their journal system. Unfortunately, this system was limited. Notifications couldn’t be triggered by a separate solution.

When discussing other options most staff members were reluctant to try using SMS or email. They didn’t want to have their email client open all day for privacy reasons and they disliked using SMS because it required always carrying their work phones in addition to their personal ones.

We ended up choosing email over SMS. Phones can be forgotten at home, but the clinics always have computers available.

Concerning privacy we assured staff members that the subject line of a notification email 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. The staff members were still a bit reluctant, but they agreed to try.

Creating a high-fidelity prototype

Because Feelgood Visitor Registration was a much simpler solution compared to Feelgood Web Portal I created a high-fidelity prototype using Invision instead of drawing paper wireframes. Thanks to our prior user research at the clinics and the expanded graphic guidelines I had everything I needed.

For usability testing we decided to do a limited release of at a single clinic in Stockholm. This way we could test the solution in field before a later nationwide release. Not usability testing the prototype (apart from with a few Feelgood employees) was a calculated risk we took since we felt so confident in our research.

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 the team felt confident in the prototype we started development. The developers and I sat right next to each other so we always had time for questions, designing in the browser, and taking decisions on the fly. This way of working continues to be one of the strengths of our team.

For making it easy to scale we chose a web-based solution over of a native app. This way we could do quicker updates and wouldn’t be dependent on a tablet running a specific operating system.

How 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. The concerned staff member gets an email when the appointment is found.
  4. The visitor is informed that the appointment was found and is instructed to wait.

If the visitor is too late or the registration fails we show a message with instructions for how to proceed. If registration 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 all 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 for 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 visitors for ID and personal identity numbers.
  • Some staff members had continued using their journal system, which led to confusion.

However, there were also usability issues:

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

Fixing usability issues

While we solved these issues, registrations failing due to staff members not having their email addresses entered in the journal system is an ongoing but not too frequent issue. Feelgood has also put more resources on finding these incomplete entries.

Supporting two formats for personal identity numbers
Despite hinting that users must enter their personal identity numbers using the format YYYYMMDDNNNN we also added support for YYMMDDNNNN. It was naive and lazy of us not to support it initially since it’s a valid format in Sweden.

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 initially done less frequently.

Providing instructions for configuring email clients
For helping staff members configure their email clients our project lead Sofia added information about this in the guide we sent to clinics when setting up Feelgood Visitor Registration. She also included a reminder to clean the tablet screen regularly.

Scaling up the interface
Even though no interface text was smaller than 16 pixels, some users still had trouble reading. We decided to make everything larger in scale to help. This was a great example that you can’t achieve great accessibility just by following WCAG 2.1. You have to do usability testing too.

Additional issues found during observations
Our developer Andreas and project lead Sofia also found two more issues when performing observations at another clinic in Stockholm. Sofia noticed that some visitors didn’t even understand that they had to use the tablet. They just sat down and waited not alerting the treatment staff.

We solved this issue by putting framed posters next to the tablets telling visitors what to do. This was a great reminder that there’s usually more to the usability of solution than its digital interface.

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

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 one helped 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 custom on-screen keyboard. After having pressed a button the remaining buttons weren’t clickable until after a few hundred milliseconds. This confused some fast-typing users.

While Andreas couldn’t remove the delay completely, he managed to reduce it so much so the issue became neglectable. The reason for using a custom on-screen keyboard instead of the default Android one was 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.

Nationwide release and impact

After sorting out the initial usability issues, Feelgood Visitor Registration has done great and become an important part of most Feelgood clinics throughout Sweden. Clinic managers and regional managers continue to give it great feedback. Despite initial hesitation staff now appreciates using email for being notified about arriving visitors.

Feelgood Visitor Registration is currently running at 30 out of Feelgood’s 56 clinics. According to staff it saves time and reduces stress for everyone on a daily basis.


Feelgood Design System update

In the Spring of 2021 after a delay due to the Covid-19 pandemic and business reprioritizations that followed, we shipped a visually updated version of Feelgood Visitor Registration. Now it follows the design guidelines in the Feelgood Design System.

We notified the clinics about the update and the reasons why months in advance. After we shipped it, everything has 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 ensuring a consistent, accessible, and great user experience in Feelgood’s digital solutions we started putting together design system while working on the Feelgood mobile app during 2019.

Challenges and goals

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

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

Finally, 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

Creating a design system was something I had thought of long before we started working on it. After releasing Feelgood Web Portal and Feelgood Visitor Registration, the next priority was a new mobile app for which higher-ups wanted a new set of digital graphic guidelines.

I felt the same way since the then-current graphic guidelines were too limited. After a while the idea of a design system came about. The rest of the team and our project manager agreed we.

We knew we needed a single codebase for typography, icons, colors, and components. Rewriting the same frontend code, again and again, wouldn’t be efficient and cost-effective in the long run.

Assistance with graphic design

I felt that creating a set of 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.

After introductory meetings, Kuno 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 was someone he could bounce ideas off. Kuno chose to work in Sketch since we both had most experience using it. For sharing and discussing drafts we used Zeplin, but we usually just sat down next to each other.

For icons looked at several libraries before choosing the excellent Streamline Icons library. It had an impressive amount of varied and well categorized icons available in multiple variants.

The main new colors in the new digital graphic guidelines.
Main colors in Kuno’s final draft. Since then I’ve added a darker shades of some colors.
The logotype variants in the new digital graphic guidelines.
Logotype variants in Kuno’s final draft. We later discarded the variant with just the f and g. It strayed too far from the original logotype.

Late change of typography

Our work progressed well and Kuno’s first draft looked great. However, we had to replace Open Sans for body text. We noticed that Open Sans rendered characters like I, l, and 1 too similarly. This could confuse users when handling order IDs and invoice references numbers with random characters.

We replaced it with IBM Plex Sans, which rendered these characters distinctively. This also gave the design system a performance boost since the IBM Plex Sans was available as a single variable font file.

For headlines, we continued using Raleway Extra Bold for brand recognition. Feelgood was already using this typeface in the print guidelines and it worked well in a digital context.

Crafting the components

While a design system is much more than a component 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 to work smart since Kuno was on a limited budget. Apart from creating the new graphic guidelines, he was also going to put together high-fidelity concept work of the app. Hence, we focused on just the components the app needed. Thankfully, I had already drawn a lot 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 our colleagues at inUse, but also from international experts Dan Mall and Brad Frost. Earlier in the Spring of 2019, I had the privilege of listening to them at the conference An Event Apart in Boston.

This made sense since we weren’t creating a general design system like Google’s Material Design. Designing solutions for healthcare solutions requires a 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 advice on design systems came in handy for our work at Feelgood.

Expanding the component library

Once Kuno had finished the concept work for the app, we took the time we had left and applied the design system on Feelgood Web Portal. Many components proved to be flexible enough to handle its interface, but we 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, but this phase proved to be straining. We were tired and had a few heated discussions. However, we pulled through!

Kuno’s time at Feelgood was running out. I was stressed and frequently brought up potential issues regarding accessibility and edge cases. We probably pushed ourselves too hard. Luckily, we pulled through and are still friends.

Design of some components presented to developers in Zeplin.
Some ocomponents Kuno and I added later. The “Stickers” proved to be useful in both the Feelgood mobile 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 a public Figma file we chose a website for the following reasons:

First, different browsers on different screens and 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 need to sign up for a design tool, ask for an invite and having to pay for requiring a computer running a specific operating system.

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

Fourth, all components on a website could be interactive in a way they can’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

With limited time on our hands 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 then contain minor improvements based on feedback, but mainly our first batch of components including clickable examples, instructions for designers and and detailed information for development.

The second update would then contain more improvements based on feedback, but mainly different sets of principles 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 an update two weeks later with minor improvements, but without any components. We had to postpone this for a few months due to needed design work on our other solutions.

After I had finished writing content for all components by February 2020, the we finally got back to work. Then the Covid-19 pandemic hit. This sudden shift in everyday life in Sweden led to major business reprioritizations for Feelgood and our work was once again put on hold.

However, I continued improving the design system in Sketch before migrating it to Figma later in 2020.

In November 2022 we finally released a major update of design.feelgood.se with (most components) and other adjustments. More updates with additional components and improvements based on user feedback will be made during early 2023.


Impact

Feelgood Design System is now implemented in the Feelgood mobile app, Feelgood Visitor Registration, and Feelgood Web Portal. It’s proved to be both sturdy and flexible.

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

As a designer it’s lovely to have a solid design system to rely on. Having everything lined up in Figma saves me a lot of time and reduces stress on a daily basis.

The developers in our team also enjoy working with Feelgood Design System. They know the more work they put into it, the more time and energy they’ll save on future development work.


Feelgood mobile app

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

Information about the Feelgood mobile app will be added later in 2022.


How working at Feelgood has made me feel

Working at Feelgood is the best and most challenging consultant gig I’ve ever had. Our team consists of lovely, fun, and skilled people. We get to choose our own tools and tech stack. Our way of working is smooth and flexible. What we’re doing has great effect on people’s health and well-being.

Helping people get better healthcare (especially for mental health issues) and improve their well-being is one of the main reasons I’ve stayed with Feelgood for over five years. It’s the longest consultant gig I’ve ever.

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. As usual the positive notes outweigh the negative ones.

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