Richard Emberton UX Designer

User Experience Design, UI and Visual Design


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.

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.

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.

Research

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

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

Methods included: Stakeholder interview, competitive analysis and proto-personas.

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

Ideation, design phase

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

Happy path sketch, to serve as a quick journey map, to help determine key points where the user could bail out.

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:

Task flow sketch, for determining navigation and sorting content.

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