Melodie In TO
Design Patterns

Account Creation

Where password creation has very specific requirements to be met it is best to present those to the user in a very up-front manner. Try typing in a password, watching as the requirements are checked off on the box at right.

You must enter a username
You must enter a password
Your password does not yet met the requirements
Your account has been successfully created.
Click here to try again

Password Strength

Your password must

  • Contain an upper case letter
  • Contain a lower case letter
  • Contain at least 1 number
  • Be 8 - 24 characters in length

Your password should

  • Contain special characters such as !@#$%&*+=

Recursive Selection

In this flow, users needs to select from a list of hundreds of childcare location(s). To reduce the cognitive load for users, there is one thing to note about each location that can be used to our advantage. Each location falls under a specific location and that there are far fewer agencies than locations.

I can use this information to make the experience of selecting a location much more pleasant by asking the users to select an agency first and filtering out the locations to only that agency.

The numbered steps reinforce the intended sequence, making the interaction clearer and reducing the likelihood of users skipping or misordering the selection process.

Agency & Location

Select an agency on the left to filter out the list of locations on the right. Then select a location.

Step 1Select an Agency




Step 2Select a Location

Locations appear once an agency is selected
All Locations
STRAWBERRY SCHOOL AGE CENTRE (A8513 - L1939)
PAPAYA SCHOOL AGE (A8513 - L1588)
MANGO TODDLER CENTRE (A8513 - L13246)
L'ORANGE MAISON MONTESSORI (A8513 - L7981)
APRICOT SCHOOL AGE PROGRAM (A8513 - L1942)
LOGANBERRY CHILD CARE CENTRE (A8513 - L1912)
PEACH PLAYSCHOOL (A6632 - L3276)
LYCHEE SCHOOL AGE PROGRAM (A6632 - L9861)
PLUM INFANT CARE (A6632 - L13451)
MANDARIN CENTRE (A6632 - L14821)
LIMEBERRY INFANT CARE (A6632 - L15132)
Select a location before submitting the form
Your form has been submitted.

Form Validation

This is an example of how form validation could be used to handle mutliple form errors. Click the submit button below the table to begin.

Childcare Room Information

Room Name Age Category Hours/day (12 max) Room Size (sq. ft.)
Room name is required
Hours must be 12 or less
Your form has been successfully submitted.
Click here to try again