Case Study: Online Therapy Responsive Website
Therapy Project: A non-profit organization with free therapy programs.
Overview
Product: Therapy Project is a non-profit organization that offers free online therapy and therapy programs. The Therapy Project Responsive Website is a complementary website to the “Time To Relax” App designed for Google UX Design Professional Certificate. See the case study here.
Guide: Google UX Design Professional Certificate
Duration: 7 weeks (for the app and the website)
My Role: UX Research, UX Design, UI Design
Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Goal: The main goal for the design was to create a complementary responsive website for the relaxation and self-care app “Time To Relax”
Starting the design
Sitemap
I started by creating a sitemap to guide the organizational structure of each screen’s design and to ensure a cohesive and consistent experience across devices.
Paper Wireframes
I took the time to draft iterations of each screen on paper, then I used the ideas I liked the most and created the final version of my paper wireframes.
Digital Wireframes
I created the digital wireframes using Figma and then using the completed set of my digital wireframes, I created a low-fidelity prototype. You can check the low-fidelity prototype for desktop and for mobile.
Usability Study
I conducted a usability study to determine whether the users were able to complete the main user flow in the low-fidelity prototype of the product.
Research insights
1. Users want the search bar to be added to Blog page instead of the top on all pages.
2. Users want the donation option to be referred in one way to avoid confusion.
3. Users want to have a newsletter subscription form.
Refining the design
From all the insights collected from the usability study, I corrected and improved my digital wireframes. Also, I worked on my mockups for each screen. After laying out all the screen mockups I connected them, added gestures and motions to create a high-fidelity prototype. You can check the high-fidelity prototype for desktop and for mobile.
High-fidelity screens
Responsive Design
The designs for screen size variation included mobile, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Accessibility Considerations
1. Clear labels for interactive elements that can be read by screen readers
2. Used accessible color contrast confirmed by WebAIM.
Thank you!
Thank you for your time reviewing my work on the Therapy Project website! If you’d like to see more or get in touch, my contact information is provided here.