Missed in School is a web application that educates young adults about unconventional topics that were insufficiently taught in school. It aims to deliver content in fun and interactive ways. Currently the website contains content on sex education. In the future, we would love to expand on sustainability and mental health.
While there is an abundance of information on the internet, often in long text wiki or blog formats, we noticed a lack of curated content for topics like sex education, sustainable living, and mental health. Upon further research, we found that people often seek out information online for sex education, as it is often insufficiently taught in school. Due to its controversial nature, there is also a lot of inaccurate information about sex education.
Missed in School is a web application made to educate young adults about unconventional topics that were poorly taught in school, starting with sex education. Missed in School aims to deliver content in fun and interactive ways. We implemented learning experience design strategies, including gamification, to create a motivating and pleasant educational experience.
As a group, we were motivated to include sex education in our website because of our own negative experiences, but we needed to get a bigger picture of why a website like ours may or may not be beneficial.
My findings:
I conducted a competitive analysis of four free sexual health resources. The criteria I judged them on was:
We wanted to get a better idea of how other people, especially our potential users, experienced sex education. I created a Google Forms survey and received 88 responses across 11 nationalities. Respondents were between ages 22-70. Here are some of my findings:
Did you have mandatory sex education in school?
What would you be interested in learning more about? (Multi-select)
Is there anything you learned later on in life that you wished you had learned in a sex education class earlier?
What are your frustrations with sex education (online and in school)?
These results confirmed our initial suspicions: many people are leaving school without sex education. When asked about their interests within sex education, people were most interested learning about healthy relationships, routine sexual health, and STDs. This allowed us to prioritize these topics over others.
We interviewed 14 people within our target audience across various demographic backgrounds to be as inclusive as possible. I created a list of questions about the sex education experience, improvements they wanted to see, and resources they used to learn for themselves. Instead of getting a yes/no answer for each person’s sex education experience, having one on one interviews allowed us to gain a more nuanced understanding of what people learned and what they missed out on. I created a persona spectrum, shown below, to display the responses to each person’s sex ed experience.
I organized the interview responses and insights into an affinity diagram using Figma, as shown below.
Some major insights from our interviews were:
Female interviewees from the Middle East, South Asia, and East Asia shared common experiences. The same could be said about the European men we interviewed. These were two journeys that stood out, so I created two separate user journey maps in FigJam for each of these personas. Because our user research is based on the current state of sex education, I created current-state journey maps. In the last row, I included stages of an aspirational user journey, but did not include further information as we have yet to collect that data.
A large source of inspiration for our group was the app Duo Lingo, which is notorious for its success in gamifying foreign language education. This app allows its users to set personal goals and earn badges. It also allows users to test out of the beginner lessons for each language. These inspired four features for our web app:
I also found that virtual agents can be used to improve the educational experience by creating the illusion of a social presence. This inspired us to create four educational guides that would appear on the website to deliver feedback and certain content through speech bubbles. Users can choose the guide they like the most to help them on their learning journey. Depending on the context, the guide would display one of three moods: happy, sad, or cheery. The illustrations, shown below, were created by my teammate, Hitanshi.
We also did research on e-learning theory to ensure we applied best practices to Missed in School. Below are some ways this research influenced our decisions:
We worked together as a group to create an initial sitemap of the website. This process was extremely collaborative. We worked on a whiteboard to sketch out our ideas.
After further discussion, we finalized the sitemap and I visualized the new one on FigJam, as seen below.
A similar process was followed for the login, signup, and dashboard wireframes. Low-fidelity wireframes were sketched out on a whiteboard first and then recreated on Figma.
On Figma, the wireframes were created for mobile and desktop in parallel because we wanted to ensure the website would be responsive and thus accessible on any device.
The other wireframes were created individually on Figma, iterated after feedback from my group mates. We used the comment feature on Figma to collaborate throughout the entire process, as seen below.
For the courses themselves, we wanted to be able to populate new content easily, but still offer some variation between slides, which would be loaded dynamically. My solution was to create four main layouts for the course content, consisting of three types of sections, as seen below. Each section was a React.js component, with content stored in our CMS, Strapi. This made for easy development later on.
Based on these layouts, I created a prototype of the first course with placeholder illustrations. Below are some examples of those slides.
In order to gage the usability and educational value of the course format, we tested it on three users through the platform Useberry. Our test consisted of the clickable prototype, a paper prototype, and 15 survey questions. Once users completed the clickable prototype of the course, they were instructed to notify one of us to be handed the paper prototype of the end-of-course game, as seen below. I opted for a paper prototype for the game as it would have been too complex to prototype on Figma.
For the first 12 survey questions, users had to rate a given statement form 1 (strongly disagree) to 5 (strongly agree). These were then followed by three short answer questions. The survey began with these three questions about the learning experience:
We then asked 9 questions from the System Usability Scale (SUS) to measure the usability of the course format. The SUS questionnaire consists of 10 questions about the usability of a system; however, I left out one question (#5) that did not fit the prototype we were testing. I removed the question and adjusted the score in accordance with the advice from Measuring U. I also replaced the word “system” with “learning format” in all the SUS questions, as I thought the original wording may cause confusion in this context.
Results:
All our users rated questions #1 and #2 with a 5 (strongly agree). Question #3 received two scores of 5 and one of 3. Based on the responses to the SUS questions, our SUS score was 90.7, which is well above average. Below is some of the feedback we got from the short answer questions.
Moving forward, we decided to increase the number of in-course quizzes and made all quizzes and games optional. This way, those who get overwhelmed by testing their knowledge can still enjoy our web app, and those who benefit from testing their knowledge can optimize their learning.
This website was our final project for our Master’s degree, which meant we had to present it at a program-wide showcase. This gave us the opportunity to gather real-time user insights. As visitors tried our website, we carefully observed their behavior and asked for feedback afterwards.
Our developer had her laptop setup on the corner, and we were able to make immediate changes as we gathered more observations. Here are a few changes we made:
One piece of feedback that we plan to implement in the future is adding downloadable PDF versions of the courses upon completion. This suggestion was made by a member of the university’s inclusive team after we asked them to check that we met all accessibility standards.
We're live at missedinschool.com! The guest login option is still in development, but if you want to check it out, you can create an account or use the following login:
email: katsguest@gmail.com
password: 12345678
Here's a sneak peak of the website:
Choose Your Guide:
Upon signing up, users are prompted to choose a guide. On the left, we listed each guide with their name, description and images of their other moods.
Learner's Assessment:
After choosing a guide, users can test their sex ed knowledge to get customized recommendations for courses to take. Each question relates to a course on the site. Users can also exit the assessment at any time or skip the recommendations.
Taking a course:
As users progress through a course, their progress is stored and displayed on the panel on the left side (or hamburger menu on mobile). Throughout the course, there are quizzes to test their knowledge.
Dashboard:
Each topic has its own custom dashboard where users can see their stats and courses. Right now, only the sex education dashboard is available, and the stats are just demos, currently in development.
Explore Games:
Relevant games are suggested at the end of each course, but they can also be found in the explore games tab. Storing them here instead of having the built into the course allows them to be replayed easily for those who enjoy then or option for those who don't.
