Category: Uncategorized

Easy-to-understand pension forecast

Posted on by Carla

BLPK (Basellandschaftliche Pensionskasse) wanted to redesign their customer portal. The core of the new portal is a pension simulator that should show the users how much money they can expect to receive for their pension from the second pillar.

Responsibilities
Leading workshops
Defining flows
UX / UI Design
Usability testing

Client
BLPK

Year
Juli 2020

Challenge

How might we make a dry but important topic more engaging?

Complicated rules and exceptional cases make it almost impossible for laypersons to understand how they can optimize their pension funds. The subject of retirement provision is often postponed and most people deal with it too late.

Process

Understand the complicated to make it simple

To start the project, I conducted a workshop with the pension fund’s project team to understand which features should be available in the new portal. The intermediate status was then discussed in weekly remote meetings. The designs were tested with members of the pension fund using Figma prototypes.

Parallel to the redesign of the customer portal, BLPK worked with a branding agency on a new branding and a new website. I created the visual design of the customer portal based on the new brand guidelines.

Define what is desirable, viable and feasible

After the kick-off workshop, I created user stories. Some of the ideas from the workshop turned out to be too difficult to implement within a realistic budget.

Outcome

A playful approach to a complicated topic

The new portal has a colorful and unbureaucratic look. The information is disclosed gradually, to avoid overwhelming the user. Simulations allow the user to try out how different future scenarios might impact their pension.

The current state of your pension always on display

The new customer portal shows the current state of the users pension and a simplified pension forecast. Aditionally, the user can see saved pension simulations and create further scenarios.

Real-time pension simulation

In the pension simulator the user can try out different future scenarios. She can therefore understand how a change in salary or the decision to retire early might affect the amount of money that will be available. The result of the simulation is directly compared to the current pension forecast.

Remote financial advice for the modern bank

Posted on by Carla

The Covid-19 pandemic has changed how we interact with businesses. Talking to a relationship manager remotely has become a service that people expect. Migros Bank, therefore, decided to offer their customers the possibility to get financial advice via video call.

Responsibilities
Lead user journey workshops
UX / UI Design
Usability testing
Follow development

Client
Migros Bank

Year
Juli 2020

Challenge

Creating a seamless user experience in a remote setting

Migros Bank wanted to allow their customers and prospect customers to book video calls with their relationship managers through their website. While the call would be carried out by Skype for Business, Migros Bank wanted customers to have a branded experience. They commissioned ti&m AG to design and develop a branded user interface, which would be the access point to the video call for the customer.

Process

Being a small team allowed us to move quickly from design to development

The project to create a remote financial advice service had been in the backlog for a while. When the Covid-19 pandemic happened, the project gained importance and had to be implemented quickly. Our project team was very small which allowed us to move fast.

I led a user journey workshop with the client to anticipate possible painpoints in the future user journey

Outcome

A seamless user experience thanks to attention to detail

Creating a user interface to start a video call might not seem very complex. However, there are many possible dead ends, if the UI is not designed carefully. We had to consider things like access rights procedures for different browsers, video formats sent by Skype for Business and the design of confirmation emails.

The online consultation is now online.

Update Migros Bank has completed a major rebrand. The video consultation has been adapted to the brand by a different branding agency.

Help the user overcome technical challenges

One of the challenges was anticipating what settings customers might have on their computers. In order to be able to carry out the video consultation successfully, the user must ensure access to his camera and microphone.

Deal with technical constraints

Thanks to close cooperation with the developer, it was possible to understand in what form the data (e.g. video) was displayed by Skype for Business and to design the user interface accordingly.

Continuous improvement

Since it was important for the client to learn more about the performance of the remote consultation, we developed a feedback form.

Responsive design

While the assumption was that the video consultation would first and foremost be used on bigger screens, we designed and developed it fully responsive.

Simplifying electronic health records

Posted on by Carla

The staff of the Hôpital du Valais works with a large number of different software on a daily basis. For the nurses and physicians, the main touchpoint is the electronic medical record (EMR). The EMR-software was purchased from an external vendor but offered the possibility to create custom forms with a form-builder. In addition to that, it was possible to plug web applications into the software. In March 2018 I joined the IT department as their first designer to help design these applications.

Responsibilities
Research
Information Architecture
UI Design
Management of Design System

Client
Hôpital du Valais

Year
August 2018 – July 2019

Research

