PeeWeePrep.com
UX Case Study · Spring 2022
Concept, Branding, Web & Mobile UX

Giving a 30-year-old preschool its first real front door online.

As of March 2016, Pee Wee Prep had no website — no additional contact point for parents, no digital home for the school's LLC, and no place to share pricing, program, or staff information.

DesignerMarc Pappalardo
ScopeBrand, responsive site, mobile-first UX
ProcessResearch → wireframes → testing → hi-fi
Project Brief

Four questions to start.

Following a goal-directed design process, I framed the work around a handful of key questions before writing down any assumptions about our users or the product.

Who's the audience?

Which groups of people will actually use this website?

Who's the competition?

Who are we up against in this market?

How accessible?

How can the site work for the widest range of people?

What's essential?

Which common features will parents actually need?

Affinity Mapping

Setting the foundation before designing anything.

Affinity mapping helped identify not just the general scope of the product, but the direction for the center's website — a useful brainstorming step early in the process.

Users
Tour booking
Staff members
State/city officials
Childcare professionals
Issues
Hard to contact
Limited research time
Waitlists / no availability
Needs
Accessibility
Safety & security
Clear visual hierarchy
Hassle-free interactions
Possibilities
Responsive design
Call/email action bar
Curriculum & staff info
Research

What five parents told us mattered most.

A survey and follow-up interviews (3 enrolled parents, 2 considering childcare) revealed how families actually search for and choose a center.

5/5
Focused most on quality & safety of the center
5/5
Rated price / affordability as a major factor
4/5
Said proximity was a high priority
3/5
Asked friends or family for recommendations
Personas

Designing for Jessica and Jamee.

JS

Jessica Smith, 42

Retail Manager

Covering a long shift, Jessica only has short phone breaks to find a preschool for her son. Centers she calls are full or don't pick up — and she has no way to know which accept her state contract. She ends up sending Facebook messages to multiple schools, hoping someone responds.

JK

Jamee Khan, 33

Software Engineer

With only weeks before his new office schedule starts, Jamee searches for a preschool for his daughter, Nadia, on his phone. The center he finds has no website and no way to book a tour online — just a phone number that goes to voicemail.

User Flow

Two paths every parent needed to complete.

Booking a tour, and enrolling a child — both needed clear entry and exit points before any visual design decisions were made.

Open website
→
Book a tour
→
Select date/time
→
Confirmed
Open website
→
Open registration form
→
Complete & submit
Lo-fi Wireframes

Putting the framework together.

The ideal end product needed to put parents on a clear path: learn about the center, book a tour, and register their child — with low-fidelity wireframes used to prioritize which functions mattered most.

Usability Testing

Three in-person, two remote.

Testing on the low-fidelity prototype paired a pre-test questionnaire with a short task list — asking participants to relate their feedback to their own past experience finding a childcare center.

Task 1

Learn more about the preschool and its program.

Task 2

Schedule a visit when the school is closed and can't be reached by phone.

Style Guide

Vibrant but grounded — fun, education, and trust.

Vibrant colors and playful elements convey a sense of fun alongside education and homeliness. Open Sans and Brandon Grotesque were chosen for legibility and the sense of sophistication parents look for in a trusted preschool.

284870
5E7C58
F26126
F9D57A
Aa Bb Cc — H1, Open Sans Bold, 64pt
Aa Bb Cc — Large copy, Brandon Grotesque, 24pt
Aa Bb Cc — Body, Brandon Grotesque, 18pt