happy hollow
children's camp:
responsive web redesign

Welcome to Happy Hollow Children's Camp

Redesigned to make summer dreams come true

Check out the prototype!

Project length:

5 weeks

Role:

Service designer, UX/UI, Researcher, Prototyper

Project type:

Responsive website redesign

Background

HHCC is a community voice that deserves amplification

In 2021, It was estimated by the U.S. Department of State that "there are 1.5 million NGOs working in the US alone." These organizations are on the ground floor of their local and global communities creating positive social change, broadcasting their missions effectively to garner support through donations and volunteer efforts.

One of such organizations is Happy Hollow Children's Camp, a local Indiana NGO.

Per the information provided on their website, Happy Hollow Children’s Camp aims to “provide an outdoor experience for everyone, especially youth, that encourages human potential through exploration, connection, and self-discovery.”

This organization is one of the only residential camps (serving children ages 7-14) in Indiana that focuses on providing for children from economically underprivileged households, and children with asthma.

Their core mission is to foster outdoor learning experiences that encourage campers to become caring, responsible, and active members of their communities.

The organization's current website contains all of the essential information one would expect from a children's program including program types, dates, and camp activities.

There are, however, several key areas that could be improved in a redesign such as written copy, visual design, information architecture, and page-level hierarchy.

By making critical camp information easier to locate, branding more concise, and articulation of content clearer, we can not only create a more enjoyable experience but effectively amplify a critical community voice doing important work.

Although the website for Happy Hollow Camp contains all of the essential information for visitors, there are both functional issues (ie. broken links) as well as visual design inconsistencies that are likely preventing increased camper enrollment and donations. These key flows should be prioritized in a website design to increase visitor engagement and retention.

Redesign proposal

research

Users want safe children's programs that fit their needs

RESEARCH OBJECTIVES

Understand what parents look for in a children's educational/recreational program
Determine the enrollment criteria of parents for educational/recreational programs
Determine any frustrations with the current website
Understand what drives individuals to make donations

COMPETITIVE ANALYSIS

CodeNinjas

Indianapolis

Children's Choir

DeVeau's School

of Gymnastics

In order to understand what children's camps were currently being offered to the greater Indianapolis community, I took a look at three popular recreational and educational programs offered to kids seasonally.

COLLECTIVE SITE STRENGTHS

Name value and recognition
Strong site IA with easy access to main CTAs
Wealth of testimonials and references for viewing of prospective families
Inclusion of high-quality photographs of campers and camp activities

COLLECTIVE SITE WEAKNESSES

Monochromatic and/or plain feeling visual design and color palette
Cramped and busy feeling informational pages
Lack of easy access to pricing and/or expensive costs

USER INTERVIEWS

people outside at a park in the summer, with light colors including yellow, green, and ora

Participant recruitment

First and foremost, I wanted to speak with users who parents or legal guardians of children. I was able to gather 6 participants, all parents with children of varying ages.

All parents had experience looking for and/or enrolling thier children in educational/recreational programs, both paid and free.

Interviews: Primary takeaways

At large, the most common way that parents determine whether a program is 'worth it' is to assess cost and time commitment. Many parents hear about these programs through word of mouth, with experience donating (either money or resources) to these organizations. Most feel open to donating again if they believed in the mission. Safety issues were unanimously the biggest red flags when scouting new programs.

View in full

USABILITY TESTING

Google Forms

Synchronous

6 participants

As a supplementary resource, I conducted usability testing with my interview participants. This allowed me to establish a baseline of the original camp website's usability from a parent's perspective and tailor my redesign efforts accordingly.

AREAS FOR IMPROVEMENT

Overall

polish

Visual

Design

Donation

motivation

USER PERSONAS

User interviews revealed that most parents can be categorized into roughly one persona: "The active mom"

These are busy, family-oriented individuals who spend their free-time seeking out new educational and recreational opportunities for their children

PROJECT SCOPE

"Parents need help quickly vetting and understanding the mission of Happy Hollow Camp via their website because the current website fails to efficiently convey its purpose, essential program information, and legitimacy as a safe, affordable, and reliable recreational children’s program."

Problem statement

HMW clarify and emphasize the key information of Happy Hollow Camp to expedite the time spent reading/fact-finding on the website?

HMW build user trust in the camp’s safety and legitimacy without the aid of positive word of mouth or personal family referrals?

HMW encourage user engagement and streamline the online process to 1.) enroll a child in camp programs and 2.) make flexible donations?

HMWs

user flows

Encouraging users to complete core tasks

Make a donation flow

The first flow to outline was making a donation: the primary focus for this site redesign. In place of the 'Donate' CTA taking you directly to a third party form or service, you would visit a central donation page with additional information about the power of a donation, ways to get involved, and an FAQ with a the donation flow baked in.

View in full

proposed redesign

Revamping and reorganizing current site assets

HOME, ABOUT, AND PROGRAMS PAGES

Central site pages with essential information including organization's mission and history, camp types and activities, and downloadable resources (Ex. program brochure, family information packet, etc.) New features include:

Interactive camp calendar with relevant dates dates and deadlines

Verified parent testimonies

Frequently asked questions and answers

DYNAMIC DONATION PAGE + FORM

