top of page
Web Screen PSD Mockup.png

Beyond The Masc

UX/UI, Game Design, Prototyping

Beyond the Masc was built around one central idea: helping young boys rethink masculinity through interactive storytelling. From the start, the team knew this project had to be approachable, thought-provoking, and replayable. I contributed to the project’s foundational structure by helping shape the narrative through interactive story mapping, organizing the experience using a color-coded wire tree that emphasized choice, pacing, and player agency. This structure made the story paths intuitive and encouraged multiple playthroughs.

Design decisions were made to prioritize accessibility and emotional clarity. Action verbs like “Rethink,” “Revisit,” and “Redefine” were woven into animated landing page elements I helped develop—serving as gentle but impactful entry points. Our “I Will” statements, tied into both narrative decisions and the final call to action, helped create an emotional throughline that linked the player’s choices with real-world reflection. Collaborating with the Amend Together program at the YWCA gave our project a strong foundation in education and outreach, reinforcing the importance of tackling toxic masculinity through empathy, openness, and personal growth.

Strategy

Throughout the development of Beyond the Masc, I played a key role in shaping how users interacted with the story. As part of the research and writing team, I introduced interactive game design principles that guided our use of “choose your own adventure” mechanics—bringing in concepts like player agency, replayability, and decision pacing. I created a color-coded wire tree that became essential in tracking story flow and development across the entire team. My background in animation and UX allowed me to take the lead on landing page pacing and transitions, while also shaping how “I Will” statements were introduced as both story mechanics and real-world calls to action. I also helped organize and manage feedback loops to keep our large team aligned and progressing toward our deadline.

Skills

• UX/UI

• Branding

• Layout Design

• Prototyping

• Research Based Design

• Game System Design

• Figma / Adobe XD

• Leadership and inclusion

• Organization and clarity

• Project Management

• Collaboration with others

Beyond The Masc

Prototyping, Web Design, Game Design

Beyond the Masc functions as both a digital experience and educational resource, guiding users through an interactive story designed to challenge harmful norms and promote healthier ideas of masculinity. The site uses a “choose your own adventure” format that places visitors in scenarios that reflect real-life challenges, asking them to make decisions framed by active “I Will” statements. I contributed directly to the project through my knowledge of successful game design elements through the interface design, applying principles like replayability, branching narratives, and user accessibility to ensure each choice felt meaningful, engaging, and easy to navigate.

Story Wireframe

Research, Wireframing, Game Design

To help guide our team through the complexity of a branching narrative, I collaborated closely with the story writing team to develop a comprehensive, color-coded wireframe. This document visually mapped out every path in the story, organizing scenes, choices, and character arcs with clarity and consistency. The wireframe became a foundational reference point for the entire team, ensuring we stayed aligned on what content needed to be created, what artwork was required, and how user flow would progress through the site.

Story Wireframe

Beyond The Masc

Animation, Web Design

To immediately engage users upon entering the Beyond the Masc website, I proposed and developed an introductory animation. Designed around the action verbs “Rethink,” “Revisit,” and “Redefine,” the animation created a strong thematic foundation for the Beyon the Masc experience. I collaborated with the landing page team and my fellow members on the call-to-action team to ensure the sequence flowed smoothly and properly represented with the rest of the website.

STILL INTERESTED?

bottom of page