Scramble Website redesign
PROJECT OVERVIEW
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.
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.
Duration: 2 months (July 2020 — August 2021)
My Role: Task Analysis, Information Architecture, Wireframing & Prototyping, UI Design (Solo Project)
Tools: Figma, Photoshop
Full Brief: Scramble Redesign Brief
How might we provide parents with a better experience for booking and managing camps for their children?
The signup process is 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.
Primary Persona
Veronica
“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.”
Here are 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 be able to select multiple camp weeks and purchase them together;
As a parent of a child with allergies, I want to ensure the safety of my child while 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
Low Fidelity Wires & Flow
Link to low-fidelity prototype used for usability testing.
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.
Style Guide
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
Flow2: 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.
Next Steps
While the general direction and design style are completed, the usability of the forms is still being refined. A few key decisions are still to be made about how much information to ask upon account creation vs after booking a camp or play session. The next steps for the Scramble project are:
Create all empty states
Finish content for all accordion menus on the forms
Test the flows with 5 target users