Gamified Student Website

Turning a gamified mobile learning experience about health and puberty into a desktop interface.

Black rectangular buttons with white text reading 'Learner Engagement,' 'UX Design,' and 'EdTech'
Screenshot of the PUBERRY app interface showing a cartoon berry character named Chloe10 on the right, with icons for fire, apple, and shop below her. The interface displays lessons, achievements, and a calendar. The background has a blue header and a greenish wave pattern at the bottom.

My Role

  • Learning Experience Designer

  • UX Researcher

The Team

  • Ayah Said - UX Designer

  • Bailey Alexander - UX Designer

  • Devan Guerra - UX Designer

Tools

Figma, Canva, Google Sheets, Google Suite, Asana

A slide titled 'The Problem' discusses a startup called EdTech that aims to make learning about puberty fun for kids and teens through a mobile website, but faces the issue that not all students have cell phones to access the site, especially without phones in schools.
Text slide titled 'The Solution,' discussing students' access to computers and desktops, and recommending designing a desktop and iPad adaptation for a mobile website to improve accessibility.

Original App Designs

Two smartphones displaying the PUBERRY app; the left screen asks, 'How are you emotionally feeling today?' with various emoticons and labels, and a 'Continue' button; the right screen shows a lesson titled 'Puberry Trivia' with a green fruit character and a 'Play' button.

Final High-Fidelity Desktop Prototype

Screen of the PUBERRY website or app login page with a blue and white cow print background, featuring a cartoon blueberry character and buttons for logging in or creating a new account.

Discovery

User Persona: Chloe (6th grade student)

A young girl with black hair stands by a window, holding and looking at a white curtain.

Competitive Analysis

In order to gain insights into what Puberry currently offers compared to other apps and websites for puberty education, a competitive analysis was conducted with apps like Clue, Informatica and Wonder: Daily Sex Ed for Teens.

Informatica Videos Screen

A digital poster promoting educational videos for different age groups. The poster features a smartphone displaying videos titled 'Boys during puberty' and others related to growing up, with colorful graphics and a purple background. The poster highlights accessibility and gender-inclusive language as key features.

Image taken from App Store

Final High-Fidelity Puberry Lesson Page

A laptop screen shows a lesson with a blue background and a white content area. The lesson is titled 'Lesson 1' and includes a list of puberty stages. A small green cartoon character with a smiling face is to the right of the content area. There is a speaker icon within a pink box labeled 1, indicating an audio feature, and a magenta box labeled 2 highlighting the phrase 'people who do not menstruate' which is emphasized for gender inclusivity. To the right of the laptop, there is explanatory text about gender-inclusive language and accessibility in puberty lessons.

Takeaways

Although Puberry is the only puberty education resource among its competitors that has a mobile and desktop/iPad adaptation of the interface, as well as a gamification feature, it’s also important that it maintains its competitive edge when it comes to accessibility and inclusivity by implementing an Audio feature and gender-inclusive language.

Usability Test Results

I created a usability research plan for the mid-fidelity prototype of the Puberry website for desktop and iPad based off of secondary research and client needs.

3 Tasks were Completed by Participants:

  • Task #1: Create an account.

  • Task # 2: Complete lesson 1 and the trivia that follows.

  • Task #3: Put a top hat on your berry profile.

Usability testing was conducted with 11 participants total:

  • 4 kids (ages 8-9), which match the primary users initially targeted by Puberry.

  • 2 teens (age 17), to include the broader target age range Puberry more recently began to target (ages 6-18).

  • 5 educators, with the goal of gaining insight into their perspective previewing the website to decide whether to purchase it for their students.

Goals

Black and white dartboard with a dart hitting the bullseye.

  • 100% of users will successfully complete all 3 tasks.

  • 100% of kids will select the correct trivia answer on the first try.

  • The average system usability score will be Excellent.

Results

Laptop showing data analytics dashboard with graphs, charts, and world map in a living room.

  • 100% participants successfully completed all 3 tasks

  • 100% kids (ages 8-9) selected the the correct trivia answer on the first try

  • System Usability Score: 86.6 (Excellent)

Task #1: Create an account.

This task was created in line with the client’s need for feedback on how users interact with the sign up step of selecting whether the user has a period, whether they want to turn their period tracker on, and their process of logging their feelings.

Results

Final High-Fidelity Prototype (only design change: including “skip” option)

A laptop displaying the login screen of an app called Puberry, with a blue and white background featuring abstract shapes. The screen has options to log in or to create a new account.

  • All participants successfully navigated this task.

  • All participants participants shared positive feelings about the period tracker and logging their different feelings.

  • 1 educator recommended including the option to skip when users are selecting how they feel.

“I like how I have the option to turn my period tracker on and off.”

“Students checking in with their feelings is really important.”

Task #2: Complete lesson 1 and the trivia that follows.

Not only does the usability of the core educational and gamified section of the website need to be tested, but also measuring whether students are actually learning from the content, as requested by the client.

Mid-Fidelity: Lack of Accessibility

Half of the child participants (ages 8-9) struggled reading and understanding specific words (like “acne” and “pubic”).

