Our Process

From ideation to implementation

Domain

Our Domain is Sex Education, focused on making sexual education inclusive to suit the needs of all types of students, especially students within the LGBTQ+ community. Sex Education is required in all North American schools; the majority of the education being provided during highschool. Although sex education is an important topic required in the school curriculum, it is still mostly catered to heterosexual relationships/interactions.

Although necessary, schools can provide a biased form of education which can affect the quality of education provided to the youth. Part of the research looked into current school curriculums around sex education and although there seemed to be more updated information on what teachers should teach students, there was still a lack of acknowledgement of the LGBTQ+ community. As such, we felt that sex education should start with acknowledging different student’s needs, along with providing a comfortable space for individuals to be who they are without judgement. We also wanted to provide more awareness to topics around sexual identity and orientation to avoid people making assumptions.

Opportunities

Through our research, we found that in general young individuals learn about sex education through online resources that may not be fully accurate and sufficient. Therefore, it is crucial to provide a safe space for these individuals to receive the proper information and support around the topic of sex.

We also found that the current sexual education curriculum in many countries, such as Canada and the USA, lack information that is tailored to fit the needs of LGBTQ+ youth.

Research findings - 68.4% learned about sexual health and gender identity online. 26.3% felt that there was not enough resources and support about their sexual health and identity.
68.4% learned about sexual health and gender identity online, while 26.3% felt that there were not enough resources and support about their sexual health and identity.

Goals

Inclusive sexual education should include information for all students about sexual orientation and gender identity and be designed with the needs of LGBTQ students. It also should include depictions of LGBTQ people and same-sex relationships in a positive way and promote STI and STD prevention method. The most important part is that avoid making assumptions on any sexual orientation and identities.

  1. Bridge the gap between underrepresented groups and sexual education
  2. Create a personal and private learning experience for all learners
  3. Encourage individuals to feel more comfortable about talking about sex and sexual health
  4. Provide valuable and reliable sources for users to learn

Personas

Our target audience are teenagers. In particular teenagers like our persona Aleks who is a part of the LGBTQ+ community. These personas informed our overall participants for our research and user testing that was done.

Primary Persona
Primary Persona #1 - Wants to learn about homosexuality intimacy, receive support, and connect with the LGBTQ community.
Stakeholder Persona
Stakeholder Persona #2 - Wants to equip his kids with the best resources at their disposal, so they can make well informed decisions in the future.

Because our applications primary goal is to educate the youth we did incorporate more working features within that scope to help us better understand how we could better refine our final product with regard to achieving our main goal. As a result we ended up making the parents persona as our secondary persona as they have more of an involvment with how their teenager learns about sex education.

In addition, we set out to create a journey map in order to map out the experience our target audience would experience. This journey map explores the app's learning modules and plays through it's first lesson.

Experience map for primary persona
Experience map for our primary persona, Aleks.

Initial Wireframes

Initial Wireframe Sketches
Initial wireframe sketches
Initial Wireframe - Home screen Initial Wireframe - Community screen Initial Wireframe - Profile screen Initial Wireframe - Module overview screen Initial Wireframe - Quiz question screen Initial Wireframe - Quiz completion screen

Initial Wireflows

Initial wireflow
Initial wireflow - answering quiz questions
Initial wireflow
Initial wireflow - three main screens

Styleguide

Based on our target audience, we wanted to incorporate an overall friendly tone within our app. Therefore, our font and colour choices were chosen with this criteria in mind.

Styleguide

User Testing

A total of 8 user tests were conducted to test participants overall experience and opinion of the app. Of this group, 2 users were aged between 12 and 17, 4 were aged 18+, and 2 were parents aged 40+. Each of these individuals were asked to test the app on their mobile phone and complete a series of tasks. When these tasks were completed, participants were then asked to explore the app without any guidance. Throughout the test, participants were encouraged to voice any questions or concerns they may have had about the app.

Some of the issues brought up in our usability testing included credibility concerns, lack of indication of the upcoming quiz, concerns about the discover page, and purpose of the badges and reward system.

After completing our usability testing and reviewing the feedback, our team aimed to address these issues by:

  1. Increase our credibility amongst our audience by affiliating with a credible sexual education resource
  2. Provide more insight to the purpose of the Discover Page, and refine the overall tone of the page
  3. Provide clarity on the functionality of the reward systems and explain the purpose of the badges and how to achieve them
  4. Establish a clear workflow within our learning modules and our method of navigation for our tutorial screens flow more apparent to the users

Final Mockups

Final Mockup - Home screen Final Mockup - Profile screen Final Mockup - Discover screen Final Mockup - Games screen Final Mockup - Module overview screen Final Mockup - Edit avatar screen

Final Interactive Prototype

Our final interactive prototype implemented in Figma (animations may not load appropriately due to file size).

Reflection

Future improvements/refinements to our app would include:

  1. Design for more than one learning style
  2. Collaborate with teaching professionals to create effective learning materials
  3. Push gamification elements further
  4. Design a classroom mode that teachers could use in a classroom setting