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.
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.
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
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.
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.