Playground ↗is an e-learning startup that aims to help learners achieve coding proficiency using real-world training scenarios and an AI tutor.
As the sole designer and only other person on the team, I worked closely with the founder to conceptualize the platform from scratch— conducting user interviews, wireframing, and designing the web app over the course of three months.
Challenge
Learning Is Hard
Intensified by the pandemic, career dissatisfaction has been at an all-time high. Playground founder Zack Lee felt inspired by the countless similar stories he'd heard from friends wanting to switch into tech for a better work-life balance, remote jobs, and higher pay. Despite seemingly having high motivation to switch careers, these friends found themselves stuck after a certain point in their transition, never fully committing to finishing coding courses they'd signed up for.
From a market perspective, beyond free introductory web development tutorials, quality coding content is remarkably hard to come by, with few options to take one from practitioner to mastery without splurging tens of thousands of dollars on courses or bootcamps.
Playground's mission became: How might we help people learn how to code in an engaging, empirical, but also affordable way?
"I think the reason why online learning fails is that you start to get caught up in real-world things. And when you don't have people giving you feedback on what you're doing, you start to forget why you're even taking an online course."
Research Participant
Users and Audience
We wanted to interview learners who had attempted to use e-learning platforms to learn how to code to discover why they were unable to complete their courses and what initially drew them to those options. Given that the tech industry was our area of expertise and Playground's initial testing grounds, we targeted early-career working individuals who had tried to switch into technical roles such as design and development.
Through our initial research, we found that learners found it difficult to stay committed to online courses for a number reasons:
- Learners felt like they didn't have a stake in their education without a mentor or peers to provide feedback
- Courses weren't engaging, and didn't inspire regular use
- Learners needs and preferences change throughout their learning journey, and felt like courses didn't adapt to their needs
Fig 1. We identified three personas, deciding to hone in on a primary persona— the mid-stage practitioner, Tracy
The Proposal
Playground wanted to reimagine how a hands-on learning model would look like in the digital era. We sought to differentiate Playground using three distinct pillars—
1Using a project-based curriculum
Wanting to emulate the hands-on approach of an apprenticeship, we felt that the core benefit of the app should be a project-based curriculum. Pedagogical studies greatly emphasized the concept of "learning by doing", which was further reinforced by our interviews with learners who valued putting concepts into action over explicit learning.
2Providing guidance with an AI tutor
With new advances in GPT-3, Playground could play the part of a human mentor. The AI would be able to provide feedback on how to improve towards a professional level of work, help learners get unstuck by facilitating open-ended conversation, and provide contextual, alternative explanations for the project at hand.
3Utilizing game design patterns
Gamification is a tool that can build motivation and interest in learners, making the learning process more appealing and less like work. Objectives, mastery, achievement, creativity, and social engagement are all themes common to both learning and gaming, making gamification a natural solution to boost business and learner retention.
Fig 2. We explored numerous iterations of what this could look like, even experimenting with Chrome extensions and desktop apps
Solution
Duolingo for Coding
Playground is a learn-to-code web app platform that helps learners go from novice to practitioner with the help of an AI tutor and simulated projects. Learners review concepts that are framed in real-world contexts, with guided projects that help reinforce and cement their knowledge.
The curriculum design consists of three main components: lessons, scenarios, and projects. Lessons help build a mental model for mastery, scenarios help put it into context, and projects put it into action.
Lessons
Lessons incorporate interactive quizzes, auto-advancing content, and clear progress signifiers to give the user a sense of accomplishment and understanding. While beyond the scope of the project, we set the foundation for game patterns like streaks and social features to keep learners motivated.
Lessons are supplemented by a contextual AI tutor— a tool that helps expound on curriculum content if the learner needs further explanation.
Fig 3. Lesson prototype with interactive content and contextual AI
Scenarios
Scenarios give learners context to how they should apply the lesson in a real-world circumstance. Because this is their first introduction to putting lessons into action, scenarios were designed to be a lower-stakes, interactive yet guided module with multiple-choice answers and explanatory feedback.
Fig 4. Scenario prototype with embedded IDE and chat simulation
Projects
Playground wanted to provide the most value with projects. Projects operate similarly to ones found on platforms like Codecademy, but are meant to mimic genuine tasks engineers would work on at a company. They're designed to be completed with optional guidance; the AI tutor is there when needed, and the learner is given the option to engage.
A common refrain in our research was that having a mentor or a trusted advisor vastly improved course commitment. While we weren't aiming to replicate human interaction, we were able to train models unique to each learner that could essentially function as a trusted resource without the added overhead of maintaining a team of mentors. Users can ask the AI to guide them towards the right answer, walk them through the solution, or ask tangential questions related to web development.
Fig 5. Project prototype with Sandpack IDE and live preview. The AI chat model is trained on project context and user input
Outcome
Back to the Drawing Board
In the end, we designed something in between a minimum viable product and minimum lovable product, but shipped a product just short of MVP. Because of our prototyping backgrounds, the design-to-code turnaround would happen a day later at most, meaning we were able to see the product in action almost immediately, which was especially valuable when working with hypothetical open-ended prompts. But because we were a team of two, making implementation decisions almost felt like a couple's quarrel (Zack, the founder, is my partner of almost 7 years). We spent a disproportionate amount of time debating design decisions, without user feedback or data to reinforce those viewpoints.
Sometimes you can't force conviction. Zack felt the product wasn't differentiated enough from existing learn-to-code platforms, was discontent with writing content for the course, and VCs still cowered at the idea of B2C ed-tech. This iteration was a business idea for someone with a lot of runway and research time, and proved too costly for us to implement. Playground is still in its ideation phase today.