Understanding the problems before looking for a solution

So far there was no habit of field research at the hospital. Requirements for new software were usually defined in hour-long meetings between developers and user-representatives. This time luckily, we got permission to observe people at their workplace in addition to conducting interviews.

Findings

Software applications are designed for silos

Crucial patient information is not shared between different departments or professional groups.

Unstructured data makes it impossible to leverage information

Doctors have a habit of dictating or writing medical information in the form of long paragraphs, which makes it difficult to reuse specific parts of the data.

Patients are excluded from their medical records

Especially elderly patients are struggling with handling medical information as well as remembering doctors’ appointments.

A user journey map showing pain points a patient might experience when visiting the hospital.
A user journey map visualising inefficient steps in the workflow of a secretary.

Defining the scope

Understanding the difference between what users ask for and what they really need

Until this point, any staff member of the Hôpital du Valais could request the development of a new form. This process resulted in an unmanageable backlog and hundreds of forms each designed for only a small group of users. I mapped out all existing forms in order to discover which had overlapping functionalities that could be covered by one single web application.

Technological limitations and the lack of a product design process led to hundreds of forms.

Data standards

Getting more out of data thanks to the FHIR framework

The current forms oblige doctors and nurses to input the same data twice or even three times. At the same time the data is hardly ever re-used in different contexts, statistics or automated summaries.

We decided to work with FHIR because it would allow us to define relationships between different data points in the patients’ medical records. For example, if a transfusion reaction is documented on the transfusion form, it could be displayed automatically as a “Complication” on the problem list.

FHIR (Fast Healthcare Interoperability Resources) is a data standard for electronic health records.

Design system

Defining rules and interaction patterns to minimize cognitive load

Together with the developers, I decided to work with Google Material Design and Angular Material as a framework. Some of the reasons that supported this decision were that MD had been designed with desktop and touch use in mind, it’s very widely adopted and it would speed up the development process.

A quick-win which would potentially have a big impact on the productivity of the medical staff, was to standardize the way in which recuring information was displayed.

I created a layout with header, including page related tasks such as ‘print’ and ‘help’, and sidebar, hosting crucial patient information like ‘allergies’ and ‘reanimation status’.

The header contains recurring functionalities, like a help page and a modification history.
The sidebar contains the most important information about a patient and can be extended or closed depending on screen size.

The solution

A modern software rather than a collection of digitised forms

This project led to a pipeline of web applications, that will be developed and implemented gradually. The main improvements we achieved were:

Improvements

Fewer applications for more users

Thanks to filtering, search functions and better UI design there is no more need to have separate forms for each user group. Having different user groups use the same application reduces the need to double documentation and improves knowledge sharing among disciplines.

Interaction design standards to minimize cognitive burden

Allowing users to find information easily and always in the same place reduces frustration and onboarding time when changing jobs within the hospital.

Meaningful data connections

Reusing data in different contexts increases the value of a single data input and saves time.

Easy access to help

Allowing users to find information on how to use the applications cuts the need for IT support, which frees resources for further product development.

'Hospital stay' gives a high-level overview over the patients encounters with the hospital. The card-based design allows to add modules for specific departments if needed.
The 'problem list' shows all of the patients conditions and is shared across departments. Drag and drop allows to quickly change the category of a problem.
A chronological feed of notes about a patient, that can be filtered and searched.
A searchable table with all interventions a patient had during different stays at the hospital. Interventions can be connected to conditions in order to avoid documenting the same information twice. An underlying catalogue automates steps of the billing process.

Introducing apps to clinical workflows

Posted on by Carla

Until now doctors and nurses at the Hôpital du Valais have worked exclusively with desktop computers or laptops on trolleys. But recently it had been decided that mobile phones should be included in the workflow.

Responsibilities
Field Research
User Experience Design
Usability Testing

Client
Hôpital du Valais

Year
2018

Research

Understanding nurses’ workflows

I had the chance to spend a full week with nurses. Observing them performe daily tasks and having insightful chats during the coffee break, I learned a lot about the obstacles that make their challenging jobs even more difficult.

Insights

Nurses constantly switch between digital and non-digital tasks

If they lack the time or all computers are taken, they might store information temporarily on paper and transfer them to the electronic health record (EHR) when they have more time.

Hardware is not suitable for workflows

