Devslopes 2.0 App Overview

Electron App on Macbook Pro.png
 
 

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.

 
 
 

ROLE

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.

 

Challenges

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.

 

OBJECTIVES

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)

Recently Played V1 Bad X.png
 

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.

New Layout V2 CHeckmark.png
 
 
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

 

Outcome

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.