To content

Alexander Skogberg

UX, Web & Writing

Screenshot of the KIBI media app

Multimedia management app for hospital staff

In 2013, KIBI needed design help when 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 successful 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 that was going to be 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 the graphic design (in borader terms).

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 in the app we were designing.

The photographer used several pieces of software throughout his day. Rickard and I noticed how much of his time was wasted switching between software like this.

We felt confident in creating something much better for him and his colleagues in the business with this valuable insight.

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 photographer, 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 photos
  • Drawing overlays on photos
  • Adjusting colors and contrast of photos

I then usability tested this paper prototype with five people with different experiences in photo editing, from beginners to experienced enthusiasts. We used the feedback for improving the wireframes before creating more high fidelity versions with applied graphic design.

The user 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 minor details needed to be adjusted.

One of the paper wireframes I made for the usability testing sessions. With the movable pieces of paper we could simulate some interactivity.

Graphic design and working with the KIBI development team

Once the usability testing was done and the wireframes were improved, Rickard and I created the graphic design for the app. Rickard took the lead here, 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.

Solving the challenge: Finding space for pixels
When first 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 much space as possible. Rickard and I spent lots of hours reducing padding, adjusting margins and writing shorter UX copy while avoiding to hurt usability.

Result

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 the finished KIBI Media app.
I’m no doctor, but I think these are multiple photos of an eardrum.

How it made me feel

I’ve always enjoyed and taken great pride in designing solutions that make everyday tasks easier and save people time. This time it felt especially well since the 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 likely save them time and energy for providing better health care.

It makes me happy KIBI Media is still being used today and that its users are more than happy with it.

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