Camp Registration
Mobile UI
2021
Girl Scout camps come once a year, and in the mad dash for parents to reserve coveted spots, the last thing they need is a bad interface getting in the way.
The Objective
Designing an easy, smooth registration flow for multiple children, with the right filters and calls to action to guide through a complex process.
The Research
At first, research for this project was, shall we say, extremely informal. Each year, I register my daughter for Girl Scouts summer camps, so research looked like this:
Me, to Mom #1: "Wait, there's a packing list and guide to drop-off? I never saw one!"
Mom #1: "Yes, if you miss the email, you'd have no idea."
Mom #2: "Whoops, that session's sold out."
Me, to Mom #2: "Yes, I wish I could filter out anything that's not available!"
This year, I turned these conversations into full UX contextual inquiries, and started synthesizing my findings.
The participants were four mothers during the registration process
-
One first-time registrar
-
Three repeat registrars
The User
​
The target user persona, 'Juliette' (an homage to Girl Scout's founder), was assembled from my five interviewees. Here she is, in an empathy map representing her mindset at the time of registration:
JULIETTE
That's one busy lady.
The User Flow
Next, I broke down what Juliette needed to do to get her girls registered for camp.
​
I took an hour, some jumbo sheets of paper, and my bathrobe (because those were the days of global quarantine), and thought out loud.
Laid out neatly, the user flow needed to look something like this:
The Recommendations
With all this information in hand, I began sketching out each screen of the process. Then, I brought in the UI elements I'd noted from similar mobile sites, and laid out a prototype.
My new recommended design for registering for Girl Scouts camp:
Logging In
Currently, from the main GSEP site, users need to navigate to a separate site to browse and register for camp. They need to enter a second, different username and password, and can't use their email address to log in.
​
So, the most important recommendation, possibly of this whole process, is a Single Sign-On function between the sites. Then, a simple way to narrow in on the right activity.
​
Browsing Camp Sessions
Juliette is exploring GSEP camp options for the first time. She isn't sure how the entire resident camp process works at this point, so this landing page offers her a summary.
She can see what to expect, plus use a link to the full guide before she launches into the browsing experience.
Also, she has two buttons to start browsing, in case she's scrolled down - a classic marketing approach.
Making Selections
Time to filter! Juliette needs to choose when, where, and which girl she is sending to camp. To allow for the maps and calendars, I gave each filter their own screen.
​
First, choosing camp location(s). All four residential locations are displayed on a map for users to interact with:
-
A simple touch selects (and then de-selects) a location
-
A long press reveals more info
-
Tapping outside the info box closes it
​​
To fit Juliette's commonly requested user needs:
​
-
Multiple locations can be selected.
-
A 'Show all' button is provided.
-
A link to 'Get Directions' is meant to open the default maps app, with the camp pre-loaded as the destination.
Then, Juliette needs to choose the dates she wants to see camp sessions for. The idea is for her to touch the date spans she'd like to select them.
But, because camps are available for full weeks, partial weeks, and weekends, she needs to be able to choose up to three options for the same dates. So, I provided color-coded strips for each option.
This next screen helps Juliette identify which girl she is registering for. The girls will be pre-loaded, as they need to be registered in the Girl Scouts system to even log in.
If she only has one girl registered in the system, that girl would be pre-selected. Juliette would still see the screen, though, so she understands she'll being seeing sessions meant for her girl's age range.
The Search Results - and Details
​
The filters having done their job, it's time to show Juliette the results. They load in a series of tiles, with basic information showing and a whole ton of detail tucked away, but readily available at the tap of the Details+ button.
​
Here, it was important that:
​
-
The calls to action are available whether the details are expanded or hidden
-
A status indicator at the top, since we'll have an extra step before checkout
-
A Share option opens the default text or email app with a pre-filled (editable) message
The 'Cart' - The Camp Schedule
​
At heart, this is an ecommerce site. Each camp session is a product. So I needed a cart with a few key elements:
​
-
Easy access to review the details of each session
-
A status indicator at the top, since we'll have an extra step before checkout
-
Most importantly, a clear indication of both the amount due and the eventual total
Creating Camper Profiles
​
Many ecommerce sites have a box to leave notes for customization and special requests. With the focus here on children's well-being away from home, a lot of information needs to be communicated.
​
So, each girl registering for camp gets their own screen, with three sections and the ability to skip each.
The Payment Process
​
For the payment flow, I added two options that are very helpful for quick and easy mobile checkout:
​
-
Third-party payment options (Paypal and Apple Pay)​
-
Scan-with-camera to add new credit cards
​
Next Steps
​
After registering, Juliette needs to take quite a few steps before camp actually starts. So, she's immediately greeted with a 'Next Steps' list, with a few key features:
​
-
Instructions for where to access the list anytime​
-
Third-party calendar integration​
-
Bold stars for required items​
-
Bright, bold type for easy scannability
Finally, loading screens
​
Any time the app is searching for filtered results (or just a bit slow), one of these screens are displayed.
The tone of the text is carefully balanced to keep the user in good humor, while hopefully not dismissing any impatience they may be feeling.
​
