The Healing Playroom
The Healing Playroom is a therapeutic playroom designed to create a safe, structured environment for children to engage in creative expression. In the playroom children learn self-control, emotional awareness, and problem solving skills while increasing confidence and self esteem.
Overview
Summary
TheHealingPlayroom.com provides parents of current and potential patients an opportunity to learn more about The Healing Playroom and schedule a consultation.
Business Requirements
Ensure that all users have the ability to learn about The Healing Playroom and its therapists.
Ensure that all users have the ability to schedule a free consultation.
Ensure that all users have access to The Healing Playroom's free resources.
Roles & Responsibilities
UX / UI Designer
Market research (competitive analysis)
User research (surveys, interviews)
Information architecture (personas, user stories, sitemap)
Prototyping (wireframes, mockups)
Testing (usability, accessibility)
The Problem
The Healing Playroom's website had several issues that needed to be addressed and content to be streamlined. Several issues the website was facing included but were not limited to:
Unaccessible and expired information listed
Overcrowded top navigation bar
Inconsistent branding and poor visual experience
Navigation Bar
The top navigation bar was crowded with options, half of which didn't accurately link to another page.
UI Overload
Throughout the website, there was no consistency with fonts or the brand's color palette.
The Solution
TheHealingPlayroom.com was redesigned to streamline the website's information architecture and bring a fresh perspective with an inviting experience. Here, new and existing patients can learn more and schedule appointments.
Process
Research & Discovery
Competitive Analysis
Play Therapy is a form of counseling I was relatively unfamiliar with before this project so I looked to other practices to gather information and gain inspiration. I conducted a full SWOT analysis of three leading Play Therapy centers across the USA to learn more about this unique modality. Below are highlights of what I discovered.
Center4PlayTherapy
Pro: There are several easily noticeable buttons for potential clients to book a free consultation, the top and bottom nav bars are laid out clearly, and there is accessible information explaining how play therapy works.
Con: The home page is long and filled with information that could be organized on another tab.
Children's Play Therapy
Pro: This entire website is short and sweet making it easy for new users to navigate and quickly find the information they are looking for without feeling overwhelmed.
Con: Hard to find a con here, but perhaps the branding could be a bit more playful as it currently feels mature for play therapy compared to other comparable sites.
Theraplay
Pro: Prominent button to request a free discovery call, welcoming and calming color scheme, and photos of the play area show potential clients what they can expect during their appointments.
Con: The background pattern behind text can make it difficult to read and not accessible for some.
User Surveys
The survey, with 20 respondents, was completed by participants who are currently raising young children and are from varying socio-economic backgrounds, occupations, gender, and age via Google forms and Survey Swap. Here’s what I learned:
User Interviews
I conducted user interviews with 5 participants from my survey that were in the targeted audience demographic (who have young children) and reported interest in booking a consultation. Here are the key takeaways:
Parents felt overwhelmed by the amount of information currently displayed on The Healing Playroom's website.
Parents want the ability to clearly see the different Healing Playroom locations and which therapists work at which offices.
Parents want the ability to learn about how Play Therapy works before booking a consultation.
Personas
I developed three personas to showcase the needs of different parents and why they would consider Play Therapy for their children.
Information Architecture
High Priority User Stories
As a parent, I want the ability to learn about Play Therapy before booking a consultation.
As a parent, I want the ability to learn about each therapist at The Healing Playroom.
As a parent, I want the ability to contact The Healing Playroom.
As a parent, I want the ability to book a consultation.
User Flows
Site Map
User Journey
Paper Prototyping
After a few rounds of sketching, here are the strongest paper prototypes.
Wireframes
My paper prototypes were then translated into the wireframes below. Here are the key highlights:
On the "Our Team" page, therapists were organized into the office where they are based
A contact form to stay up to date with newsletters was added to the bottom of each screen
After speaking with the team at Healing Playroom, we decided to consolidate even further and remove the "Our Services" page
Prototyping
1st Iteration Prototype
The wireframes were then translated into the 1st iteration prototype below. Here are the key highlights:
FAQs were added to the "Contact Us" page in order to help new clients with basic inqueries
A "Schedule Free Consultation" button was added to the top right corner of each screen since the main purpose of this website is to help new clients book their first appointment
Brand & Visual Development
UI Components
While The Healing Playroom team requested we keep their original logo and color scheme for the rebranding of their website, I was able to streamline and update the typography used.
1st Iteration Branding
Landing Page
For the landing page, I wanted to create a hero banner that communicated the mission of The Healing Playroom: to provide high-quality, developmentally appropriate counseling for children and families. My initial vision was to use the original color scheme plus additional complimentary colors to create an image that is both welcoming and playful.
Option 1
Option 2
2nd Iteration Branding
Landing Page
Ultimately, when I met with the team to check in on my progress, we made the decision to pass on both designs. After a fruitful discussion, I learned the team was looking for a hero banner that was a little more sophisticated and calming than what I had originally designed.
Prototyping
2nd Iteration Prototype
The 1st iteration mockups were then translated into the 2nd iteration prototypes below which incorporated content and branding elements like color scheme, font, logo.
Usability Testing
I completed several rounds of usability testing with five different people. Here are the tasks they were asked to complete:
Schedule a free consultation
Find a play therapist at the office closest to you
Locate and read the FAQ's
Below is a breakdown of my main findings.
Accessibility
Updated to button color for increased visibility
Enlarged banner Image for increased visibility
Branding Improvement
To increase visual appeal, I incorporated part of the logo in a column with the section title, increased the weight of the font, and circled / underlined a few key words
Branding Improvement & User Based Feedback Improvement
In another effort to increase visual appeal and attract more users to sign up for The Healing Playroom's newsletter, I incorporated a photo representing the playful nature of this therapy's practice, and scrolling text instructing users to "Subscribe to our newsletter"
User Based Feedback Improvement
Removed preview text and replaced "Read More" button with an expandable bio for greater eye relief
Added divider line to communicate the start of a different office location and its therapist
User Based Feedback Improvement & Accessibility
Changed "Blog Posts" title to "Check out our resources" to prevent confusion on what resources The Healing Playroom's offers
Put blog posts on a line of their own rather than in two columns for greater visibility and to allow users to focus on one post at a time
Accessibility
Changed top nav bar to white for increased visibility
Branding Improvement
Updated the layout of the Contact Us form to be more visually cohesive across pages
Bonus (not pictured): when users fill out a section of the Contact Us form, that section will turn The Healing Playroom's brand blue!
Branding Improvement & User Based Feedback Improvement
Added background of FAQ section to create a cohesive feel across pages and capivate users attention
Put FAQ's into accordion format with dividing lines in between for greater organization and eye relief
User Based Feedback Improvement
Removed "Questions?" section from the bottom of the screen as it was redundant and "Contact Us" is prominent on the top nav bar of every screen
Added the locations of each office to the footer so users can easily access this important information
Final Prototype
Final Thoughts
Key Takeaways
If I had additional times and resources, I would...
Gather testimonies from families who have benefited from The Healing Playroom's practice for potential users to read
Create mockups for site on mobile devices