Progress Web Design Case Study
To help therapists better manage their caseloads, the Progress App was created. It serves as a platform for managing their practice as well as communicating with their clients.
As my second project for the Google UX Design Certificate, I decided to make a website with the same concept to practice using Adobe XD.
Project Duration
June 2022 - July 2022
My Role
UX designer designing a client management app from conception to delivery
My Responsibitlities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and responsive design
The Problem
Busy therapists need more time to complete accurate progress notes and have organized case files
The Goal
Design an website that has an updated DSM 5 database that makes it easy for users to complete client documentation
Understanding the User
USER RESEARCH - PERSONAS - PROBLEM STATEMENTS - USER JOURNEY MAPS
User Research Summary
I conducted interviews, collected data from a survey, and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified that current client management apps had outdated DSM databases that led to inaccurate client files.
This user group challenged initial assumptions. Research also revealed that there was not much consistency amongst client management practices. Other user problems included communicating with clients outside of therapy time and personalizing notes and communications.
User Research Pain Points
Therapists want to spend more time in the present with their clients
Current platforms have outdated diagnosis databases that make it difficult to update client reports
Onboarding to new systems lacks support
Therapists want to add a personal touch to their communications with clients
Starting the Design
SITEMAP - PAPER & DIGITAL WIREFRAMES - LOW FIDELITY PROTOTYPE - USABILITY STUDIES
Sitemap
Trying FigJam for the first time, I excitedly created a sitemap.
My goal was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
Paper Wireframes
Next, I created paper wireframes to include all the essential features on the homepage.
Digital Wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing the DSM 5 placement on the home page was a key part of my strategy.
Low-Fidelity Prototype
The low-fidelity prototype connected the primary user flow of adding a diagnosis to a client and updating their file, so the prototype could be used in a usability study with users.
Usability Study Findings
1
Users were confused by the lack of hierarchy on the Search Results page
2
Users appreciated the color variation
3
Users saw consistency between screen sizes
Refining the Design
MOCKUPS - HIGH FIDELITY PROTOTYPE - ACCESSIBILITY
Mockups
Going Forward
TAKEAWAYS - NEXT STEPS
Takeaways
I learned that no matter what design tool you use, you can create designs that are useful for users. Figuring out how to best use Adobe XD was useful in developing my overall skills as a designer.
Next Steps
Conduct follow-up usability testing on the new website and ideate new features for therapists and their clients