Web app to help teachers plan effective lessons in just 5 mins
Summary info for this project:
Lead Product Designer & Front End
3 months (to Beta Test)
- Adobe XD
- CSS Grid
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:
Subscription renewal rates had slowed to a trickle for the existing online tool and feedback surveys revealed a frustrated user-base.
- 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.
- 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
- 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
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.
I conducted, collated and presented to key stakeholders.
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! :)
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.
What matters most to our users:
- Speed of planning
- Ease of sharing
Design & Wireframe
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:
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.
I love CSS…
- CSS Grid
- Vue.js basics
- Print to pdf
- Git in the console
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
- 200+ users
- 4.6/5 average rating
- 99% accessible
- 90% mobile usage
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
More important than anything else, was discovering how much I love working on products that are aiming to help people.
Things I would do differently
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.
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!