UI/UX Project
CCBH
The Challengue
Redesign company’s website to create a digital space that fosters trust and promotes healing.
A user-friendly design is critical for a mental health practice, as it can significantly influence a person’s initial impression and their decision to seek help.
A user-friendly design is critical for a mental health practice, as it can significantly influence a person’s initial impression and their decision to seek help.
Objectives & Goals
Update institution’ website to provide complete information on various health disorders through a gentle, blog-style structure.
Increase new patients appointments by 20% in the following the website design release after six months.
How We Did It?
Understand
Feel
Talk
Design
Business Challengues
Digital presence that effectively conveys their expertise and compassion.
Attracts new clients and simplifies administrative processes.
Target Audience
Individuals, couples, and families seeking mental health support. No age restriction.
Research
We conducted a qualitative research targeting similar institutions and built three different user personas (child - adolescent - adult).
Findings
User Needs
Access clear information (services and patient forms).
Understand the team-based approach.
Easily find therapist specializations.
Feels non-intimidated and supported.
Design Process Link
Clear, Accessible Navigation and Information Architecture
A Calming, Professional Color Palette and Typography
Visible and Gentle Calls to Action (CTAs)
User Persona
"Leo"
Child
Profile
9 years old
Divorced Parents
4th Grade
Emotional Trauma
Needs
To feel safe and for the "sad feeling" in his chest to go away.
Stability and a space where he doesn't feel like he has to choose sides.
To understand that the divorce is not his fault.
Paint Points
Feels guilty if he has a good time with one parent, as if he's betraying the other.
Doesn't understand the adult reasons for the split and the unpredictability of his schedule and parents' moods creates constant anxiety.
Trauma-Related Symptoms
Social Withdrawal.
Irritability and angry outbursts.
User Persona
"Chloe"
Adolescent
Profile
16 years old
Model Student
11th Grade
Depressive Disorder
Needs
To feel genuine happiness again, not just the satisfaction of another A on a report card.
To be seen and accepted for who she is, not just for her achievements.
A safe, non-judgmental space to express her feelings and fears.
Pain Points
Her feelings are consistently dismissed or minimized by her parents.
Maintaining the facade of being "fine" while battling internal turmoil is mentally and physically draining.
Depressive Symptoms
Anhedonia (Loss of Interest or Pleasure).
Persistent Feelings of Worthlessness.
User Persona
"Alex"
Adult
Profile
28 years old
Single
Carpenter
Anxiety Disorder
Needs
To secure a stable, full-time job that provides a consistent income and reduces financial worry.
To feel comfortable and confident in social settings without overanalyzing every interaction.
Practical tools to manage their anxiety and stop catastrophic thinking.
Pain Points
Anxiety makes networking and job interviews terrifying, which hinders their ability to find stable work.
Overthinks every decision, from big career choices to what to say in a text message, often resulting in inaction.
Anxiety Symptoms
Persistent and Excessive Worry.
Avoidance Behavior.
General Workflow
Sitemap Structure
Workflows
Scenario 1
User wants to know more about Anxiety Disorders and seek help by booking an appointment.
Scenario 2
User want to know more about the services offered and request an appointment.
Typography
Nunito
Sans-serif
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Example
Name
Size
Start Your Healing
Title
72px
Start Your Healing
Heading
48px
Start Your Healing
Sub heading
32px
Start Your Healing
Body
26px
Start Your Healing
Body Light
26px
Start Your Healing
Body Bold
26px
Start Your Healing
Body Small
20px
Start Your Healing
Body X-Small
16px
Colors
#876db0
#B0926D
#6DB07C
#5B554D
#F2F2F2
#292333
#876db0 (8%)
Web Breakpoints
Desktop devices
1440px
Laptop devices
1280px
Tablet devices (landscape)
1024px
Tablet devices
992px
Mobile devices (landscape)
768px
Mobile devices
390px
Layout Grid
Desktop Grid: Five Columns System
Mobile Grid: Five Columns System
Buttons
Desktop
>> Text Buttons
>> Icon Buttons
Mobile
>> Text Buttons
>> Icon Buttons
Software
Adobe Illustrator
Artboards Designs
Adobe Photoshop
Image Edition
Adobe Acrobat
Assamble/Share
WordPress
CMS
Oxygen
Code Builder
CSS3
Code Styling
Sketches
Home Page
Desktop View
Mobile View
Cloud Computing Page
Desktop View
Mobile View
Infrastructure as a Service Page
Desktop View
Mobile View
Free Assessment Page
Desktop View
Mobile View
Appointment Page
Desktop View
Mobile View
Booking Page
Desktop View
Mobile View
Sketches
Home Page
Help With Page
Anxiety Disorders Page
Anxiety Adults Page
Specialists Page
Contact Us Page
Wireframes
Home Page
Desktop View
Mobile View
Cloud Computing Page
Desktop View
Mobile View
Infrastructure as a Service Page
Desktop View
Mobile View
Free Assessment Page
Desktop View
Mobile View
Appointment Page
Desktop View
Mobile View
Booking Page
Desktop View
Mobile View
Wireframes
Home Page
Help With Page
Anxiety Disorders Page
Anxiety Adults Page
Specialists Page
Contact Us Page
Mockups
Home Page
Desktop View
Mobile View
Cloud Computing Page
Desktop View
Mobile View
Infrastructure as a Service Page
Desktop View
Mobile View
Free Assessment Page
Desktop View
Mobile View
Appointment Page
Desktop View
Mobile View
Booking Page
Desktop View
Mobile View
Mockups
Home Page
Help With Page
Anxiety Disorders Page
Anxiety Adults Page
Specialists Page
Contact Us Page
