Learning Environment on Mobile Devices

There’s a pretty good chance that right now you’re reading our blog on a mobile device like your phone or tablet — statistics show that over half of all web traffic comes from mobile devices. Next time you’re looking for something to scroll, head over to Codecademy. We recently updated our platform so that now you can work on our courses and paths from any mobile device.

Irene Robb, Front-End Software Engineer at Codecademy, was the technical lead who helped bring our learning environment (the interactive platform you see when taking courses) to mobile. She collaborated with a couple other engineers, a Product Manager, a Product Designer, and an Engineering Manager for this two-month project. The goal was to “allow users to learn on our website from anywhere,” Irene says.

We know that learners are busy and may not have time to sit down at a computer to learn to code. With the improved mobile experience, you can access the code editor, lessons, and everything else you need to learn on the go. (Good to know: This is separate from our Codecademy Go app, which is meant for reviewing practice packs and doing flashcard drills.)

These updates aren’t solely about convenience, they also improve accessibility, explains Jerimie Lee, Senior Product Designer at Codecademy who worked on the mobile learning environment. Making sure that our course material is viewable on devices of all sizes helps folks who use screen magnification, or those who simply use smaller laptop screens, he says. Read on to learn how Irene, Jerimie, and the rest of our technical team made our learning environment mobile-friendly in a web browser of any size.

The project: Allow users to learn on our website on any mobile device anywhere.

• Write a proof of concept validating the feasibility or potential of the idea
• Re-design components layouts to accommodate a smaller screen
• Turn plans into tickets and complete them

Investigation and roadmapping

Jerimie: “Neil Daftary [Engineering Manager], Dónal Ó Dubhthaigh [Product Manager], and I wanted to improve our learners’ ability to continue learning from anywhere. We spent some time last year putting together a case for this work, citing how many learners already try to access our content on mobile devices and requests from learners to enable this capability.

I’ve previously worked on a project that expanded a point-of-sale system’s ability to be able to take payments via mobile devices to great success and hope that this will have a similar impact for our learners.”

Irene: “I assigned myself the original ticket to start the investigations into the technical work for this. This project seemed right in my wheelhouse since it was primarily front-end. As a Front-end Engineer, I do a lot of responsive web design, so it’s similar to other stuff I have worked on in that aspect.

The planning process for me as the technical lead involved taking Jerimie’s amazing designs and making a document and proof of concept on how this could be accomplished. I created a step-by-step process for accomplishing things in order in the document. Then, I created tickets based on those steps and marked specific tickets as able to be worked on simultaneously. Staying focused to meet deadlines involved a lot of watching for scope creep and identifying what are blocking and non-blocking bugs.”

Implementation

Irene: “The simplest way to describe how we did this technically is that we created new components layouts using as much existing code as possible for project and lesson content items that will show when the user’s screen is small. A typical day for me as an engineer consisted of completing tickets and discussing with the team if any problems come up. Also, reviewing other people’s work.”

Troubleshooting

Irene: “The most challenging part of the project for me was making sure that we were not breaking any of the existing learning environment code. There is a lot of moving parts, code, and different teams that work in the learning environment.

My biggest a-ha moment was finally getting my proof of concept to work. Although proof of concept is a ‘hacky’ way of proving something would work, it was still exciting to see it happen for the first time. The most rewarding was seeing the product go out to users! I’m very excited for more people to try it out and hear back from users.”

Ship

Irene: “It felt awesome seeing the mobile learning environment for the first time. It was a huge effort and project, and I was so happy to see it finally launch. We’ve gotten lots of great feedback so far from my peers; I think everyone is really excited for this to finally go out.”

Jerimie: “I can’t wait to hear feedback from our learners about how they’re using this and how we can continue to make it easier to learn these skills on the go.”

Retrospective

Irene: “There’s a lot that I learned on this project — one of the great things about being an engineer is that you are always learning. But if I had to pick one thing, I would say I learned how to better take a huge complex problem and break it down into smaller more manageable tasks.”

Snaps

Irene: “Big snaps to Jerimie Lee for designs, and to the engineers who worked on this and also helped test and review: Alex Onate, Sylvana Santos, Julie Jones, and Neil Daftary. And also, Dónal Ó Dubhthaigh!”