Lrnit.Live is a virtual learning tool for programming that connects student learners and teachers in real time. Simply put, it’s online, instructor-led programming courses that make learning fun. We bring real instructors and results you can see. The sky’s the limit. Instead of relying on videos and code challenges, Lrnit.Live hopes to leverage engaged virtual learning to help youth code. We’re meeting students where they are in ways that excite them the most.
Project Mission: Pivot from a product that sells live video game tutoring toward a service that helps young adults ages 13–18 to learn to code. Create a simple, intuitive, and memorable experience that appeals to both young adults and parents. Deliver recommendations on use, product development, and business growth that are consistent with user and market research.
Timeline: 2 weeks
- Key findings/recommendations for pivot
- UX process documentation
- High-fidelity prototype
Primary Roles: Research and design
- Parents typically will only encourage teens to code if they show interest
- Some teens are not only not interested but don’t even know what code is
- Video games are not important to some teens
- Independence is very important to teens and it may deter their interest if parents are involved
- Community is the number one reason teens play video games
- “Leveling up” is one of the best part of video games
- “Cool factor” is important to teens
Solution: We created and marketed key elements of a product focusing on independence, community, gamification, and “cool factor” (public and member sites). We did not just focus on teens who are into to gaming but expanded the target audience by including other teen interests as well. We recommended not only having live lessons but providing pre-recorded lessons as well.
- Client feedback/Additional conversations on game/lesson ideas
- Post prototype/survey on teen reddit for feedback and additional targeted user testing
- Refine point/badges/rewards system
- Refine visual design
- Additional buildout
Understanding the Online Learning Market, and Target Audience
Initial Research, Competitive Analysis, Interviews, Usability Testing, Affinity Mapping, and Persona
Our first steps were to:
- Research the online learning market
- Review competitor sites and create a competitive analysis
- Conduct around 15 user interviews primarily with parents but including several young adults as well.
- Synthesize interview and research data through an affinity map
- Discuss findings and determine key insights
- Create user persona and strategy based on findings
- Create business model canvas based strategy, brief, and client discussions
All parents we spoke to understand the importance of coding and told us it was there child’s interest that would be the most important factor to them. We chose to minimize the parent component and focus on the young adults. Based on our findings our strategy was to create and market key elements of a product focusing on independence, community, gamification, and “cool factor” (public and member sites). In an effort to reach the largest audience of teens we catered the site for teens who are into gaming, music, entrepreneurship, and activism. We concluded that to add to our competitive advantage, adding additional convenience to the product, we would recommend offering not only live classes but prerecorded lessons as well.
Determining and prioritizing the Content and Creating the IA
Initial Content Inventory, SiteMap, Sketches, Wireframes, Usability Tests, Card Sorting, and Iterations.
After the initial research phase, we created a rudimentary content inventory and an initial site map. We decided to prioritize the user flow a young adult would take to enter the public site and try the product. We then conducted a design studio where we worked together brainstorming and combining our best ideas. We began by focusing on the public site and then moved on to the member site.
After we had determined, organized, and labeled the content for our dashboard we decided to verify our organizational/labeling assumptions by performing a card sort with 5 potential site users. This was my favorite part of this project as it reminded me just how wrong assumptions can be. Patterns emerged from our card sorts that were quite different than we initially thought and we modified our IA accordingly.
After our card sort we created initial sketches, wireframes, and finally a design system. Though team conversations we realized our initial thoughts on content had a few challenges we needed to address. We created multiple iterations ending with a final dashboard successfully meeting our strategy and user needs. We focused our main dashboard page on our highest priority initial items, a welcome tour, skills assessment, and profile builder. After the initial items are viewed new recommendations would be provided to the user. We created a points/rewards system to encourage our users to explore the high priority recommendations.
Through team conversations and additional usability testing our dashboard pages and points/rewards system continued to evolve.
Our initial thought for the lessons portion of the site was to create seperate pages for lesson details and the actual lesson itself. We found the system to be a bit clunky so, inspired by the Lynda.com approach, we made a shift by replacing the lesson details page with a modal opening on the game listing pages and additional details on the lesson page itself.
It’s All Starting to Come Together
Visual Design and Final Prototype
We started the UI design by looking at sites targeted at teens and creating mood boards and initial design concepts. We thought the ideas we were coming up with were good but we felt none of them targeted a wide enough range of teen personality types. We thought to ourselves, “How do we channel our inner teen? Go to the mall!” We took a trip to the mall visiting stores that targeted a young adult audience and that’s when inspiration struck. Over and over we saw pictures of diverse teens, frequently in black and white. That was the universal cool factor we were looking for. When we saw a sign in front of one store using layers to make it even cooler, the idea of using parallax for the homepage hero seemed like it might be appealing to teens. I went home and in a few hours I created graphics and modified a previous personal project to quickly develop a parallax hero concept. We showed it to many potential users and almost exclusively received very positive feedback. We then make final decisions on fonts, and created multiple color palettes which we discussed with various potential site users. We made final design decisions and began applying them to our wireframes.
Bringing it All Home
After much team discussion, instructor/classmate feedback, and many rounds of iterations, we designed an elegant and fun solution that not only meets the client goals and users needs but takes an extra step and adds to the competitive advantage expanding the target audience and adding convenience by providing pre-recorded lessons as well as live training. Stephen at GameTrainer/LRNIT.LIVE was very happy with the results and the entire process was an exhaustive but great experience.
Overall I think our solution is very successful and I look forward to seeing what becomes of it. A big thank you to Stephen at GameTrainer/LRNIT.LIVE for allowing us to design a large pivot of his product. It helped me to grow not only as a designer but as a team member and a leader as well.