Admin App Overview

Electron App on Macbook Pro.png


The Devslopes app’s main function was teaching people how to code through video based tutorials. It was designed and built from the ground up to stream videos, administer quizzes, and allow quick access to project files. The app shipped in February of 2018.



As the product manager and sole designer on the team, I crafted the app experience for both our existing users and on-boarding new users. I created branding guidelines for colors, typography, and design language. I also collected and utilized our current students feedback and usage data points across our existing native macOS app.



While our current macOS native version performed well, we needed to prioritize content organization, the learning experience, and our hypothesis on gamification. We also had to be mindful for 3 different user types created from previous pivots and their experience when migrating to our new platform.



Our goal was to declutter design flows that performed under par with our current version, and double down on a few key features that enhanced the learning experience. We needed to make it easy for our current users to understand while maintaining conversion rates for new users.


Maintaining Context

Talk about format

Admin App Home FRAMES.png
Data Format.png

Organizing the Data

1.0 and 2.0.png

A Clear Path to Success

We also wanted the students to be aware of their progress. Upon launch they were able to visually see their path to completion, rather than jumping into the video player screen to view the lesson list.

Lesson List.png

Screen Real Estate - Learning to Code


The majority of our students were learning on a laptop with no external monitor, causing them to vocalize their need for Picture in Picture (PIP). While we shipped an update with PIP implemented, the process to use it was cumbersome in the context of managing the app, an IDE, and the PIP window.

PIP Flow.png
Theater Mode v2.png

Solution - Theater Mode

Instead of recreating the PIP experience for our 2.0 revamp, we created “Theater Mode,” which allowed the benefits of PIP while reducing the process to achieve the desired results. This resulted in a decrease of time it took for students to configure window sizes, and an increase in maneuverability between their IDE and our app.

Theater Mode Windows.png

Quizzes & Tests

Quiz for Portfolio.png

We implemented quizzes and final tests as requirements to complete the Slope. Final tests were timed to reduce and discourage research while taking them. Framing tests in this way resulted in higher completion rates and more engaged learning.


Reassessing Gamification

Our version 1.0 consisted of coins that were collected upon completing lessons and quizzes. While this maintained steady usage within the app, it detracted from students consuming learning content. Students inflated metrics for completed lessons by prioritizing coin collection and decreased lifetime value. We decided to remove gamification for our 2.0 revamp and focus on the learning experience before considering other gamification methods.

Technical Debt: Investing in Scalability

We also reassessed all technical aspects. Our biggest pain points were:

  • Using a BaaS - customization limitations

  • Building in macOS native - restrictive design limitations and neglected Windows and Linux users

  • Video Player customization was a challenge in the native macOS environment

  • Apple review process hindered app updates and certain features

  • Apple In-App purchase system was not scalable outside of the Apple ecosystem



Over a 4 month period we were able to design, develop, and ship our product addressing our biggest pain points. We decided to rebuild our app in Electron, opening up our product to Windows and Linux users. This allowed us to create a fast, highly customizable video player with “Theater Mode” that addressed users pain points of watching videos while learning. This also relinquished design limitations and allowed us to optimize on creating a clearer learning track, decreasing confusion for lesson locations and source code files, while increasing average session times. We were also able to build our own API for full customization and flexibility.