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.

Doctor using a laptop computer

Multimedia management app for hospital staff

March 2013 to August 2013 (part-time)


In 2013, KIBI (now acquired by CSAM) needed design help when merging and improving two of their apps for multimedia management for hospital staff. I joined the project as a UX Designer for the final app titled KIBI Media.

Quick Summary

Screenshot of KIBI Media
Editing a photo of an ear canal in KIBI Media.

KIBI Media is a multimedia management app for hospital staff. Its goal is to make it easy and efficient to organize, edit, and compare photos and video of a patient’s medical condition and its development over time.

My coworker Rickard Linder and I designed KIBI Media with great assistance from KIBI. Together we benchmarked several photo editing apps and visited and interviewed a hospital photographer in northern Sweden. I was responsible for drawing and usability testing wireframes of the app while Rickard focused on graphic design. We also assisted the developers at KIBI during the later development phase.

Four years after the project ended, I got curious and reached out to the project lead at KIBI. I was overjoyed to hear that KIBI Media had been a great success and was still being used in county councils all over Sweden. I was told a chief physician had been quoted saying “KIBI Media is the best app out there and is incredibly easy to use”.


Background

KIBI is a Swedish software development company focusing on medical documentation and diagnostics solutions for healthcare providers. Their e-health solutions are used at over 100 hospitals and care centers in northern Europe. In 2019 they were acquired by Norwegian medtech company CSAM.


Goals

KIBI wanted to merge two specific apps used by hospital staff for handling and editing documents and photos. Apart providing great usability and new sought-after features, KIBI also wanted brand new graphic design for the final app.

Printout of one of the old KIBI apps.
A printout of the past version of the photo editing app.

Design process

I had the privilege to work with my good friend and seasoned graphic designer Rickard throughout the project. Here’s is how we put together the design process.

Bechmarking photo editing apps

Immediately, Rickard and I knew we needed to analyze the most popular photo editing apps at that time. Based on many hours of benchmarking and invaluable input from KIBI, we made educated guesses on must-have features before drawing whiteboard sketches of the layout and discussing early graphic design ideas.

Performing user research

For learning more about our users, Rickard and I flew to a hospital in northern Sweden where we spent a full day with their photographer (a soon-to-be user of KIBI Media).

The photographer used several pieces of software throughout his day. Rickard and I noticed that much of his time was wasted switching between these pieces of software. With this insight, we felt confident in creating something better for him and others like him.

We interviewed the hospital photographer and observed him doing his everyday tasks. Afterwards, we had a clear picture of what the app had to offer.

Drawing and usability testing wireframes

With our analysis of the photo editing apps, input from KIBI, and the detailed insights from our day with the photographer, we got to work.

I started by drawing wireframes of the entire app including even the smallest features. I drew everything on paper to save time, but also because Rickard would put together high-fidelity sketches later. What I drew included:

  • Importing photos from your computer
  • Comparing different versions of these photos
  • Adjusting colors and contrast of photos
  • Drawing overlays on photos

Once drawn, I usability tested the paper wireframes with five people with experience in photo editing. Some were from beginners and others were experienced enthusiasts. We didn’t have much time, but Rickard and I managed to find all participants among or through our coworkers at HiQ.

Usability testing went well! Based on our research, we had gotten most of the design right from the start. Only minor details needed to be adjusted afterwards.

Paper wireframe of KIBI media
One of the wireframes used for usability testing. Using these small pieces of paper, I could simulate interactivity.
Another paper wireframe of KIBI Media
Another wireframe. This one shows how comparing several images would work.

Graphic design and working with the KIBI developers

Once I had improved the paper wireframes, Rickard and I started working on graphic design for the app. Rickard was in charge but kept me in the loop and included my feedback and ideas.

We then shared high-fidelity wireframes and graphic design guidelines with the KIBI developers. Throughout the rest of the project, we regularly met and helped them out implementing the design.

The developers later told us they had been impressed to work with designers who actually knew some programming.

Getting rid of precious pixels
Since many users were using small desktop monitors and KIBI Media would run in a web browser, we had to get rid of unnecessary pixels. We spent a lot of hours reducing padding, adjusting margins, and shortening copywriting while avoiding hurting usability. It was both fun and frustrating.


Result and impact

Out of curiosity I spoke with our contact at KIBI a few years later in 2017. He enthusiastically told me that KIBI Media continues to be a great success and is actively used by hospital staff in many Swedish county councils. He even shared a very positive quote from a chief physician he had spoken to.

“KIBI Media is the best app out there and is incredibly easy to use”.

– Chief physician in Sweden
Screenshot of KIBI Media
Editing a photo of an ear canal in KIBI Media.
Another screenshot of KIBI Media
Comparing photos in KIBI Media. I’m no doctor, but I think this is an eardrum.

How it made me feel

Hospital staff are dealing with huge amounts of stress on a daily basis and must use the software they are provided. If this software is well-designed, it can reduce a lot of stress and save both time and energy.

I take great pride pride in designing software like this. This time it felt exceptionally well since the end-users were hospital staff. Rickard and I probably made some of their everyday tasks a little easier. The pleasure was all ours.

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