Hemoder

Hemoder is an app that helps to connect nearby hospitals to use one ROTEM® machine, a rapid differential diagnostics system.

This system can reduce unnecessary transfusions, re-operation and infection rates, hospital length of stay, total hospital costs, and mortality.

The Business Problem

After first validation and MVP development phase, it was necessary to redesign the app's aesthetics, fix usability problems, and fix bugs for its official launch and implementation in hospitals.

My role in the project

I was responsible for the visual design and user experience of the app. I worked along with a full-stack developer and a product owner.

The Approach

The first team working in the MVP tested the app in some hospitals as a demo. They gathered feedback, listed bugs, and they also got more information about the hospital workers who would use the app.

To start working on the new design, I structured this information in roles, tasks, and situations where the app would be used. I then translated this into goals and unique functionalities for each role.

Doctors

They would be the ones starting a "case process" in the app.

Their goal is to have a diagnostic on the patient as soon as possible.

Tasks

  • Create a case entering the patient's data in the app.
  • Send the blood sample to the hospital where the Rotem machine is located.
  • Check the results.
  • Ask for expert advice if necessary.
  • Input therapeutic indication and close the case.
  • Access structured data cases.

Their context is a fast-paced environment dealing with critical patients.

Operators

They would be the ones working physically with the Rotem machine.

Their goal is to process the blood sample as soon as possible.

Tasks

  • Receive the blood sample.
  • Access case data to read the protocol on how to process the blood sample and any additional information given by the doctor in charge.
  • Update the case's status.
  • Set up the camera device for capturing the results.
  • Be available for communications from the other participants in the case.

Their context is also a fast-paced environment, and they work on various cases and devices at the same time.

External specialist

They are the experts on interpreting the results from the Rotem machine. In some cases, the doctor in charge might need more information about the diagnostic and requires the expert's opinion.

Their goal is to interpret the study's values and case data to inform the results accurately.

Tasks

  • Access case data and indications from the doctor in charge.
  • Look at values from the Rotem machine.
  • Look at the recommended algorithm for this case.
  • Interpret the results.
  • Inform the result to the doctor in charge.

As a team, we mapped this information and decided to prioritize features that ensure communication and fluid interaction with the case at any moment.

My challenge was to present complex and technical information so that each profile could locate the data immediately, performing their tasks without error, and in the most efficient way.

The Process

We used the functioning app as a base to create the new version, so in this case, it wasn't necessary to develop full wireframes.

To help users in their fast-pace environment quickly identify the main areas, I redesigned the UI differentiating each part of the process with a unique color.


One of the things that presented more issues with the users in the MVP test was the location and naming of features. As a team, we worked on a card sorting exercise to work on these things. We regroup the elements by task, moment, and role.

As a result, I restructured the main navigation, keeping the key features each user will need accessing the app. I then, added a secondary tab menu grouping all case data to easy access. I also made some naming adjustments to the functions and made it easy to identify icons.

To achieve high readability with complex and technical information, I used a white background with different colors as a quick visual cue to identify values out of range, different protocols, and stages throughout the analysis.

I also designed a hierarchy with different heading levels, text, icons, and buttons to guide the user effectively through the information and actions necessary to them at that moment and removing any other information or element.

I designed the main screens to get feedback from my team. As I worked on Figma, we were able to iterate directly on the design file speeding up the design process.

While the developer started coding with the main flow, I completed the design.


From the design file as well, I made a high fidelity prototype to get more feedback. This prototype along with the comments from iteration, and the code snippet with CSS code, served as a hand-off file for the developer.

During the final stage, I also worked on the CSS and HTML code to adjust visual details in the final product.



The Results

Hemoder was installed in the first hospital, starting to be used immediately in real emergency cases achieving this way our goals. We also receive useful feedback for iteration that we could implement in the next update for future hospitals.

Measuring Success

Although we didn't have any data to compare with a previous stage, the app got great reviews. It was successfully received and implemented in hospitals. Thanks to the detail of diagnostics, the app became a learning tool for doctors.


Click too see the live prototype