top of page

Onyx for Reconstruction

HeaderOpt1.png

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 the power of 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, balancing many responsibilities while delivering quality education.

Our hypothesis was that integrating AI into the product could create a lesson planner that 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 Reconstructions mission while being marketable to school districts across the US.

Goals2.png

What we achieved

We created an AI-powered educational tool that reduces planning time from over 4 hours to mere minutes! 

 

Teachers save time while improving education quality. Designed for accessibility, it supports educators of all tech skill levels. The product is 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.

Optimize Flow.png

Scroll down for a detailed look at the project and design process. Or click on each icon to browse a section.

searching.png
searching.png
Research
categories.png
categories.png
Synthesize
edit.png
edit.png
Design
flask.png
flask.png
Test
agile.png
agile.png
Iterate
target.png
target.png
Deliver

Research

categories (Pr).png
categories (M).png
edit (Pr).png
edit (M).png
flask (Pr).png
flask (M).png
agile (2).png
agile (1).png
target (Pr).png
target (M).png

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 and Administrator Survey

searching (M).png
searching (M).png

User Interviews & Observations

How I tackled User Interviews:

​

  • Created interview Script + Protocol.

  • Spoke with 7 teachers ranging in age, School District and technical proficiency.

  • Lead a workshop to go over and classify the resulting information.

A few interview takeaways:

​

  • Those who are not tech savvy want hand-holding through the process, do not want to use prompts.

  • Having AI within a trusted brand helps them feel more comfortable with the information.

  • There are a range of different lesson planning processes between school districts, Onyx must be flexible.

  • Teachers are always looking for something new to engage students. Onyx should incorporate various media and engagement methods into lesson plans

User Interviews p1.png

Looking at the Competition

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

  • Eduaide

  • MagicSchool

  • Copilot

  • TeachPlanet

  • 5MinuteLesson

​

We analyzed how each of these products handled User interactions and what they offer.

​

I'm happy to share the full analysis/presentation on request.

Key Takeaways

Combining what we know from our User Interviews and Market Comparative/Competitive Analysis. Lets summarize what this App must do to help our users most and compete in this market.

​

I led a workshop with project managers and developers to identify which features must be included and which are "nice to haves" or could be incorporated in a Phase 2 of the project.​

Synthesize

categories (M).png
categories (M).png
edit (Pr).png
edit (M).png
flask (Pr).png
flask (M).png
agile (2).png
agile (1).png
target (Pr).png
target (M).png

Multiple iterations of User-Flow were done 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. This meant we needed to not go too broad too fast and chose to only work with two subjects initially: ELA and Math. 

​

We decided to keep it simple for the first release and then add on branches in future phasing. 

We will make sure to build an adaptable, responsive and scalable app.

searching (Pr).png
searching (M).png

Phase 1

Keep it simple for all users

​

  • Simple 4 screen form for user input. A style all users are 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 and editability

​

  • More complex Dashboard with options for selecting individual activities in addition to lesson planning

  • Allow for adding additional information/requests via prompt

  • Option for direct editing

  • Adding more subjects

Phase 1 - User Flow

Phase 2 - Complex Dashboard, Optional prompt path

Design

searching (Pr).png
searching (M).png
categories (Pr).png
categories (M).png
edit (M).png
edit (M).png
flask (Pr).png
flask (M).png
agile (2).png
agile (1).png
target (Pr).png
target (M).png

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

​

I also created a full Design System for this project based on Reconstructions existing brand. You can check that our here: Onyx Design System​

Phase 1: Wireframes to Initial Prototype

Screen 8.png
Screen 7.png
Math - Page 1, Part 3 - Grade Level Selected.png
Math - Page 3, Part 4A - Subcategory dropdown open.png

Test

searching (Pr).png
searching (M).png
categories (Pr).png
categories (M).png
edit (Pr).png
edit (M).png
flask (M).png
flask (M).png
agile (2).png
agile (1).png
target (Pr).png
target (M).png

We did both Usability testing and an online survey between Phase 1 and 2 to make sure we were giving Users what they want and that the product was intuitive and easy to use. I am happy to give more information on this as requested.

Usability Testing and Survey

How I tackled Usability Testing:

​

  • Created aTesting Protocol asking each user to complete a set of tasks and talk me though their process.

  • Gaged individual reactions to the process as well as visual design.

  • Asked for any additional comments/questions.

Surveying educators and administrators:

​

  • Used Formstack create a survey 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 various additional feature options by importance to them.

Survey Responses2.png

Findings

​

  • Teachers love the product. 7 out of 8 of our interviewees rated Onyx at 4.5-5 stars out of five.

  • All of our 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 becoming integrated into the
system makes me even more happy about the
future and vision of this program."

Iterate

searching (Pr).png
searching (M).png
categories (Pr).png
categories (M).png
edit (Pr).png
edit (M).png
flask (Pr).png
flask (M).png
agile (1).png
agile (1).png
target (Pr).png
target (M).png

We went back to the drawing board with our testing and requests in hand to tweak the App and add features focusing on flexibility and customization.

Phase 2: Dashboard, Editing and Selection

Deliver

searching (Pr).png
searching (M).png
categories (Pr).png
categories (M).png
edit (Pr).png
edit (M).png
flask (Pr).png
flask (M).png
agile (2).png
agile (1).png
target (M).png
target (M).png

Time for hand off to developers. For this I first met with the development team to make sure we will be providing everything they need to make the design as clear as possible. 

​

  • Pixel Perfect Prototype​s 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 made sure that our product was a hit with Users.​

​

Working with Developers and learning how to constrain and work with AI tools was essential to designing Onyx. Although AI has amazing capabilities there are still issues with fact checking and making sure information is pulled from reliable sources. This is something that we all worked hard to achieve and was a limiting factor in increasing Onyx's capabilities and expanding the platform to more subjects.

​

An element that should have been looked at more intentionally from the beginning is how this product will be marketed to schools and what they are willing to pay for it. Adapting this product to other markets deserves more research to make it profitable.

Icons created by Freepik - Flaticon

bottom of page