The Iron Yard was the world's largest code school, offering immersive code education programs across 25 campuses in the US and UK. The unique needs of both students and instructors operating in an immersive environment and flipped-classroom format demanded a custom learning and classroom management system flexible enough to deliver dynamic curricula both online and in-person.
Our team architected the app and designed user flows and interface features using direct input from actual students and instructors.
Designing for two separate users in the same app is no small challenge, especially when each user is interacting with a large variety of content and separate analytics dashboards. Our greatest challenge, though, was also designing for the company's leadership team, who wanted to use data from the product to build quality assurance models and analyze current and past classroom efficacy.
Our design process relies on solving user flows ahead of time through research and mapping, which translate into prototypes built on a modular design system—the foundation of flexible, scalable interfaces.
The dashboard (left) displays the top-level stats for the student and their assigned course-work. The onboarding flow (right) steps students through choosing a programming focus.
Each class at The Iron Yard walked students along Learning Paths (left), a collection of Units (right) with a primary learning objective. Each Unit contained lessons and assessments.
Lessons included live coding exercises and a collapsible wayfinding sidebar to allow the student to jump between lessons easily.
Each Assessment contained multiple choice, short answer, and code Exercises. Code Exercises were run and evaluated in real-time on our remote cluster of headless virtual machines.
Additional views we worked on included instructor to student chat, one-off Units for students who wanted to learn a specific focus outside the scope of a Path, and homework feedback.
Maintaining consistency with The Iron Yard's brand aesthetic was very important to the leadership team, as they had invested significant time and money in establishing themselves as a respected education provider.
We worked with designers on their marketing team to understand the key elements of the brand and create a "sub-brand," providing our interface engineers much-needed flexiblity to design for more complex user goals.
As prototypes were assembled, we broke out each element as a stand-alone component of the design system.
The pages to the right are several of the prototypes we developed as both the brand and the design system came to life.
As The Iron Yard's curricula and learning platform became established and gained credibility, the leadership responded to marketplace demand for a non-classroom, self-paced online code education program.
Our team was presented with the challenge of extending the learning management app we'd built for teachers and students into a stand-alone, public-facing product. The result was Newline.
The new brand allowed our interface designers to experiment with new ways of interacting with students that were previously limited by The Iron Yard's branded system, even with the flexible sub-brand.
In building Newline, we completely re-thought our interface-building strategy. Rather than creating full prototypes and then disassembling them into components, we opted to build and style the components as part of the prototyping process, crafting a modular design system around key user interface elements. The resulting system allowed our team to rapidly build and test new interfaces and features as we collected feedback from users and observed their behavior in the app.
Newline provided users with a whole new learning experience, built on years of real student data and one of the sharpest, most flexible design systems we've seen.
The pages to the right are examples of an onboarding flow we built for a company using Newline to assess skillsets of new front-end developers on their team.