Redesign A Digital Therapeutic Product
End-to-End product design · Healthcare
OVERVIEW
👩🏻💻 My Role
Designed an end-to-end app and successfully launched it
Designed an end-to-end app and successfully launched it
👥 Work With
3 Developers, 2 Medical Specialists, 2 Researchers and 2 PM
3 Developers, 2 Medical Specialists, 2 Researchers and 2 PM
🛠 Tools
Figma, Sketch and Adobe Illustrator
Figma, Sketch and Adobe Illustrator
RESULTS
Exciting Results!
In September, we launched the app:
10,000+
users in 2 months
users in 2 months
92%
positive rating
positive rating
Problem Analysis
The beginning of everything is her story:
During my Thoven internship, I met this PD patient who traveled weekly to another city for treatment, facing physical and financial challenges. Despite medical advice, she struggled to continue.
This is a common problem faced by many patients with panic disorder. To alleviate this issue, Thoven developed a digital therapeutic app. However, it still has many problems. So, our task is to optimize the existing product and thereby enhance the value of the current treatment method.
"...Yes, I won't be able to come next week. The journey takes 3 hours, but I have to work over the weekend... Every trip to see the doctor is exhausting. Honestly, I'm thinking of giving up on the treatment... I know this condition requires ongoing treatment, but..."
During my Thoven internship, I met this PD patient who traveled weekly to another city for treatment, facing physical and financial challenges. Despite medical advice, she struggled to continue.
This is a common problem faced by many patients with panic disorder. To alleviate this issue, Thoven developed a digital therapeutic app. However, it still has many problems. So, our task is to optimize the existing product and thereby enhance the value of the current treatment method.
GOALS
Enhance the existing app to accurately convey medical information and improve the efficacy of existing therapy
After discussions with medical experts, we set 3 specific goals:
- Based on the existing treatment process, establish a complete digital therapy workflow
- Optimize the product prototype, and establish a viable visual system
- Design product interaction logic to enhance user experience
What I have and what I should do
🗒
The app was divided into 4 parts based on the treatment offered by the healthcare provider, and I was primarily responsible for the first 2 parts: Cure and In vivo exposure. After knowing the assignment, the first thing I did was to sort out my tasks and the resource we have:
According to the approximate time each task will cost and the impact the task will have on future work, I prioritized these tasks:
1. Do usability testings
2. Review the page structure
3. Build user flow
4. Create a user-friendly process
With these in mind, I started to analyze the project's main challenges.
CHALLENGES
Design under limited conditions
As a product development team in a startup, the limited resources, huge workload and time constraints for product development brought us numerous challenges and conflicts:
Designing “without” user research
Limited budget and user willingness prevent us from researching typical users.
Simplify complex information for laypeople
The medical information in this app may be difficult for patients to understand.
Balance rigorous treatment with user-friendly flow
The product's development demanded adherence to medical protocols, potentially conflicting with user experience strategies. Thus, the design needed to balance medical and user experience needs.
As the designer, I needed to find balances between these conflicts and using various methods to overcome them.
Homepage: Review and Redesign
RESEARCH
Gathering valuable insights through user research and expert reviews
Define Users: Based on typical users
According to the desk research, the typical users of our product should have these characteristics:
Since typical users were unavailable for the reasons mentioned above, the preliminary study had to rely on atypical users. The “atypical users” here means the population meets every characteristic mentioned above except the health condition.
Based on these criteria, I recruited 4 users.
Based on these criteria, I recruited 4 users.
Atypical Users’ Information
User Testing
As a medical product, we had clear expectations about goals and behaviors of users:
![]()
Based on these, I designed relevant testing questions. Based on participators feedback, I generated following insights:
- What works:
![]()
![]()
Based on these, I designed relevant testing questions. Based on participators feedback, I generated following insights:
- What works:
- What doesn’t work:
User Testing Details
Questions:
Results:
Interviewees were asked to evaluate the homepage according to the questions above and scored according to their subjective feelings.
After the evaluation, I had some short interviews with them to get specific feedback.
Expert Review: Dual validation
After collecting users' feedback, I reviewed these ideas and the page with medical experts and our team members to get more insights. Ultimately, we decided what to redesign for the homepage.
REDESIGN
Task 1: Define a new visual language
After discussions with interviewees and managers, the primary concern was the page style. The initial version's main color did not match the product's positioning, and some components lacked readability. This could diminish user trust and raise accessibility barriers. Therefore, I iterated on the visual design of the homepage:
Visual Design Details
Define the style
To understand the style our target population like, I asked 4 interviewees to share their favorite products, then I created a board according to their answers:
Obviously, these products all have a professional and simple style. And these 2 characteristics come from their neutral colors and minimal stylings. Therefore, I extracted these 2 features and used them in the design.
Initial Version
![]()
Inappropriate style and contrast
![]()
Inappropriate style and contrast
2nd Version
![]()
Natural color & Improved accessibility
![]()
Natural color & Improved accessibility
Final Version
![]()
Ultimately, I chose light gray as the background color, #397F69 and #706B67 as the accent colors to give the page a professional and gentle style.
Soft, Professional & Minimal
Ultimately, I chose light gray as the background color, #397F69 and #706B67 as the accent colors to give the page a professional and gentle style.
To facilitate future iterations, I created style guides:
REDESIGN
Task 2: Optimize the structure of the page
Functional Structure
Users first notice the structure (the distribution of functionalities) when scanning the page. A reasonable page structure can help users gain effective information quickly and guide users to dive deep into the product. In this PD treatment product, the homepage has 3 core functionalities: task reminder, progress reminder, and relaxation
Before
Duplication and absence of functional areas
After
Unified function areas to ensure users have quick access to key information1. Consolidate functionalities
Integrate progress information in the form of cards to ensure users can easily find relevant content.
2. Add the Relaxation section
Provide a Relaxation function in the form of cards. Users can select the exercise by sliding cards shown in that area.
Information Architecture
The information architecture of this medical product should help users receive important information quickly and facilitate the core tasks of their treatment. In addition, it must have a concise information architecture and reduce complex and irrelevant content.
Before
Unclear information hierarchy and irrelevant information
1. Overwhelming
Having a bunch of secondary information on top of the primary information (Today's task) distracts the user from the main content.
2. Irrelevant information
Details in Part 2 won't help users finish core tasks and shouldn't take up too much space on the page.
After
Concise information presentation and a focused navigation
1. Consolidate information
Highlight the task information on the page and hide the secondary content (but users can still access it if they dig deeper).
2. Motivation information
Show completion information -namely, achievement- to users to encourage them to stick to the treatment.
In Vivo Exposure: Flow and Experience
USER FLOW
How to enhance the accessibility of the core flow?
The Iteration of the core flow
In vivo exposure is a critical procedure for PD treatment. It has a complex process involving multiple steps and several mandatory medical requirements:
![]()
However, the core flow is crucial to a user's treatment; thus, it must be designed for easy access.
![]()
I analyzed the core flow of the initial version and identified 2 major issues:
Therefore, I made the 1st iteration. In this version, I provided a direct path to the core process and removed the concept of "tasks". This simplifies the structure and reduces the learning curve for users:
![]()
However, there was a problem with the existing information architecture:
![]()
Thus, we optimized the information architecture and created the final version:
![]()
In this version, some pages were consolidated to ensure that the core flow could be reached with minimum interactions. Besides, users were provided with multiple paths which could facilitate them to do core tasks.
However, the core flow is crucial to a user's treatment; thus, it must be designed for easy access.
Initial Version
I analyzed the core flow of the initial version and identified 2 major issues:- The core flow was buried deep within, which made it hard for uers to reach the core information and features
- The 3 concepts: Task, Plan, and Scenario, added complexity, potentially steepening the user's learning curve
Therefore, I made the 1st iteration. In this version, I provided a direct path to the core process and removed the concept of "tasks". This simplifies the structure and reduces the learning curve for users:
1st Iteration
However, there was a problem with the existing information architecture:
Thus, we optimized the information architecture and created the final version:
Final Version
In this version, some pages were consolidated to ensure that the core flow could be reached with minimum interactions. Besides, users were provided with multiple paths which could facilitate them to do core tasks.
USER EXPERIENCE
Designed a user-friendly multistep-task process
Due to medical requirements, users face multiple extra steps during core tasks, leading them through a multitasking process:
![]()
These extra steps inevitably distract users from the original task and may keep users from adhering to treatment. To address this challenge, the design strategies I propose are:
These extra steps inevitably distract users from the original task and may keep users from adhering to treatment. To address this challenge, the design strategies I propose are:
- Minimize distractions, allowing users to focus on the primary task.
- Assist users in making decisions more conveniently.
- Ensure users have control and autonomy.
- Provide users with easily accessible assistance
Minimize distractions: Modal views
To keep users from becoming overwhelmed by the additional tasks, I used modal views to display the information clearly. Besides, they also provided other values:
![]()
- Divider
Divide complex tasks into smaller tasks to encourage users to complete them.
![]()
- Reminder
Modal views can give users a strong reminder to make sure they strictly follow the medical advice.
Modal views can give users a strong reminder to make sure they strictly follow the medical advice.
These reminders popped up before critical treatment steps to remind users to follow instructions
- Divider
Divide complex tasks into smaller tasks to encourage users to complete them.
These pop-ups divide a large task with many steps into small, simple tasks.
Usually, there is only one task in one modal window
Usually, there is only one task in one modal window
Making decisions: Guidance elements
Nielsen’s 10 usability heuristics: #6 Recognition Rather than Recall
When users establish exercise plans, they need to input goals, timeframes, and procedural steps. This can be somewhat tedious. Hence, within the boundaries of medical guidelines, we provided indicators, references and pre-filled contents to ease the burden on users.
- Indicators
- References
- Pre-filling Contents
User Control and Freedom: Exit buttons
In this complex workflow, users may make some mistakes or slips, and they need an "exit" to leave the unwanted action without going through an extended process.
The Exit button in the upper right corner ensures users can exit the window
Through interviews with specialists and managers, I understood that for some pop-up windows, single or multiple occurrences would not influence the efficacy of the treatment. Thus I designed another "exit“ for these windows: Users can click on the checkbox to stop the pop-up.
![]()
This design can help users reduce steps for the next usage
Easily accessible assistance: Help and documentation
Due to treatment requirements, medical words on the page are indispensable. To help users better understand the meaning of these words, I added a "help" section to the page.
In this section, users can browse the resources in it or search for the answer
For future iteration: Feedback pages
Since the lack of typical users' opinions in the development stage, I designed a page to collect real users' feedback. This page and buried points will work together to help the team iterate this product using more accurate data.
![]()
Design specifications
In addition to design work, I edited a brief design specification for UI designers and developers through Figma. In the document, I highlighted all the functional sections, listed all their components and elements, explained how these elements work under different situations, designed flows to determine elements' statuses, etc.
Reflection
This is my second project in the real world. Unlike projects I did in university before, I needed to solve real problems under many constraints and limited resources. Besides, I needed to deal with recurring difficulties and unexpected things. In this process, I learned how to use different methods to solve issues and make trade-offs between different needs. I also learned a lot from my team members and the product manager:
Develop big picture thinking
At first…
In the early stage of the project, one of my biggest problems was I always spent a lot of time tangling in some details, which made me exhausted and delayed my progress.
Then…
I learned from my product manager that before doing the project, it is important to classify all the tasks according to their priorities and build the product according to the "framework - content - interaction - details" logic.
And…
These methods helped me a lot. In later projects, I used these methods and controlled the design process well.
The key is communication, not a beautiful diagram
At first…
As a design student, I was used to utilizing beautiful but complex diagrams to express design ideas. Sometimes I cared more about the visual design instead of the communication design. This made developers sometimes couldn't understand my concepts.
Then…
I learned to abandon meaningless decorations and design concise diagrams to communicate with people.
And…
I have stuck to this idea in teamwork since then, and it has helped me improve communication efficiency with my team members.
Because the master's program started in Sep 2022, I just participated in the first half of the project. But my product manager and team members all expressed positive feedback on my work:
BACK TO TOP