EXPLAIINED
WEBSITE DEMYSTIFYING AI FOR K–12 EDUCATORS
Timeline
July 2023 – May 2024


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.

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.

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.

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.

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.