Objective
Create a refreshed UI design for The Healing Center website. They're a non-profit organization who help people through the grieving process with support groups after losing a loved one.
Problem
The Healing Center has recorded a high bounce rate and heard feedback from their clients that their website can be confusing and difficult to use.
Goals
Design a trustworthy, unifying style and navigate a clear experience for those joining groups and/or giving donations at The Healing Center.
My Role
Competitor analysis
User research
Information architecture
Accessibility testing
Image sourcing
Visual/UI design
Tools
Figma
Card sorting
Adobe Photoshop
Adobe Illustrator
Unsplash
Accessible-colors.com
Existing Website
Mood board
Words to describe feelings played an important role in developing this brand expression. I wanted to make sure I was representing a safe space for site visitors who are on the path to healing.
Style guide
In my visual research, I found articles on the power of color and the emotional connections they made between them. This helped me develop my color palette to create an inviting environment.
Some examples are grieving mothers, who have found comfort in shades of green, yellows that spark joy and help cultivate friendships, orange, to inject positivity with citrusy warmth, and soft pinks represent caring compassion and love.
Information architecture
I did an inventory of the site to reorganize the navigation and cut down on confusion of where to go from the home page.
Solution
Responsive design for desktop, tablet, and mobile breakpoints.
About Us
The "About Us" section is broken into tabs on desktop view for easy navigation, helping users find what they want to learn about the center quickly.
On mobile, the "About Us" page navigation reduces to dropdown sections to prevent unnecessary scrolling.
Donations
The donation page requires a selection between credit card or PayPal payment method choices before revealing the credit card entry field to reduce confusion.
Group Calendar
Convenient scheduling on mobile calendar.
When a date is selected on desktop view a lightbox pops up with details on the events, you can then choose and add a group to your calendar directly from this page.
New Client Portal
There are multiple entry points for accessing the new client intake form without it looking repetitive. Links can be found on the "Grief Support" page and above the calendar.
