top of page

EXPLAIINED

WEBSITE DEMYSTIFYING AI FOR K–12 EDUCATORS

Timeline

July 2023 – May 2024

explaiined laptop_edited.png
botExplaiined_deepSea.png

Project Brief

The goal of this project was to create a resource that eased K-12 educators into AI. This was achieved through creating a free website with a user-friendly interface filled with consumable lessons, implementation strategies, room to collaborate, and other trusted resources.

Team

Erin Hughes

Sydney Hughes

(We split design + development duties.)

Tools

WordPress

Figma

Illustrator

Canva

OVERVIEW

The Challenge

Erin and I both have backgrounds in education and interests in emerging technologies like AI. We noticed that AI wasn’t being embraced in education the way we thought it should be. 

We learned that many educators don’t understand AI, aren’t getting professional development related to AI, and aren’t sure how to use it in their classrooms due to a lack of guidance from administrators.

The Solution

Explaiined: AI in Education is a free website that gets K-12 educators started with AI! 
Explaiined aims to demystify AI for educators and provide them with the tools and knowledge necessary to embrace AI in their classrooms. 
It has a user-friendly interface filled with consumable lessons, implementation strategies, room to collaborate, and other trusted resources. 

​

Explaiined can be viewed in its entirety here

PROCESS | Research

After our initial challenge was identified, we created a competitive analysis brief to identify shortcomings in the market. We used those insights to develop our user personas, value proposition, and key features storyboard. 

Our completed project brief can be found here

MVP

Over the span of a few days, we built an interactive prototype for a mobile-first website that introduces AI to educators via short lessons. This prototype also allowed us to explore our initial ideas for branding. 

PROCESS | Branding

We quickly landed on the the name Explaiined for the project. Not only would the double "i" allow us to have "AI in Ed" spelled out in our logo, it would also help differentiate us in search results and with brand recognition. We explored numerous iterations for our logo and our treatment of "AI in Ed."

As we worked on our logo, we simultaneously began building our site's overall identity. We wanted our site to look cool and futuristic but still approachable. Without much debate, we landed on a futuristic typeface, a fun wavy pattern, and some bright colors to pop on a dark background.

DESIGN SYSTEM

Ultimately, we created a comprehensive design system that includes our visual and editorial style, UI components, and a pattern library. We used this as a guide when building our site.

View as a PDF here.

PROCESS | Development

We concluded WordPress would be the most suitable platform to build our resource website on due to its ubiquity, robust support system, and ability to handle the content management and collaborative aspects of our site.

We realized our initial prototype overcomplicated our user flow, so we systematically crafted each section of site with the user experience in mind. 

PROCESS | Content

Creating the content was, by far, the most time-consuming part of this project. Since our goal was to ease educators into AI, we had to be sure that we weren’t overwhelming them with information. We were in the unique position of also learning about AI ourselves in real time, so we felt that we’d be a good judge of discerning the most important parts. We consulted with both Google and ChatGPT (we’re practicing what we’re preaching) then created our lessons.

We ended up with a total of 12 lessons across three categories: Intro to AI, AI in Education, and AI Ethics. We added in some interactive elements like flip cards and accordions to break up the text and make the lessons simple but engaging.

PROCESS | Content

We planned our activities for our Implement page in a similar manner. We searched out AI tools and resources that correlated to our lessons and developed six activities around them, including a ChatGPT-inspired chatbot!

The purpose of the activities is to really get our users using AI. We tell them all about how great and useful AI is on the Learn side, and on the Implement side, they get to see it in action!

USER TESTING

Once we completed our content and Explaiined’s main features, it was time to put our beta version of the site to the test! We developed a User Experience Research Plan to plot out what testing would look like for us.

Our goals were to determine if users think Explaiined:

  • Demystifies AI for educators without overwhelming them.

  • Demonstrates relevant ways for educators to implement AI in their professional lives.

  • Provides helpful AI tools and resources relevant to educators

View as a PDF here.

USER TESTING

We tested 8 current K-12 public school educators and took turns administering and observing. Each participant was given 10 tasks to complete and were evaluated on a pass/fail basis and think aloud protocol. We supplemented this task data with self-reported data gathered in pre- and post-test surveys, including the System Usability Scale.

image.png

UXRR

We compiled our results and analysis into a comprehensive User Experience Research Report. It confirmed we were on the right track overall with a 90.36% task completion rate and a SUS score of 90.6. It also pointed out some areas of the site we could improve upon. We categorized these into low, medium, and high-severity issues.

View as a PDF here.

PROCESS | Finishing Touches

We began work on Explaiined 1.0 by resolving all the issues revealed during testing.

We added hyperlinks in the text to any external resources our activities referenced or utilized. We improved our Glossary button's visibility by changing the color and adding a secondary button in the footer. 

image.png

We added two dropdown menus to our navigation (for Learn and Implement) to make users more aware of all content right from the get go.

image.png

We added in some copy that goes over why AI is directly relevant to educators and some key AI concepts that will help ease them into the world of AI even more. We’ve also removed some of the less pertinent parts of the lesson to make it more consumable, our primary goal.

PROCESS | Finishing Touches

Once we solved our users' primary issues, we moved to all of the small details.

We adjusted our site's responsiveness to ensure it looked great on all screen sizes. Simultaneously, we checked and double checked every page of the site. We corrected spelling, removed remnants of discarded iterations, and improved clarity through bolding and rephrasing.

image.png

RESULTS

Our ultimate goal was to ease educators into the world of AI and demonstrate is applicability to education through our website, Explaiined.

​

So, were we successful?

​

100% of all participants in user testing either agreed or strongly agreed with the post test survey statement, “I now have a better understanding of how AI can be used in education.”

​

That’s a big win in our book!

​

During testing, we got to see firsthand as educators made connections between our lessons and activities to their teaching practice.

Though definitive conclusions would require extensive testing, we certainly hope our users are taking what they learn on Explaiined and implementing it into their workflow.

The completed version of Explaiined can be viewed here.

Sydney Hughes

  • LinkedIn
  • Medium

©2023 by Sydney Hughes Portfolio. Proudly created with Wix.com

bottom of page