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 needed design expertise when merging their apps for multimedia management for hospital staff. With assistance from the KIBI developers, graphic designer Rickard Linder and I took care of user research and user interface design for the final app KIBI Media.

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.

Goal

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 feedback

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”.

– A chief physician and pleased KIBI Media user
Screenshot of KIBI Media
Editing a photo of an ear canal using 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