School Page & Group Onboarding Flow

When designing the main schools page in Common Curriculum, we landed on a single screen where principals can see all of their teachers, neatly organized by team. Clicking on a planbook takes the user to the current week of that teachers’ lesson plans.

This page is very useful when a principal wants to leave comments on a teacher’s plans, or when a teacher wants to find a collaborator’s planbook to get inspiration for their next lesson!

While it may seem like a power-user feature, we heard the question “how can I see my teacher/colleague/mentor’s lessons from last year” over and over during user research. So, we created a school year picker at the top of the page. That way it would be incredibly simple for principals and teachers to see what they or their colleagues had planned in years past.

Behind the scenes, to ship this feature, we had to implement an entire school year system to make multiple aspects of the school page (including this picker) work the way our users wanted it to.

Lesson planning at schools is fundamentally based around teams. Because of that, I wanted to make it as easy as possible to create a team and add teachers to it.

This slide-out design focuses the user’s attention on just the steps of creating a team without losing context of where they are in the app (they’re still on the school page).

When you first create a school, you’re dropped on the Add Teachers page, which lets you easily manage who's in your school, whether or not their account is upgraded, which teams they're on, and how their planbooks are shared with the school, all of which were concerns most principals voiced during the research phase of this project.

We could have broken these functions out into separate pages, but it turned out that principals and school admins didn’t think of them as separate steps. They thought of them as a sort of collective task: “add my teachers and make sure everything is set up right”.

This was a complex page to design since principals need to be able to see so many settings in one place. Ultimately, I settled on a table layout as a way to unify all the actions and information a principal could take on any particular teacher in one place.

An average school that uses Common Curriculum will have between 20-35 teachers and 7-15 teams. While the Add Teachers page excels at helping principals see the individual settings for any particular teacher and then changing them, it doesn’t do a great job of showing principals what their school will look like once it’s been fully set up, i.e. what teams have they created and are the correct teachers invited to the correct teams?

The Create Teams page accomplishes this goal, allowing principals to visualize the final setup of their school without having to exit and then reenter the onboarding flow.

Before we built the Cc for Schools page it had become clear in interviews with principals and other institutional customers that one of the main selling points of Common Curriculum was the ability to get their teachers on the same page, i.e. to help achieve uniformity in how lesson plans look at their school while also giving their teachers an intuitive planning app that responds to their needs.

So, during this process I advocated that we build a new feature: shared lesson planning templates. As any teacher will tell you, creating a template for your lesson plans is one of the best ways to cut down on busy work and save time. And, for years, Cc has had one of the best lesson template systems in the industry.

But, there wasn’t any way for a principal to create one or more templates that they want the teachers at their school to use. Shared lesson templates allow principals to do just that: any template a principal creates on this page will be automatically available to their teachers when they set up their lesson planbooks.

Down to brass tacks! Every principal that purchases Common Curriculum for their school needs to know a few things:

How much is their school going to cost? What step of the purchasing process are they in? How much time do they have left to complete that purchasing step? How do they add extra teacher seats and how much will that cost? How do they get an invoice or quote for their accounts receivable department? How much did Cc cost them in previous years, and how do they find their old invoices for record keeping purposes?

Whew! Overwhelming, isn’t it? School districts have one of the most byzantine purchasing processes I’ve ever seen, and it doesn’t make life easier for principals.

Because of all that, this screen was a doozy to design and build, and the backend code behind it is quit complex. Our app has to move each school through multiple purchasing states (e.g. “trialing”, “awaiting-payment”, “expired”, etc), and those states trigger both automated email warnings and banner notifications on this screen and the rest of the school page.

Moreover I built this feature so that it integrates with our accounting system, Xero. When our office manager deposits a check and reconciles it to an invoice, the school associated with that invoice is automatically marked as paid up and the principal is notified (provided they have no other outstanding invoices).

Finally, if a principal has already created an invoice, and want to add more teachers, our app will automatically do do the math for them and apply an appropriate discount when they create additional invoices, so that their total cost for the year is what they would have paid had they done so with one PO.