Web app to help teachers plan effective lessons in just 5 mins

Project Background

In summer 2018, I was tasked with completely re-designing an existing online lesson planning tool for teachers based around the hugely popular 5 Minute Lesson Plan Word document template.

Several attempts had been made to digitize the 5 Minute Lesson Plan template before (from 2014 onwards). However, business needs at the time had led to it being incorporated into another app that was primarily used by school managers (not teachers).

This led to a confusing user journey where teachers would subscribe under one branded website but had to log in via a separate (and potentially unknown) product's website.

Previous versions of the 5 Minute lesson Plan:

Subscription renewal rates had slowed to a trickle for the existing online tool and feedback surveys revealed a frustrated user-base.

Pain points:

• A confusing sign-up / login journey
• Complicated template options
• Confusing 'community sharing' feature
• Didn't work on mobile devices
• More expensive than other single-purpose tools for teachers

In consultation with stakeholders, I narrowed down a list of requirements.

It was important to keep TeacherToolkit, the 5 Minute Lesson Plan's founder happy, especially during the design phase. Existing users also needed to be kept engaged if we were to keep them as customers in future.

One more consideration: Angel Solutions was footing the whole bill for this build and offering a generous commission back to the founder once the product went live. We had to keep costs in mind!

Step-by-step process

Although no budget was assigned for research, it's too essential to skip! I used quick Typeform surveys to get some design steer from teachers in our target user-base, both existing and potential customers.

I want a template that's easy to follow, and easy to share with my observer or colleagues

From the research, I was able to crystalise the problems we were trying to solve and understand more about the lesson planning process. I even read the Mark, Plan Teach book by Teacher Toolkit to better understand those we were trying to help.

I prioritised designing the lesson plan template and how it would look on different devices, as the whole product hinged on that.

Some early designs:

In retrospect, I should have spent more time at this stage mapping out the user journeys and nailing down the feature list with the product owners.

As it was, we ended up starting the build with features not yet agreed.

Basic journey map:

Research continued…

Throughout this design phase, I sought out design feedback as much as possible, kept surveying users, and ran impromptu focus groups whenever teachers and education leaders were visiting the office.

Ryan and I chose to use Vue.js as the backbone to this project, for speed and to give it the potential to become a progressive web app with service workers (for offline access) at a later date.

My primary role was to write mobile-first modular scss using the BEM naming framework (so the stylesheet would feel similar to our other products when colleagues needed to work on it), end embracing modern CSS techniques.

For example, the lesson plan template lended itself easily to CSS Grid. Anything that doesn't support CSS Grid, like older Internet Explorer, received a flexbox fallback.

In October 2018, we launched a free version of the app to our beta group and set about getting their feedback while continuing to design and develop features, including:

• Subscription & payment screens
• Free trial and renewal reminders
• Marketing automated email strategies
• System messages and help

Beta feedback:

Full launch

The new 5 Minute Lesson Plan launched in Feb 2019, gained 4000+ paying subscribers within the first 2 months and maintained an impressive 5-star review rating throughout that time.

More important than anything else, was discovering how much I love working on products that are aiming to help people.

On a practical level, I learnt so much from this project. From design, to teamwork, to presentation skills, to CSS and JavaScript… I can confidently say my skills improved in every area.

Things I would do differently