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