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 was joining. Hence, on the UI element design, I only contributed to the styles element such as colors and typography. And I had to put the elements by recreated it manually on Figma. Not using component/symbols or copy-paste/import the elements as like any other normal use on the design system interface. There were no design files available on the theme as well at that time. The developers already have the code from its theme, though .

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 they can input it type customization obstacles manually. And it can be from the therapist factor itself. In this case, I show the image from the therapist factor.

Research and Problems Found

After talking to the users, we got really precious insights that are crucial to therapist’s work. So here’s the feedback from users:

• The therapist is busy. This can be added as persona data….in mind. Ha!… No need to create the persona doc that looks like a 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, 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 access to get the obstacles data from the previous session without the 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 it with stakeholders so I made this design:

Clean and modern UI commonly uses white.
But that’s not really good for the accordion hierarchy and for accessibility here for the older therapists. So I changed the background colours as well.

The prototype

This ✅ icon above is 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 stakeholders that we might need to separate between ‘Last session obstacles’ and ‘Obstacles that have not been selected in the last session.’ Otherwise, if we only added obstacles from the last sessions by clicking the button and then automatically added and without showing this modal, it can be confusing. See the design below. The therapist might not remember easily which obstacles from the last session.

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

Which obstacle from the last session that I choose? (If we don’t show the modal first)

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

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

< Back to Portfolio