To content

Alexander Skogberg

UX, Web & Writing

Screenshot of the KIBI media app

Multimedia management app for hospital staff

In 2013, KIBI needed help with design when merging two apps for multimedia management for hospital staff. Together with a Graphic Designer I performed user research, drew wireframes, conducted usability testing and created the graphic design of the successful app known as 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 into one solution. Apart from greatly improving the general usability, new graphic design was also wanted for the 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 and Graphic Designer Rickard Linder for the entire project. This is how we put together our design process.

Analysing photo editing apps

Immediately, Rickard and I realised we needed to educate ourselves more on popular photo editing apps at that time. Based on this benchmarking we then made educated guesses on the app’s likely must-have features before making some whiteboard sketches of the layout and discussing the app’s 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 observed how the hospital photographer carried out his work and learnt what he wanted and needed in the app we were designing.

The different pieces of software he was using took up a lot of his time. Rickard and I felt confident in creating something much better for him and his colleagues in the business with this insight.

Drawing and usability testing wireframes

Based on our analysis of the photo editing apps, previously 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 the paper prototype with five people with different experiences in photo editing. From beginners to experienced enthusiasts. The feedback we got was then used for improving the wireframes before creating more high fidelity versions with applied graphic design.

Based on our previous benchmarking and research done with the hospital photographer, we had gotten most of the interaction design right from the start.

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 had to spend a lot of time reduced padding, removing unnecessary margins and writing shorter copy while not trying to negatively affecting 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 this felt especially well since the end users were hospital staff, a group subjected to great stress on a daily basis.

This group of workers 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 and even saving lives.

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