AI / EdTech/2024/Case study

Onyx — AI Lesson Planning

We created a new product under the Reconstruction brand using AI to generate lesson plans for teachers — reducing a task that can take 4 hours down to minutes.

Project details

Using AI to aid teachers in lesson planning.

Client: Reconstruction — a private Ed-Tech company developing and teaching K–12 curriculum throughout US school districts, with an estimated annual revenue of over $10M.
Role: Design Lead, User Interface Designer
Duration: 9 months
Tools: Figma · Photoshop · Illustrator

My role

Led design of an intuitive web application employing AI for lesson plan creation.
Defined UX & UI requirements and strategy, collaborating with stakeholders and engineers.
Designed and executed both quantitative and qualitative user research, optimizing product usability and engagement.
Collaborated with cross-functional teams including developers and stakeholders.

The problem

Teachers are pressed for time.

Educators balance many responsibilities while delivering quality education. Our hypothesis was that integrating AI into the product could create a lesson planner teachers would adopt, save them time, and serve as a unique differentiator — making our product more compelling and increasing its appeal to school districts.

The tool must improve education quality and remain accessible to all educators, including those with limited tech skills. Onyx must also align with Reconstruction's mission while being marketable to school districts across the US.

What we achieved

From 4+ hours to mere minutes.

We created an AI-powered educational tool that reduces planning time from over four hours to mere minutes. Teachers save time while improving education quality. Designed for accessibility, it supports educators of all tech skill levels — and is fully editable and customizable.

The app is marketable to school districts and adaptable across the U.S., addressing the diverse needs of educators and students nationwide.

Onyx lesson plan creation steps — Optimized flow

Scroll for a detailed look at the project and design process — or jump to a section.

01 — Research

Listening before designing.

For this app to function seamlessly and achieve stakeholder goals, we needed to dive into multiple areas of research:

User Interviews with Educators
Comparative / Competitive Analysis
Educator & Administrator Survey

User interviews & observations

How I tackled it:

Created an interview script and protocol.
Spoke with 7 teachers, ranging in age, school district and technical proficiency.
Led a workshop to classify the resulting information.

A few takeaways:

Less tech-savvy teachers want hand-holding — they don't want to write prompts.
Having AI inside a trusted brand makes them more comfortable with the information.
Lesson planning processes vary across districts. Onyx must be flexible.
Teachers are always looking for new ways to engage students. Onyx should incorporate varied media and engagement methods.

User interview synthesis board — Interview synthesis

Looking at the competition

I researched comparable existing products to see what they offer and how we could stand out.

Eduaide
MagicSchool
Copilot
TeachPlanet
5MinuteLesson

We analyzed how each handled user interactions and what they offered. Happy to share the full analysis on request.

Key takeaways

Combining what we learned from interviews and the competitive analysis, I led a workshop with project managers and developers to identify must-haves vs. "nice-to-haves" we could push to a Phase 2 release.

Feature prioritization board — Feature prioritization

02 — Synthesize

From insights to a phased plan.

Multiple iterations of the user-flow happened with input from user testing, stakeholders and development. We also had to figure out how to structure the framework so the AI was only pulling from reputable sources — meaning we couldn't go too broad too fast. We chose to launch with two subjects: ELA and Math, then expand. Adaptable, responsive, and scalable from day one.

Phase 1

Keep it simple for all users.

Simple 4-screen form for user input — a style every user is comfortable with.
Option for prompt or suggestion-based editing after initial screens.
Filterable catalog of created lessons.
ELA and Math only.

Phase 2

Add layers of complexity & editability.

More complex dashboard with options for selecting individual activities.
Allow adding extra information / requests via prompt.
Option for direct editing.
Adding more subjects.

Phase 2 dashboard and prompt path — Phase 2 — Complex dashboard, optional prompt path

03 — Design

Wireframes to prototype.

Initial wireframes were created and developed into a testable Figma prototype.

I also created a full design system for this project based on Reconstruction's existing brand — see the Onyx Design System.

Phase 1 — Wireframes to initial prototype

04 — Test

Usability testing & survey.

Between Phase 1 and Phase 2 we did both usability testing and an online survey to make sure we were giving users what they want and that the product was intuitive and easy to use.

How I tackled testing

Created a testing protocol asking each user to complete a set of tasks and talk me through their process.
Gauged individual reactions to both the process and visual design.
Asked for any additional comments or questions.

Usability testing artifacts — Usability testing

Surveying educators & administrators

Used Formstack to send out a wider net and gain more insight.
Asked users to rate their interest in Onyx and what they would pay for such a service.
Asked users to rank additional feature options by importance.

Findings

Teachers love the product. 7 out of 8 interviewees rated Onyx 4.5–5 stars out of five.

All testers were able to complete the requested tasks and found Onyx easy to use.

Specific feature requests are in line with what we are preparing for Phase 2 — everyone wants more customization.

Some tweaks will be made to phrasing for clarity.

"I was impressed, elated and excited. To have an A.I. powered tool integrated into the system makes me even more happy about the future and vision of this program."
— Tester quote

05 — Iterate

Phase 2 — Dashboard, editing & selection.

We went back to the drawing board with our testing and feature requests in hand to refine the app and add features focused on flexibility and customization.

Editing & selection detail — Editing & selection

06 — Deliver

Hand-off & next steps.

Time for hand-off to developers. I first met with the development team to make sure we'd be providing everything they needed to make the design as clear as possible.

Pixel-perfect prototypes with annotations.
Design adjustments for a fully responsive transition to mobile.
Presentation images for marketing and stakeholders.
Recommendations for future research and development.

Next steps

Another round of usability testing for all new features.
Adding additional subjects beyond Math and ELA.
Expanding beyond culturally responsive content and offering overall lesson planning.

Reflecting on the process

Thorough research into what teachers are looking for in a lesson plan ensured that our product was a hit with users.

Working with developers and learning how to constrain and work with AI tools was essential. Although AI has amazing capabilities there are still issues with fact-checking and ensuring information is pulled from reliable sources — something we all worked hard to achieve, and a limiting factor when expanding the platform to more subjects.

One element that should have been examined more intentionally from the start: how this product would be marketed to schools and what they'd be willing to pay. Adapting Onyx to other markets deserves more research to make it profitable.

Icons originally created by Freepik — Flaticon.

Want the full case study, prototype walk-through or research deck?

Let's create together

Next project