We partnered with Cisco to build a browser-based IT lab for interacting with real devices.
Like a Train Needs a Track
Cisco had all the content at their disposal, but lacked the three components of a good training platform: content delivery, user progress tracking, and assessments graded in real time. Cisco looked to Envy Labs to complete this picture.
Near, Far, Wherever You Are
Code School introduced a new way to learn technology by serving a real world coding environment in a browser. When the Cisco team saw Code School, they wanted the same approach so their IT professionals could learn on real Cisco devices remotely from anywhere on Earth.
Walk This Way
Course designers always have a meticulous plan for presenting course content in a specific order, but that doesn’t always translate to users. Depending on the platform design, that can either seem like a rewarding journey through knowledge, or a linear barrage of different concepts one after another. To achieve the former, we explored different options before landing on a contextual sidebar that reacted to the user’s current location within the course.
A Veritable Cornucopia
Cisco’s training is much more involved than mere training videos. In addition to video and long-format text, courses also comprise reference notes, embeddable third-party content, downloadable media, and interactive challenges and assessments. A wide array of content types are needed on the user side, presented as distraction-free as possible.
Sense of Accomplishment
To gamify the courses, we crafted a handful of themed badges that are awarded to users to keep their motivation brimming at milestones along the way to their ultimate goal.
Are You Watching Closely?
In order for users to interact with real Cisco devices, the lab console was a critical piece to the learning experience. Not only was the design important, but signaling the user that something had changed was even more important in order to not distract the user from the learning experience. We bridged the gap between normal content and console-based content with some simple animations.
Flexing Those Interfaces
When the console is expanded, it becomes difficult to resize the content into the small area of a tablet screen. In order to accommodate these mobile users, we had to completely rearrange the console interface using the latest responsive flexbox techniques.
Ratchets Sold Separately
During interactive console challenges, Cisco wanted the ability to rearrange the device windows as they see fit. Rather than reinvent the wheel and develop our own (potentially-buggy) window management system, we found it better to use true OS window management by connecting to an actual machine via WebSocket.
Instead of running console challenges against emulators, Cisco wanted to allow users to interact with real devices so that they can explore other challenge solutions as desired instead of being tied to a specific task list. In order to do this, our developers networked the interface to allow users to control devices at Cisco headquarters through a command line or VNC.
Training, Sans Classroom
With an on-brand design system and a course delivery platform unrivaled by Cisco’s previous offerings, we paved the way for 5 years (and counting) of continual content expansion. As their needs change, so does the technology—features are continually being added and revised to provide the best learning experience possible.
We redesigned an online platform that teaches and improves typing skills to students of all ages.