Bootcamp

Currently working on the future of online education by making learning science easy.

Role

Design Lead

Timeline

May 2020 — Current

Project Context

As of April 2020, I have transitioned into the design lead role for an education company called Bootcamp. For the last 7 years, their flagship product DAT Bootcamp has dominated the market for study tools that help pre-dental students study for the Dental Admission Test (DAT).

My role, is to come in and create a new and improved Bootcamp that can allow us to scale beyond the DAT and begin owning more of the pre-med course track.

For starters, we've already built and released a beta version of Anatomy Bootcamp which is gaining traction literally all over the world. However, what we are really doing is designing a modular framework that can allow us to spin up numerous other pre-med course platforms and quickly. It's a unique challenge because each design decision that we have to make has to work for Anatomy, but also be flexible enough to not pigeon-hole hole us for future Bootcamps like Chemistry Bootcamp which is being rolled out for the 2020 Spring Semester.

Bootcamp Goals

When thinking about how we want to design for pre-med students, we use a few core values to dictate exactly how we bring these platforms to life. Thankfully, we have years of feedback and experience to draw from the success of DAT Bootcamp when thinking about what works and what doesn't work in a science-based online learning platform.

Bootcamps need to be flexible

This way, when we spend time investing in Anatomy Bootcamp, we can reap those benefits for future Bootcamp platforms as well. Each module and each component is designed to be re-used, customized, and to serve as a foundation for future features.

Bootcamps need to be fun

Studying for pre-med exams is just about one of the most stressful things a human being can put themselves through. So we don't want our platforms to mimic the branding of a pre-med world. We want them to be full of energy and even playful to an extent. One of the ways we do this is through our usage of colors.

Bootcamps need to honor the student's mental space

Switching between classrooms in a Bootcamp is a big deal for students. So we wanted to design the platform in a way where each classroom (and the corresponding chapters and lessons) were themed so that it really felt as if you were leaving one physical space and entering the next when you switch from something like Biology to something like Organic Chemistry.

Building a Design Language

One of the first challenges when I began working at Bootcamp was to build out a system of components that we could use in a way that would make our overall engineering process more efficient. So in week one I set the groundwork for an atomic design system that we can continue to build on as we scale the feature sets associated with our Bootcamp framework.

Get a glimpse

We are still very early in the process, but here's a few snapshots of what we are working on at the moment. Something I'm quite proud of is that all of the .gifs below are taken straight out of production (not Figma prototypes). Working at Bootcamp has allowed me to contribute a lot on the frontend. I'm not at the point where I'd refer to myself as a UI engineer yet 😅 but I definitely take pride in how closely products matches Figma.

Journeying through the core pages of the platform

Quiz/Review Mode

Creating a new side-by-side quiz mode so that students can easily zoom in and out of anatomy images to identify the correct structures. We even developed a system where student heroes could saved default thumbnails when uploading pictures so that we could preset the zoom percentage for each image depending on the aspect ratio. Once students have taken a quiz. they are able to review each question and mark it as "reviewing" "learning" or "mastered" which we then use to create a tailored study experience for them. Throughout the product creation process we constantly iterate on Figma prototypes to test different interactions, functionality, etc.

As you can see I'm not great at examining the brain 😄

Video players

Most recently, we've been working on a bunch of video lesson functionality for Chemistry Bootcamp. We're still very early stags but it's coming along nicely! Each chapter has a video table of contents that students can use to dive into a lesson or even mark lessons as "complete." We also highlight the next lesson so that there's a bit of a "next episode" feel. Once a lesson is clicked on, we open up a full-screen viewing experience where students can navigate within the chapter and even take bite-sized quizzes based on the material.

Landing Pages

Another fun part of this project is that I've been able to create a landing page template and set of components in React for each Bootcamp that we've released so far. Up to this point, all websites that I have launched have been using Webflow, so this was definitely a fun challenge and I feel like I learned a lot (especially about how to leverage styled-components and create theme overrides). Here's a little .gif of the current Chemistry Bootcamp landing page 👇

Much more to come for this one! We're really excited about the early traction and are racing to increase our feature offerings!

back arrow pointing left

Say Hello.

Questions, thoughts, ideas... I love connecting with new people so don’t hesitate to reach out.

👍
Oops! Something went wrong while submitting the form.

Connect.

Let's do the social things.

Made with
in Denver