A laptop screen displaying a chat conversation about puberty stages for boys, with a green cartoon plant character on the right, a yellow "Read More" button below the conversation, and a progress bar at 45%.

High-Fidelity: Including Accessibility Features

  • Upon hovering over pink underlined words, a popup will appear with the word, the phonetic pronunciation and the definition.

  • Users will also have the option to hear how the word is pronounced by selecting the Audio icon.

Screenshot of an educational app titled 'PUBERRY' on a laptop screen, showing Lesson 1 on puberty, with a cartoon character of a green onion with glasses.

Value

Users will have the option to use these reading scaffolds that include visual and auditory supports in the pronunciation and understanding of the word. This offers users more independence and autonomy when completing Puberry lessons.

Task #3: Put a top hat on your berry profile.

The objective is not only to test the general navigation and feature prioritization of the homepage, but also to test the usability of the website and gain feedback from the users concerning the gamified incentive of using lemons won in lessons to acquire accessories.

Homepage Navigation

Some users struggled finding the Shop icon on the homepage.

Mid-Fidelity: Cluttered

A computer screen displaying a colorful educational app interface called 'PUBERRY.' The app features a blue berry character with a green leaf on its head. There are three annotated sections: 1) A small square icon labeled 'Shop' under the berry profile, enlarged for visibility. 2) A pink berry icon with a speech bubble asking 'Any Questions?' moved into a carousel at the top left. 3) A green button labeled 'Discover' with a newspaper icon, inviting users to see what's new.

High-Fidelity: Condensed

A tablet displaying an educational app called Puberry featuring a cartoon raspberry character named Chloe10. The screen shows a colorful interface with lesson icons, a progress path, and a sidebar with user information and options.

Value

  1. Including the Shop icon next to the streaks and lemon count under the profile ensures all of the icons relating to incentives are in one organized and digestible space on the homepage.

  2. Consolidating the “Any Questions?” icon in the rotating carousel results in a less cluttered homepage, allowing the lessons roadmap to stand out.

  3. The carousel switches independently and can also be manually manipulated using the arrows. The Shop feature is included in order to ensure high visibility for one of the central features of the gamified website.

Global Navigation Bar

Some users struggled returning to the homepage from the Shop page

Mid-Fidelity: Unclear Navigation Bar

Laptop screen displaying a game interface with a purple raspberry character wearing a green leaf crown. The game is called 'PUBERRY' with a blue logo featuring a smiling raspberry face, and the main background shows a nature scene with trees. To the right, there is an accessory shop with hats and jewelry, and a closet with a crown. The berry costs 120 coins.

High-Fidelity: Clear Navigation Bar

Laptop screen displaying a game interface with a cartoon berry character, navigation icons including a home icon, and various items for a virtual accessory shop and closet, with annotations explaining icon placement.

Value

Including the Home icon in the global navigation bar offers another visual to navigate back to the homepage. By also including the Settings and Log Out icons, we are matching what users will encounter in the real world on many other websites with these easy-to-access options available at all times.

High-Fidelity Prototype

Below is a recording of the high-fidelity prototype after applying the previous design decisions based off of usability test findings.

Due to time constraints, 1 usability test was conducted on the high-fidelity prototype:

  • The user successfully navigated to the Shop page after completing Lesson 1.

  • The user successfully navigated back home from the Shop page.

Conclusion

Puberry's goal of being inclusive to all users by offering a desktop and iPad interface of their website that is designed based on users’ needs was accomplished. In addition, its design has been influenced by educators’ needs and their in-depth knowledge of their students. One of the biggest challenges was the feature prioritization in the design of the homepage, ensuring the most important features from the mobile website were effectively placed in a cohesive way. I was able to contribute to creating an organized and minimalist design through conducting a comparative analysis of the feature prioritization of other adapted mobile-to-desktop gamified websites, a heuristic evaluation of the information architecture of these websites, and usability test findings. Now, students like Chloe can easily navigate the homepage and the website from their desktop, efficiently finding and using the features that will enhance their puberty learning.

Recommendations for Next Steps

Based off of usability test findings and user needs, the following next steps were recommended to the client, Puberry.

Continued Usability Testing

A cartoon blueberry character waving a rainbow pride flag, smiling with blushing cheeks and a green leafy crown.

Due to time constraints and a limited pool of participants, all kids and teens who participated in usability tests identified as female.

  • By continuing usability testing with participants who identify as male, gender non-binary and who are trans, Puberry can gain more diverse feedback that will ensure their website is, in fact, inclusive.

Puberry for Teens

All teens (age 17) shared they would like to use Puberry if it was made for teens.

Puberry wants the website to be for all kids interested in learning about puberty, ages 6-18.

  • It’s recommended that, as students mature, so will the content and the UI of their lessons and interface, assuring that the Puberry experience will mature with them as well.

A cute cartoon blueberry character with a face and a small green leaf crown, surrounded by five colorful circles in purple, black, gray, green, and dark blue, on a white background.

Suggested Puberry for Teens Color Palette