Scramble Website Redesign
Description: Scramble is a local indoor play area and offers playtime, parties, and camps for younger and elementary school-age children. Their website needed to reflect that image and cater to the needs of busy caregivers.
Duration: 2 months (July 2020 — August 2021)
My Role: Task Analysis, Information Architecture, Wireframing & Prototyping, UI Design (Solo Project)
How might we provide parents with a better experience for booking and managing camps for their children?
Challenge: Redesigning the website to offer a more useful and streamlined experience for caregivers who are looking to sign up their children for various camp sessions.
The signup process was information-heavy, so I wanted to find an optimal way to present the steps for the necessary paperwork while reducing the cognitive load for the caregivers. I wanted to simplify the UI as well, to be less distracting from the task at hand and provide guidance through the signup process and necessary documents.
Before Screens
The site had a few pages overloaded with color and imagery, and then others that were very text heavy. I also saw potential to simplify the workflow and eliminate duplicate content.
A Mom on the Go
“As a mother of two elementary school-aged children, I am busy juggling professional and family life, and want to provide safe and fun learning opportunities for my children during the summer.”
A few of her user stories uncovered in research:
As a parent of elementary school-aged children, I want to book a few weeks of summer camp;
As a busy parent, I want to view quickly the camp sessions I've booked;
As a parent who needs to plan the summer, I want to select multiple camp weeks and purchase them together;
As a parent of a child with allergies, I want to ensure my child's safety at camp;
As a caregiver, I want to know what activities my children will be involved in during their week;
As a new parent in the NoVa area, I want to find out the location of Scramble and the relevant procedures for drop-off & pick-up.
User Flow (Camps)
Task 1: Create a Profile & Enter Info
Task 2: View information about available camps
Task 3: Book multiple camps
Task 4: Purchase booked camps
Task 5: View which camps I’ve booked
Mood Board & Colors
Although Scramble is an indoor play space, I wanted to elicit a feeling of being in nature on a bright, sunny day. I explored a few palettes that fit the mood board and felt that the one with the analogous colors fit my purpose and the design brief the best. It had the right balance between bright hues and warmth.
The blue, green, and yellow create harmony and evoke a fresh, bright, and cheerful feeling. I chose a cheerful and energetic shade of yellow that brings fun and joy. The blues covey calm, trust, and stability, while the green adds relaxation, balance, and harmony. I chose to use green for the majority of the headlines, and the footing. All important navigation elements will be in the blue - hamburger menu, close button, most CTA. The cyan and yellow will be used sparingly, for the hour’s background and other accents. The navy blue will be used for text, and at 50% it will make the borders of the form fields and supporting icons.
View the complete interactive style guide
Polishing the mobile look
Having the style guide helped me create a uniform look for the mobile breakpoint. I focused on the two flows shown below. Feel free to play around and test the mobile prototype.
Flow 1: Booking a camp session
Flow 2: Creating an Account
Enhancing the Experience
Multiple touchpoints
Lots of times parents want to browse on one device, add the camp sessions to their cart and fill in documents later on a large screen, more suitable for reading text-heavy documents. The responsive website design allows for such a seamless experience.
Information chunking
Filling out all required camp information can be overwhelming. Sometimes parents don’t have it all at hand when they are booking the session. The step-by-step process with visible checks lets them know which steps are still remaining.
Responsive Design
Starting with mobile-first design and ensuring all major breakpoints are well thought of ensures that the user has a seamless and coherent experience interacting with the website from multiple devices. This is especially important as information-heavy sites might utilize different UI patterns to show/hide particular sections and forms.
