Project Overview

Role - UX Researcher, Project Manager
Tools - Figma, Notion, Abode Photoshop

Frame Fatales

FF is a online charity showcase of all the best women/nonbinary gamers. My team’s goal with this project was to create a site in collaboration with stakeholders to achieve the best possible product to their standards. This concept of this product was centered around conflict/resolution with our stakeholder’s goals for their brand identity.

Project goals

To create a product based on stakeholder’s needs and raise awareness/participation in online charity events

The Problem

The stakeholders desire a welcoming and friendly product, however require security barriers to participate due to gender regulations

User Insight

”As someone who plays video games, I want to learn more about gaming charity showcases and how to participate in them.”

Research

Stakeholder Interview

Key Insights:

  • Inclusivity and transparency is top priority

  • Main focus should be increasing awareness of Frame Fatales and broadening outreach

  • Main calls to action should be “Join Our Community” and “Watch our Events”

  • User awareness of security barriers/required applications to participate

  • “We want you to smile when you see our webpage but also take it seriously”

User Interviews

answered questions about their gaming and charity experiences respectively:

  • How often do you play video games?

  • Have you ever been involved with a charity event?

  • Would you consider participating in a charity gaming showcase?

We found that users typically spent an average of a few hours per week playing video games and expressed interest in participating in a charity gaming showcase if they knew more details.

Design

Sitemap

As a requirement to participating in the events, users must submit a request to join the online server. This was a priority of the stakeholders in order to screen users for potential trolls and bullies who tend to target women in gaming spaces. To keep the “welcoming” tone, my team implemented many different avenues to easily access this request form.

Low Fidelity

We wanted as much information about how to participate in the event. There are two main showcases a year, along with some special events, a challenge my team faced was how to explain the different events and how their title refers to the time of year the showcase occurs.

We have to highlight that Flame refers to the Summer event and Frost refers to the Winter event.

Testing

Stakeholder Feedback

Content Writing

  • Change the livestream heading to convey action. From "Today's Livestream" to "Watch now" or “Frost Fatales is Live!"

  • Use the word “Request” instead of “Apply” to join the community. "Apply" sounds like there's a judging/criteria process. “Request” is a more friendly and approachable word

Information Architecture

  • Separate main showcase events from special events to avoid confusion, use provided graphics for visual differentiation

  • Highlight The Malala Fund more prominently by moving its card location closer to the top of the page

User Testing

Research Questions

  • Will the security barriers requested by the stakeholders make it difficult to join the community?

  • Do events with similar names cause confusion for users?

  • Will it be easy for new users to learn how to participate?

Testing Goals

  • Users understand the rules and apply for a server invite

  • Users learn the difference between Flame, Frost, and special events

  • Users can successfully navigate to volunteer FAQ

We conducted research on users within a general online pool gamers and non-gamers.

Visual Style

UI Style

Style Tile Takeaways

  • The stakeholder’s desired color palette, based on an already existing logo, had a lot of bright colors

  • We made sure the site was colorblind accessible and WCAG compliant

  • Typography had to represent the “fun but professional” tone per the stakeholder’s request

Final Product

Organization

Using provided visuals, we were able to reduce user confusion on the different events. The colors also emphasized the time of year each event represented without users needing to further search for the difference. We also made specific information readily available for those interested in participating.

Security Barriers

We created several different paths and options to contact the FF team about joining the online server, along with explanations why this is required. We also included bright colors and visuals to maintain the friendly and welcoming environment.

Conclusion

Pain Points

  • We had to remove a Community page that relied on a Twitter API, this API was free until recently and my team would need to meet with the stakeholders to discuss budgeting or an alternative feature to deliver their updates

  • We had to keep all members focused on the stakeholder’s goals rather than experimenting with extraneous features that took away from the stakeholder’s desires

Future Iterations

  • Having separate homepages for whether or not the video feed is live

  • If we were to continue this project, my team would bring this design to larger leads of the organization and get broader feedback from their charity partners

  • We’d also start working with developers to start building specs for behind-the-scenes conditions and testing the site’s functionality within the event’s online scenarios

Final Thoughts

  • Working with the Frame Fatales Leads presented a new opportunity to earn hands on experience with direct communication with a client

  • FF Leads felt we had accomplished their goals within our design and provided a quality product

  • They expressed that they felt all their needs were heard and enjoyed watching the site evolve as they were involved in every step of the process