The closest thing to a mobile device that nurses have at their disposition are laptops on trolleys. Since those trolleys are not adapted for transporting medical materials nurses often find themselves dragging a caravan of different trolleys and additional monitoring machines into the patients’ room.

Workdays are organized by tasks rather than patients

Many tasks, like taking blood pressure and handing out medication, are completed for one patient after the other rather than completing all tasks for one patient and then moving to the next.

Nurses have created their own workarounds

The nurses bypass the lack of suitable technology by printing a table of all patients on the ward and taking notes on these sheets throughout the day.

Defining an implementation strategy

Are mobile phones just gadgets or can they improve workflows?

Since mobile devices were completely new in the hospital, it was important for us to start a pilot project from which we could learn as soon as possible. Therefore, we decided to develop separate applications tailored to specific workflows rather than a complete medical record. This would allow us to gradually release new applications and improve them over time.

To define use cases I explored the benefits of using a mobile phone over a computer.

Use case 01

Speed up blood transfusions through barcode scanning

While writing on small smartphone screens is not exactly efficient, mobile devices offer other interesting input methods such as taking photographs and scanning barcodes. The latter is especially useful when it comes to controlling identities.

As this is one of the key tasks in registering blood transfusions, we decided to design the first app for this workflow.

To add or open a transfusion the nurse has to scan bar the codes on the patient bracelet and blood product.

Improving blood transfusion safety

Posted on by Carla

Receiving a wrong blood transfusion can be life-threatening. Until recently the compatibility between a patient and a blood product had been controlled only manually. To reduce the probability of mistakes happening we designed and developed an additional digital compatibility control.

Responsibilities
Research
User Experience Design
UI Design
Usability Testing

Client
Hôpital du Valais

Year
2018

Field research

Following the journey of a blood product: from lab to patient

Designing hospital software is not only about the UI. It is crucial to understand all aspects of the workflows and answer questions such as: Are there always enough computers available? Is the connection good enough in the patient room? What other touchpoints does the user interact with while using the software?

Desk research

Understanding regulations

The process of blood transfusion is highly regulated and certain rules must be followed. To understand if there were gaps between best practices and the reality at the hospital we interviewed experts and conducted extensive desk research.

Pain points

The process is very time-consuming

With the current solution, two nurses are needed to control the compatibility between patient and blood product. There is no digital support, even though the required information exists in the system.

Use of paper increases the likelihood of errors

Once the blood product leaves the laboratory, the only information about which patient the product is intended for is a piece of paper attached to the blood bag. If an error occurs in the lab when attaching the card, there is a high risk that the error is not discovered before the transfusion.

Transfusion reactions are not documented sufficiently

The documentation of transfusion reactions often gets neglected because the required form is hard to find. This makes it hard to establish quality control.

The user journey map shows areas of high risks for patient safety and inefficient processes.

Technology

Connecting the right systems to allow information exchange

The laboratory technicians work with different software than the nurses. A card with the patient’s name attached to the blood product was the only information exchange between the two systems.

However, for the new application, a web service was created that would allow the lab software to send information directly to the electronic health record (EHR) used by the nurses.

Furthermore, the new form would allow the nurses to scan a patient’s bracelet with a scanner attached to the computer, rather than having to input the patient ID manually.

The solution

From registration to control of the blood product

When the form is opened it directly displays the patients’ blood type, past transfusions and reactions and a bold button invites the user to add a new blood transfusion.

Improvements

Consistent user interface

The form includes a header with main actions as well as a sidebar with crucial patient information.

A new one-person workflow thanks to a bar code scanner

A nurse can now scan the blood product and patient bracelet which triggers a control in the laboratory database. This replaces the control by a second person.

Control at the point of transfusion

The bar code of the patient bracelet and the blood product are compared to the laboratory database directly before transfusion. This means nurses no longer have to rely solely on a piece of paper attached to the blood product.

Simplified documentation of transfusion reaction

The new interface includes all necessary links to make it easier to properly document transfusion reactions.

The starting page shows past transfusions and adverse events.
The nurse is guided through a step by step process to control the compatibility between the patient and the blood product and register the transfusion.
The new application allows the nurse to easily send a report about the course of the transfusion.

Cookies

Posted on by Carla

This website uses cookies. We use cookies to personalize your user experience and to study how our website is being used. You consent to our cookies if you continue to use this website. Select the types of cookies that you accept.

Cookies are small text files that can be used by websites to make a user’s experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.