LRNG Playlist

Responsive Website, Product Design, Product Style Guide/ Pattern Library, Build from scratch

LRNG is a national program and technology platform that enable cities to use existing resources such as schools, libraries and community centers to connect young people with new experiences.

Time: April 2015 - March 2016

Project Brief

Playlist is a curated collection of digital or local learning experiences (XP) and resources. XP can be local, like going to a game design event, or online like building a robot activity.

LRNG works with national and local content partners to create learning Playlists that support high-demand academic and workplace skills. Young people who complete Playlists earn badges and can unlock opportunities such as job shadowing and internships.

Web1.jpg
 

My Role and responsibilities

This project started as a side project in GlassLab while I was working there as Product Design Lead. I joined the project at the earliest stage and it soon became the main product of GlassLab. Later GlassLab expended the team and reorganized to become LRNG and my role evolved to UX and Design Manager.  I led a three person design team to design the LRNG tech platforms from scratch.

 

Product Design Direction

I defined a product style guide with my team and brand team based on the brand direction and it enabled us to build a cohesive design across different products. In addition, we also built a pattern library so we could have a scalable design system.

Design Management

I managed the design team schedule and it required me to oversee the design across different products. My responsibilities included managing designs goals, process, and prioritization of the work.

User Insights

I worked closely with the Chief Product Officer and two Product Managers to gather requirements and translate them to features.

People I worked closely with

Chief Product Officer (My Manager), Product Managers, UX/UI Designers, CTO, Web Developers, Chief Learning Officer, Learning Designer, Content Producers and Chief of Brand Officer.

 

Products

Playlist and the Playlist Builder.

Playlist is a curated collection of digital or local learning experiences (XP) and resources. XP can be local, like going to a game design event, or online like building a robot activity.

LRNG works with national and local content partners to create learning Playlists that support high-demand academic and workplace skills. Young people who complete Playlists earn badges and can unlock opportunities such as job shadowing and internships.

The Playlists are built at LRNG Youth, a learner facing site for young people to explore learning opportunities. Playlist Builder is another CMS site called Cities for LRNG. It is built for cities and organizations to create XPs and Resources and organize them into Playlist.

 

experience

The LRNG project is based on the principles of connected learning: a type of learning that integrates personal interest, peer relationships, and achievement in academic, civic, or career-relevant areas.

Based on 10+ years of research on Connected Learning, we build our product with a basic learning experience framework: Discover, Experience, Action and Benefit.

  • Discover: Discover learning topics that interest the learner.

  • Experience: Experience learning activities though viewing, playing or reading other learner’s projects.

  • Action: Learn topics by doing it themselves (Make a game or create a comic book).

  • Benefit: Submit projects to earn digital badges that document their learning achievements. Badges also unlock opportunities like internships.

Experience Map2-01.png

Sketch out the learning journey

We used experience mapping to help us understand the potential high points and low points a learner would experience throughout the whole discover-experience-action-benefit loop. We used it as our fundamental experience structure to move forward to sketch out details, user flow and functionality low fidelity wire.

 

Design

 

Discovery Feed

Discovery Feed is a place where young learners explore playlists and XPs that interest them. One major design goal for this feed was to make it fun and engaging for young learners to get lost. In this design, each card represented a playlist, XP, badge or interest topic. To make it visually more dynamic, content formats on cards could be selected between gifs, videos, user generated content, badges and abstract images that represent a specific interest.

Discover.png

Experience and action

Playlist is a key page for users to learn about an interest topic and go through XPs (activities).

“Submission Requirements” explains what artifact users should upload to show and prove they have done this XP. Once users finish their artifacts, they can click the upload button to post the content to the public. Once a user posts artifacts for all the required XPs, “Submit” button will be activated and allow the user to submit this playlist to earn the badge.  

Benefit

After the full playlist is completed, submitted and assessed, a text or email notification is sent out to the user once he/she receives feedback from the assessor and can unlock an opportunity.

 

Playlist builder

playlist-builder.png