UX Design —

Designing a web-based K-12 code learning platform from scratch.

PonyCody is a startup learning platform offering a wide range of STEM courses to K-12 students. I was contracted to help with the original website design. I joined a small team consisting of two designers, one PM, and two developers.

Duration

3 Months

Apr-Jun, 2020

My Role

UX Designer

Contract

Skills

User Interview

User Survey

Persona Building

Task Analysis

A/B Testing

Wireframing

Information Architecture

Prototyping

Tools

Figma

Qualtrics

Google Sheets

Adobe Photoshop

Challenge

Since PonyCody is a start-up brand, we had to do extensive research to ensure we were on the right track. After discussing with our client, we decided that a great portion of our time and effort should be dedicated to user research.

Business Goal

Since PonyCody is a new business with limited market presence, the primary business goal was to encourage users to sign up for courses.

Design Process

1. Emphasize

The home page is informative and marketing-oriented by nature, so we narrowed our focus to parents of K-12 kids as our target user group. To understand parents needs and concerns, we conducted one-on-one interviews with 5 parents and sent out 30 surveys to gather quantitative insights.

Here are their top concerns:

  • Courses explained. Many of the parents are not familiar with programming and thus are not sure what courses to enroll their kids into.

  • Pricing and Promotions. The majority of the parents believe that it is important for them to know about the pricing of each course and available promotions before making any decisions.

  • Trustworthy Tutors. Parents put great emphasis on finding quality tutors to help their kids to learn programming.

2. Define

Based on research analysis, we created a persona to guide design priorities.

Persona based on 5 interviews and 20 surveys

Following the persona, the information architecture was defined. Users can access five pages through the navigation menu, with “Home” being the default page.

User Research Activities

We conducted several rounds of research throughout the project, from doing pre-design interviews to performing task analysis using lo-fi prototypes.

Interviews

Why: To grasp users’ pain points, concerns, and goals.

How: Conducted 1:1 interviews with participants through zoom.

Who: 5 parents of K-12 children

Surveys

Why: Gather quantitative data to determine design priorities.

How: Sent a list of 10 questions about users’ concerns and goals regarding the platform.

Who: 25 parents of K-12 children

Task Analysis & Walkthrough

Why: To understand users’ mental models while completing the tasks.

How: Asked the participants to go through the process from entering the website to signing up for a course.

Who: 5 participants selected from the 20 parents

3. Ideate

Below is a part of the lo-fi wireframes we created based on initial user research.

Wireframe.jpg

4. Prototype: Research-Based Design

Users wanted course-relevant information

Want: Information about course details, learning outcomes, prices, and recommended Grade Level

Want: Clear introduction

CLEAR INFORMATION

Group 331.png

82% of the parents were most concerned about course-relevant information, so we dedicated a whole page to presenting the courses in separate cards. Courses were classified in two ways. The main way was by course type (e.g., block coding courses, text coding courses, or STEAM courses). To help the parents decide which fits their kids best, we offered a secondary classification by level (beginner or intermediate).

Parents viewed the website with their children

Want: Fun courses to spark childrens’ interest

Want: Joyful visual experiences and interactivity

COLORS

Although we were primarily designing for parents for advertising purposes, 76% of the parents revealed that they would view the website with their kids in the survey. With this information in mind, we determined that our design style should be joyful and eye-catching to appeal to children.

We created two color palettes, consisting of five primary colors. We asked ten K-12 kids which color palette they liked more. 7 out of 10 kids preferred the more muted color palette. As a result, we selected color palette A for our design.

We also incorporated the five colors into the PonyCody logo design.

logo.png

Parents were promotions conscious.

Want: Learn about special offers

Want: Obvious promotional information

COMMUNICATING PROMOTIONS

To encourage sign-ups, we decided that promotions should be highly visible on the Home Page.

At first, we were undecided regarding where and how to present the promotions. We came up with two options.

• Promotional announcements in the hero space on the homepage with a button to click through.

• Banners at the top of every page with the discount details

So we let the users decide again. We created three high-fidelity prototypes: (1) one with a banner at the top, (2) one with a button in the hero space, (3) and another one with both. The result of user testings revealed that communicating promotions through a single banner or button is not enough. While everything else remained unchanged, we witnessed a much higher promotion click-through rate (52%) in the one with both the button and the banner.

Therefore, in our final design, both the banner and button were kept.

5. Test Result

5 users helped us perform usability testing. They rated our design based on the System Usability Scale (SUS). The SUS result was 79, indicating that users were very satisfied.