LRNG is a web application that allows teachers to create online courses, and students can sign up and participate in these courses to earn credits.


October 2017 to October 2020


LRNG wanted to create a place where underprivileged youth could learn useful skills, increase their confidence, and gain opportunities in life.


A web application where educators can create online courses for students to participate and earn transferable credits.

My Role

Lead Frontend Developer


The LRNG web application was well-received by both teachers and students, and it has been successful in facilitating online learning and helping students to earn credits. The intuitive and user-friendly design of the platform has been a key factor in its success, with students reporting high levels of satisfaction with the platform's ease of use.

In addition to its success as an online learning platform, LRNG has also been shown to have a positive impact on underprivileged youth's opportunities for higher education and careers. Research has shown that underprivileged youth face significant barriers to accessing higher education and career opportunities, with lower high school graduation rates and higher unemployment rates than their more privileged peers.

However, programs like LRNG that provide access to high-quality educational resources and opportunities have been shown to improve outcomes for underprivileged youth. For example, a study conducted by the Department of Education found that students who participated in high-quality after-school programs like LRNG had higher rates of academic achievement and were more likely to graduate from high school and attend college.

Furthermore, a report by the Brookings Institution found that underprivileged youth who participated in programs like LRNG were more likely to pursue careers in high-demand fields like technology, engineering, and healthcare. This is particularly important given the growing demand for skilled workers in these fields, which offer high-paying jobs and long-term career opportunities.

Overall, LRNG has been successful in providing underprivileged youth with access to high-quality educational resources and opportunities, which has been shown to improve their outcomes for higher education and career success. By continuing to invest in programs like LRNG, we can help to break down barriers and provide a pathway to success for all young people, regardless of their socioeconomic status.


Our design process for LRNG was iterative and user-centered, and we started by conducting extensive research to understand the needs and pain points of our target users.

Know the User to Understand the Problem

We conducted user interviews, focus groups, and usability testing to gather feedback on our early designs and iterate on them. We also developed user personas to guide our design decisions.

User-Centered Design

Our design decisions were driven by the needs of our users. For example, we developed a simple and intuitive course creation process that allowed teachers to easily create and customize courses, while also making it easy for students to search and enroll in courses. We also developed a gamification system that motivated students to complete courses and earn credits, which was informed by our user research.

Design System

The design system was built and documented in the frontend using Fractal.js, then synced with Figma. This resulted in greater consistency and better communication between design and engineering. Every view is mobile-first, and responsive design principles were applied down to the atomic level.


The consistency in code, and use of design tokens, made it easier to later implement a dark mode throughout the site.

Interaction Design

Our team focused heavily on interaction design, creating a user interface that was intuitive and easy to use, including a clear distinction between students and educators.

View Prototype

Details of Delight

Feedback mechanisms we termed, "Details of Delight," let users know when they had completed a task or earned a credit. Each tiny interaction added incentives to keep learning.


Collaboration was essential to the success of this project, and we worked closely with product managers, developers, and other stakeholders to ensure that the platform met the needs of our users. We used an agile methodology, holding regular design sprints, reviews, and stand-ups to keep everyone on the same page.


Throughout the project, we maintained clear communication with stakeholders, regularly presenting our designs and design rationale. We also created design documentation that was easy to understand, which helped to keep everyone informed about the design decisions that were being made.