The original site map becomes...
Dara F. Thomas
Product Designer
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?
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...
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...
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.
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
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:
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.]
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.
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
Lessons Learned
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.
Ensuring that course pricing information is easily displayed alleviates parental frustration and allows them to quickly decide whether to purchase course packets.
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.