Richard Emberton UX Design

User Experience and Product Designer

Coding-for-Kids classes

Helping parents make a decision about their child's education

TechSmart Kids asked me to help design their process to inform and invite parents to enroll their children in a new "learn to code" educational program.

High-fidelity prototype utilizing existing branding.

We needed to first determine what the site would include:

Card sorting for priorities and minimum viable product features.

Role, scope, schedule...

The designer's role: A one-person team for research, design, prototype and test... This was a fast-moving project with a tight budget. With minimal resources for research, recommendations and advisement based on general best practices would be provided.

Task flow sketch for navigation, order and content.

Requirements and constraints

A key requirement was to display only the necessary information and no more, for the customer to make a decision to go forward. Development and maintenance were also factors, so we'd need to keep it technically simple, but still look professional.


Quick proto-personas were created (prototypes of personas base on what we know at the time.)

Empathy maps for both parent-customer and child-student.

Methods also included: Stakeholder interview, competitive analysis and contextual inquiry.

Customer experience vs. user experience... Quick journey maps were prepared to address both roles and how they overlap:

Ideation, design phase

Quick storyboards were used to capture the over-all process and key tasks:

A "happy path" sketch, from viewing an ad to viewing the site, and inquiring more info.

Design decisions

Focus was mostly on information architecture, how much to show, when and where. And the balance of visual imagery with textual content...

The customer and the user may not be the same person.

The design for the sake of ease of development would be kept straightforward, using existing plug-in mechanisms for contact and sign-up.

Additional details:

Wireframe for how the initial content would display on a phone.

Prototype and test

Cognitive walkthrough exercises with lo-fi and hi-fi prototype screens helped de-bug the flow. The proto-personas were reviewed, then recruited test subjects "role played" through prototypes.

Test results and refinement

Steps were reduced to get key info in front of there eyes more immediately. With each step there's opportunity to bail out. (Interestingly, parents often bail-out before kids.)

High-fidelity mock-up screen for hand-off to dev.

Final results, take-aways

A successful product shipped. Customers began calling.

Surprises and learnings:

Next project →

© 2018 Richard Emberton