Projects

The 5 Minute Lesson Plan

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

Summary info for this project:

iPhone screen displaying a digital 5 minute lesson plan

Project Background

The Brief

Transform the 5 minute lesson plan template into a mobile-friendly digital tool

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:

3 iterations of the 5 minute lesson plan over the years

The very busy plan dashboard inside the previous version of the tool

The customisable template inside the previous version of the tool

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

Goals & Requirements

Fix the problems from previous versions: Make it simple, affordable and responsive

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

Essentials

  • Stand-alone web-based app
  • Works on mobiles, tablets and desktop
  • Users can download a one-page pdf of their lesson plan
  • 5 minutes to complete a plan

Desirables

  • New template but recognisable
  • Include best practice guidance
  • Not specific to UK education framework
  • Free version + subscription extras

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!

My Role: Project Lead

Despite my expansive roles on this one, it really was a team effort. I had the pleasure of working closely with a very talented developer called Ryan Simpson throughout this project. We also had help along the way from the Angel Solutions team - you know who you are.

More about my role

Product Design

I was the only designer. After initial sign-off, I held regular design review sessions with the wider design team, which was invaluable in refining and improving the UI.

User Research

I conducted, collated and presented to key stakeholders.

Front End

I wrote all CSS, most HTML and some JavaScript in Vue.js templates.

Tech Stack Decisions

Alongside Ryan, we chose to use Vue.js with webpack on the front end

Note: Other talented folk handled all the design, development and content for the marketing website. Kudos! :)

Step-by-step process

Research

1-2 weeks

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
— A user persona statement

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.

What matters most to our users:

  • Speed of planning
  • Ease of sharing

Design & Wireframe

4 weeks

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:

Desktop wireframe of lesson plan screen

Mobile wireframe of lesson plan screen

An early lo-fi design for lesson plan screen, with alternate layout and small icons on boxes

A higher fidelity design of lesson plan screen, very similar to the end product in layout

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:

Simple lesson plan 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.

Build

2 months (alongside other projects)

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.

I love CSS…

This was a fantastic opportunity for me to solidify and build on my front end knowledge. I pushed myself to contribute to writing and debugging JavaScript, despite having very little experience, and tried to learn as much as I could from others.

Additionally, this was my first experience using a modern JavaScript framework and I was delighted with it!

Key learnings:

  • CSS Grid
  • Vue.js basics
  • Print to pdf
  • Git in the console

Beta Test

4 months (in length)

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:

Feedback results showing 4.6/5 stars on average

Beta summary:

  • 200+ users
  • 4.6/5 average rating
  • 99% accessible
  • 90% mobile usage

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.

Review & learn

Ongoing

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

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

More wireframes

I started designing some screens in the browser. Not a great idea. Even basic wireframes would have saved me time here.

Confirm an MVP Feature list

Some mis-communication with a decision-maker meant we lost time developing features that weren't needed.

Design filters

I should have gone with my gut and built filters into the lesson plan index to make them easier to find. In fact, I would design that whole screen differently!