Devslopes 2.0 Electron App
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.
Optimizing the Learning Experience
We reassessed how our students were jumping back in to their lessons. Users had to go through 2 screens to continue their courses upon launch, while having to process advertisements for new courses, and possibly being distracted with other courses they were also enrolled in.
Version 1 Flow
To Continue Learning: Recently played menu item (Left), Recently played screen (Center), Video Player (Right)
Version 2 Layout
With the new layout, students will automatically pick up where they left off on their courses upon launch. No additional screens or clicks were needed to jump back into their courses.
They also had visibility to other courses in the left most panel, so switching context to a new course became secondary and less distracting.
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.
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.
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.
Quizzes & Tests
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.
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.