New home for donation-related inquiries and background including reiteration of camp's community-based mission, explanation of their need for funding, and the direct impact of donations on camp operations. Other features include:

"Ways to get involved" section with resources for non-financial means of support

Frequently asked questions and answers

Examples of donation amounts and real-life results

wireframing + testing

Making key information easy to find

Low-fidelity main screens

In order to drive engagement to the donation flow, it was imperative to make sure that the process itself was simple. I looked to the approaches of leading NGOs across the globe such as LiNK, Doctors Without Borders, and UNICEF for inspiration, analyzing what made their donation pages impactful and user friendly.

View in full

TESTING ROUND 1

15 participants

DONATION TASK RESULTS:

90

Direct success rate

4.9

Avg. difficulty rank

(5 being easiest)

45.2s

Avg. time on task

DONATION PAGE

Implement pre-set donation amounts to offer a frame of financial reference and streamline donation flow

Expand upon the idea of donation power; offer users additional inspiration and encouragement to get involved through storytelling

RESULTS

Validated the logic and clarity of the donation flow
Understood that there is room to push the sale ever

harder on the donation page

Determined that there is room to consider additional

features throughout donation flow (ie. pre-set donation

amounts, card type detection)

Recognize the room for improvement in font sizing,

spacing, and alignment to grids

Refreshing site visual design

I took a great deal of inspiration from the organization's logo, which not only includes the orange brand color but reflects the outdoors-focused programming. An informational flyer on the home page served as a wonderful window into this camping aesthetic, providing me with a handful of colors and themes (ie. trees, outdoors, skies) that I could implement in the redesign.

TESTING ROUND 2

13 participants

DONATION PAGE

Before

After

Consider adding more personality through photo treatment/smaller details

Added background information surrounding camp's mission, need for donations, and frequently asked questions and answers to add clarity

PHOTO TREATMENT

Before

After

Added decorative accents and increased stroke weight to create scrapbook-esque aesthetic and emphasize sense of fun and whimsy

RESULTS

WORKED: Color palette, photography, and page hierarchy

CHANGE: Treatment of photographs to fit theme of page (ie. border, styling), use of light grey, move the 'x' button to top right hand corner in donation flow, add more impact and encourgament on the donation page

QUESTIONS: Why the donation page doesn't have more information or encouragement about why users should donate, how the pages would look with a stronger color palette

IDEAS: Add orange 'glow' overlay to photos to add consistency, add fun icon next to 'Life at camp' header, play around with different contrast levels for subheaders

final result

impact

This project presented a valuable opportunity to engage with an NGO doing important work for greater Indiana community. By refreshing the site content and streamlining the primary donation flow, users were able to access critical camp information quicker and easier than before -- reducing the time on task and increasing the experience from start to finish.

PROJECT OUTCOMES

Increased engagement to primary site CTAs and donation flow

Clarified and strengthened organization's mission through updated copy

Successfully leveraged site assets (ie. photography, color palette) to refresh visual identity

NEXT STEPS

Conduct additional testing with parents

Assess camper enrollment flow for usability

Redesign and implement updated employment page

happy hollow
children's camp:
responsive web redesign

Check out the prototype!

Project length:

Role:

Project type:

Background

HHCC is a community voice that deserves amplification

Redesign proposal

research

Users want safe children's programs that fit their needs

Participant recruitment

Interview guide (preview)

My questions focused on understanding the role of recreational programs in children's + parents' lives, the criteria that parents use when selecting said programs, and experiences making donations 1.) at large and 2.) to children's recreational/educational programs.

View in full

Affinity mapping to organize key insights

View in full

Interviews: Primary takeaways

user flows

Encouraging users to complete core tasks

Make a donation flow

Camp enrollment flow

The second flow to outline was camp enrollment: the secondary focus of this site redesign. It was important to understand how the current enrollment form works in order to provide the neccesary information (ie. program details, dates, pricing, etc.) on the site's main pages.

View in full

proposed redesign

Revamping and reorganizing current site assets

wireframing + testing

Making key information easy to find

Low-fidelity main screens

Mid-fidelity main screens

My strategy moving into mid-fidelity wireframing was to focus on clarity. Users should not have to dig for essential information. Considering the probable time and resource constraint of most parents, I wanted to make it hard for them to wonder what to do and encourage quick action.

View in full

Mid-fidelity donation flow

Refreshing site visual design

High-fidelity main screens version #1

The original site's use of photography was a favored aspect among particiapnts, so I knew that I wanted to allow these visuals shine in the redesign. Screens were kept clean and minimal so that they photographs and written information could be the focal points.

View in full

High-fidelity donation flow version #1

final result

impact

Privacy Policy

happy hollow children's camp: responsive web redesign

Check out the prototype!

Project length:

Role:

Project type:

Background

HHCC is a community voice that deserves amplification

Redesign proposal

research

Users want safe children's programs that fit their needs

Participant recruitment

user flows

Encouraging users to complete core tasks

Make a donation flow

proposed redesign

Revamping and reorganizing current site assets

wireframing + testing

Making key information easy to find

Low-fidelity main screens

Refreshing site visual design

final result

impact

happy hollow
children's camp:
responsive web redesign