Web App for the psychological therapist #works

So this is my recent works at MindLife UK. But before that if you’re googling MindLife UK, yes the website is looking out of date so much, they said it so too. It’s like 15 years ago has not been updated yet. We are working on that!

Note
All product designs in this company are using a premium theme as the design system. So this company has bought the premium theme before I’m joining. It’s because we are very small I know, so that on the UI element design, I only contribute to the styles element such as colors and typography. And I put the element by recreated it manually on Figma. Not using component/symbols or copy-paste the elements as like any other normal use on design system interface. There are no design files on the theme as well. The developers already have the code from its theme, though .

Before user research

Goals

So above is the accordion element for users (the therapist) to choose one or more factor categories to input their feedback about the therapy with their patient. The therapist can pick some obstacles on each factor category that their patients may have and or they can input it type customization obstacles manually. And it can be from the therapist factor itself. In this case, I show on the image from the therapist factor.

Research and Problems Found

After talked to the users, we got really precious insights that crucial on therapist works. So here’s the feedback from users:

  • The therapist is busy. This can be added as a persona data….in mind. Ha!…no need to create the persona doc that looks like CV.

    However, if you work on a bigger team, it's Ok to make persona documentation, but maybe the fake photo is not necessary 🤷‍♀️.

  • Because they are busy, so that when they input obstacles manually, again —while some obstacles from the previous/last session are still happening in the current session— it’s painful for them. They need the access to get the obstacles data from previous session without need to input it again one by one manually.

    You know, the sessions in the therapy are more than once. Let say, a patient consults with a therapist every week until finished along 3 months or even a year.

Solution

After I discussed with stakeholder so I made this design:

Roses are red, Clean and modern UI is white.
But that’s not really good for accordion hierarchy and for accessibility especially for the older therapists. So I changed the background colors as well.

After— I added ‘Add from last session’ button
This modal/pop up will show up after click ‘Add from the last session’

This ✅ icon above to make the therapist skim it faster and to avoid misreading. They are busy, right?

Before I made this modal design page, I told my stakeholder that we might need to separate between ‘Last session obstacles’ and ‘Obstacles that have not selected on the last session’. Otherwise, if we only added obstacles from the last sessions by clicking the button then automatically added and without showing this modal, it can be confusing. See the design below. The therapist might be don’t remember easily which obstacles from the last session.

Here are the looks when the therapist already chose the obstacles. Imagine if there is no modal before this or if this page appears without the modal first.

Which one obstacle from the last session that I chose? (if we don’t show the modal first)

We did the test again to the users after have fixed the design and everything is fine….so far.

To get more information about this app, visit:
https://www.personalisedmentalhealth.com/