To content

Alexander Skogberg

UX, Web & Writing

Doctor using a laptop computer

Multimedia management app for hospital staff

In 2013, KIBI needed design help merging their apps for multimedia management for hospital staff. Together with a graphic designer and the KIBI development team, I conducted user research, drew wireframes and performed usability testing for the app KIBI Media.

Background

KIBI is a Swedish software developer focusing on solutions for medical documentation and diagnostics for health care providers. Their e-health solutions are used in over 100 hospitals and care centers in northern Europe.

Goal

KIBI wanted to merge two of their apps used for handling and editing documents and photos by hospital staff. Apart from greatly improving the general usability and adding new sought after features, a new graphic design was also wanted for the final app named KIBI Media.

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

Design process

I worked with my good friend, coworker and graphic designer Rickard Linder for the entire project. This is how we put together the design process.

Bechmarking photo editing apps

Immediately, Rickard and I realised we needed to educate ourselves more on popular photo editing apps at that time. Based on our benchmarking, we made educated guesses on likely must-have features before making whiteboard sketches of the layout and discussing ideas for the graphic design.

Performing user research

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

We interviewed the hospital photographer and observed how he carried out his work. We learnt what he wanted and needed for the app.

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

Drawing and usability testing wireframes

Based on our analysis of the photo editing apps, gathered information from KIBI and insights from our day with the hospital photographer, we got to work. I drew wireframes of the entire app. Even the smallest features were all drawn on paper.

These features included:

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

Once drawn, I usability tested the paper prototype with five people with different experiences in photo editing, from beginners to experienced enthusiasts. I didn’t have much time, but Rickard and I managed to find various photography enthusiast among or through our coworkers at HiQ.

We used feedback from the usability testing for improving the wireframes before creating more high fidelity versions with applied graphic design.

The feedback was great! Based on our initial benchmarking and research with the hospital photographer, we had gotten most of the design right from the start. Only some minor details needed to be adjusted.

Paper wireframe of KIBI media
A paper wireframe used for usability testing. With the loose pieces of paper, I could simulate some interactivity.
Another paper wireframe of KIBI Media
Another paper wireframe used for testing. This sketch shows how comparing several images would work.

Graphic design and working with the KIBI developers

Once I had finished the usability testing and improved the wireframes, Rickard and I created the graphic design for the app. Rickard took the lead, but kept me in the loop and included my feedback and ideas.

We then handed over the high fidelity wireframes and graphic design guidelines to the KIBI development team. During the rest of the development phase we continuously met and worked with them for clearing up details and avoiding misunderstandings. They later told us they were impressed working with designers who actually knew some programming. I was flattered.

Solving the challenge: Finding space for pixels
When released, KIBI Media would be run in a web browser. This combined with the fact that many KIBI Media users were using small low resolution desktop monitors forced us to save as many pixels as possible. Rickard and I spent lots of hours reducing padding, adjusting margins and writing shorter UX copy while avoiding to hurt usability.

Result and feedback

In 2017, I spoke with our contact at KIBI and he enthusiastically told us that KIBI Media continues to be a total success and is used by hospital staff in many Swedish county councils.

According to KIBI, a chief physician was cited saying “KIBI Media is the best app out there and is incredibly easy to use”.

More information about KIBI can be found at kibi-group.com/medical-imaging/#kibimedia.

Screenshot of KIBI Media
Editing a photo of an ear canal using KIBI Media.
Another screenshot of KIBI Media
I’m no doctor, but I think these are photos of an eardrum.

How it made me feel

I enjoy and take pride in designing solutions that save people time and make everyday tasks easier. This time it felt especially well since end users were hospital staff.

Hospital staff are dealing with large amounts of stress on a daily basis and are forced to use whatever software their employers provide them with. If this software is well-designed, it will save them time and energy they can put on providing even better health care.

It makes me happy KIBI Media is still being used today and that its users think it’s great.

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