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 did user research, drew wireframes, performed 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 constructed the design process.

Analysing photo editing apps

Rickard and I began by analysing different photo editing apps. Based on this research 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 at the time 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.

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.

One of the paper wireframes I made for discussions with Rickard and usability testing with users. With the loose pieces of paper we could simulate som 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 reduced padding, removed unnecessary margins and wrote shorter copy trying not to negatively affecting the app's usability. We took inspiration from Google Chrome, which at its release was a minimalistic web browser compared to its competitors.

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 makes everyday tasks easier and saves 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