Dara F. Thomas
UX Designer

Coding For Kids At Home

Website Redesign

Image alt tag

Coding For Kids At Home is a Toronto-based private online coding school aimed at empowering children to develop technological literacy skills. Poised for growth and expansion, they need to improve the site's user experience in registering and scheduling classes.

We used user research to update their class sign up process, check out features, and class scheduler.

DURATION

3 weeks

TEAM

Dara Thomas

Andrew Suh

Lorna Ma

SKILLS I UTILIZED

User Interviews

Wireframing

Usability Testing

TOOLS

Sketch

Miro

Notion

GATHERING DATA, INTERPRETING FEEDBACK

Stakeholder Interview

At the start of the discovery phase, we gained insight about past pain points through speaking with our stakeholder, Menachem Fleur.

A new contract with the local school district has motivated him to address existing user issues. Namely, difficulty navigating and completing his business goal: purchasing course packages and scheduling their children.

Some of the questions we asked him...

  • What are your long-term and short-term goals for Coding For Kids At Home?

  • What initial problems are you seeing and experiencing with the website?

  • Can you walk us through your current scheduling process?

  • Can you explain your vision for your current demo feature?

  • Do you have site analytics you could provide for our research?

  • Who interacts with your site the most?

"The scheduler is a big issue for me. I need to scale this and automate so that customers can schedule classes - so that I don't have to negotiate time slots between teachers and students."
- Menachem Fleur, C.E.O. of Coding For Kids At Home

User Interviews & Contextual Inquiries

Method:

We conducted 5 one-on-one sessions where we asked the users a set of questions and then had them go through the site and give us their thoughts.

We sourced users through requests for participants on social media. Facebook, Twitter. None of these users are part of our design team's individual direct networks.

Users:

A takeaway from our stakeholder interview was that the main site users were parents - chiefly mothers of school-aged children. The C.E.O. explained that they were the ones who tended to sign their kids up for his courses.

Some Questions Asked

  • Do your children participate in online activities?

  • What criteria do you use when choosing online activities for your child?

  • As you go through the website, can you summarize your understanding of the Coding For Kids program?

  • On a scale of 1-10, 1 being absolutely not and 10 being absolutely, how likely are you to sign up for this course? Please explain.

Tasks Users Performed:

  • Please navigate through the site and tell me your initial impressions, thoughts, and feelings about the website.

  • Go through the process of choosing and purchasing a course.

  • Register your child for a time slot of your choosing.

Mapping It All Out

After the user interviews, came the affinity map. Quotes from each user were distilled onto individual sticky notes, and then grouped by major them for clarity. Main User takeaways are shown below...

FROM GROWING PAINS TO GLOWS:

Meet Janet Harmon

Janet is a 38-year-old Montreal-based attorney and mother of two children - Harper (aged 9), and Marcus (aged 11). She wants to sign her kids up for coding classes. She's always concerned about her children's safety online, so she wants to feel like she knows a bit about who's running the program and the teachers who'll be teaching them.

Her main frustrations while course shopping involve not finding the pricing and other pertinent information quickly on a course website. She also gauges whether her kids might enjoy a particular course by their reaction to the website it's offered on.

She says...

"If my kids don't enjoy the website, they might not enjoy the courses offered."
- Janet Harmon
FROM GROWING PAINS TO GLOWS:

Journey Map

Using feedback from our interviews, contextual inquiries, and affinity map, we wanted to map out the journey that Janet has to take while navigating the current website. This helped us to hone in on pain points that we needed to address in our design solution..

DEFINE

Problem Statement

Janet needs a clear, efficient, and user-friendly way to sign her kids up for coding classes so that she can keep them entertained and learning in their spare time.

How Might We?

...Lay out the site's information clearly to users, to eliminate confusion and help increase the chance that they'll purchase, register, and schedule a course for their child?

Solution Statement

By building an efficient navigation and scheduling process we will have less confusion about course details and build trust in taking an online coding class. We will know this to be true through user feedback of our prototype.

The original site map becomes...

The original site map becomes...

Original Site Map

To guide our site layout, we next audited the layout of the original site. It was clear that the original layout was cumbersome, with information buried deep within various layers.

Revised Site Map

Simplifying the site map by combining like information and removing extraneous details made sense. The revised site map is much more streamlined and reduces the number of clicks while navigating through to sign up. Our revision is much simpler and straightforward.

DESIGN
FROM GROWING PAINS TO GLOWS:

Crazy 8s...

We jump-started our creative iteration process by listing features that should appear on each site page. Using the "Crazy 8s" exercise, each team member quickly came up with sketches. Here is one of my sketches - conceptualizing the About page.

From Sketch to High Fidelity

The Crazy 8s exercise helped us identify which features worked best for each page. Here's how the Register page evolved:

FROM GROWING PAINS TO GLOWS:
FROM GROWING PAINS TO GLOWS:

Building Trust - BEFORE...

The current site had an intro video (A) which spoke about Coding For Kids At Home. User feedback from our interviews uncovered an interesting tidbit: users were concerned about WHO their child spends time with online. The intro video was not enough to build that trust.

[Scroll the monitor screen to view.]

FROM GROWING PAINS TO GLOWS:

Building Trust - AFTER...

Our design solution was to include a "meet the C.E.O" and "meet the instructors" sections on the About page. teacher photos with quick blurbs introducing them to parent users.

[Scroll the monitor screen to view.]

Scroll Through Our High Fidelity Screens Below...

These are some of the screens that would later comprise our prototype.

Research Made Clickable: Our Prototype

After completing all screens, we created the clickable prototype which can be found here.

FROM GROWING PAINS TO GLOWS:

Usability Testing

Using Zoom, we then conducted remote final usability tests with 7 users. We quietly observed, measuring time and number of clicks taken, as they navigated signing up for a course, and scheduling a time slot. Here is the insight we gathered.

DELIVER

4
Iterations
57
Screens
1
Satisfied Client
"You did a fantastic job! I'll message you soon for the actual build!"
- Menachem Fleur, C.E.O of Coding For Kids At Home

Lessons Learned

  1. Building trust was essential in getting parent users to register for online extracurricular activities for their kids. That trust is achieved by allowing parents to put faces to the names of those they will entrust with their children's care and learning.

  2. Ensuring that course pricing information is easily displayed alleviates parental frustration and allows them to quickly decide whether to purchase course packets.

  3. A surprising find was that making sure that the site is kid friendly (through cartoon graphics and a happy color scheme) often converted on the fence users into paying customers - if their kids think that the site is "cool", parents assume they'll have fun in the actual course.

If We Had More Time

The 3 weeks between the initial stakeholder meeting and the final product's delivery meant that we had to prioritize addressing the most pressing issues (ease of navigation, trust, ease of registration). We would have liked to secure actual photos of each teacher before our deadline but will certainly add them and update our prototype for the next phase.

Next Steps

Our client has expressed that he intends to adopt our design solution, and is currently seeking a software developer to build it out. He will bring us on to consult with the developer as soon as he hires one.