volunteer Project
SERVICE DESIGN
|
UX STRATEGY
|
WEB DESIGN
POTIONS & PIXELS
Reimagining an online space for an inclusive game community in Charlotte
ROLE
Project Lead, UX Researcher, Interaction Designer, Visual Designer
DURATION
Q4 (2023)
PLATFORM
Desktop and Mobile (Web)
INTRO
background
POTIONS & PIXELS is a nonprofit located in Charlotte, NC, creatively addressing local community challenges using games, art, and technology. They value community, game education, innovation, and above all, inclusivity, aiming to create the area's most welcoming space to enjoy games of all kinds.
"we're not just board games"
The non-profit hosts board game nights, providing a fun opportunity for individuals to connect over games and socialize. Despite these events aiming to promote gaming in the area, many individuals perceive the organization as a "board game club" when it actually does so much more for the community…
problem
business problem
We want to increase member retention yet many event-goers primarily engage with us for board games and may not be aware of the broader extent of what we do.
user problem
New event-goers are less likely to join org events because they don't know anyone and worry they won't fit in with the gaming community.
the big question to marry both problems
How can we broaden the non-profit's appeal beyond board games, fostering inclusivity to create a welcoming atmosphere for new event-goers and encourage their continued participation?
Our Solution
encouraging site exploration and highlighting events
In our redesign, we're making site exploration more enjoyable and engaging for users, introducing them to the breadth of the non-profit's work and encouraging potential members to get involved. We've improved the overall interaction and navigation, and we're also highlighting events prominently.
Key Site Highlights
Dedicated page for ongoing and upcoming events ensure easier access and better visibility of event details
Improved visibility of programs to highlight the collective efforts to impact everyone in the community
Clearcut page to list out different ways people can get involved to feel more of a member
Before
After
research
attending a board game night by myself
Stepping into the shoes of our target user, I attended one of the non-profit's board game nights. With Krispy Kreme donuts and QR code flyers in hand, I got feedback on the non-profit's original site and conducted Think Aloud interviews (a qualitative experimental interview where users have the space to voice their thoughts while interacting with the site) with 5 participants to gain deeper insight.
In-person testing snapshots (not all are shown)
Additionally, I conducted two virtual Think Aloud interviews with participants who hadn't heard of the organization, ensuring unbiased feedback.
Virtual testing snapshots
an overview of key research insights
Going to the event alone, I got a sense of what it's like for newcomers attending solo. I found myself wishing for company, which explained why I observed many attendees arriving with someone else.
Key insights during board game night…
Almost everyone came with another person or in a group of people
All solo attendees knew Mike (the CEO of the org) to some degree
Typically, attendees learn about upcoming events through direct conversations with Mike
When it came to the actual website itself, many users expressed interest in participating in upcoming events but struggled to find relevant information.
Key insights during usability testing…
"Where can I find future events…"
"How I can contribute in other ways?"
Key stat during usability testing…
As users browsed the site, 42% of the pool expressed an overload of images. This led to increased distraction, high drop-off rate, and reduced text comprehension.
Mapping out kayla's journey to reveal pain points
This is Kayla, representing the essence of our participant interactions.
Kayla Jones, 32
NEW MEMBER
“I just moved to the area and love video games and music. I want to make new friends with people who share the same interests as me.”
Pain Points:
Hard to socialize with people other than co-workers
Having to attend a social event alone
Taking a risk of going to an event she may not fit in
Decision to attend the event is scary due to limited info on the event online
Kayla may miss out on potential friendships due to not being informed of upcoming events
I created a user journey to identify pain points across Kayla's entire online interaction, from problem onset to post-interaction with our website. In this probable real-life scenario, Kayla opts out of attending a Board Game Night due to personal challenges she faces, resulting in a missed opportunity to retain a potential member.
On top of that, I also mapped out Kayla's specific site interactions during her "Experience" stage. The pain points identified during this stage made a huge influence in her ultimate decision to not join a Board Game Night.
ideation
new content strategy
The original flow was filled with blockers and distractions, accumulating to an increase in drop-off rate. The information presented also lacked clarity and failed to convey much about the organization. To address this, I conducted a content audit and restructured the site, organizing information into clear sections for more intuitive access and comprehension.
I conducted a content audit and restructured the sitemap of the website
gaining inspiration and identifying best practices
I looked at several other non-profit organizations including Games for Love and ArtPop and even non-direct markets like Trello (a project management platform) to understand effective design practices that made viewers feel engaged with their sites and content.
Games for Love
ArtPop
Trello
FEATURES
Events section organized by month
Strong donation system with pre-determined amounts
Pop up banner to inform users about news
Effective placement of CTA's throughout content
Effective use of copy text to guide users
Use of testimonials
Powerful and distinctive mission statement on home page
making an engaging experience with design patterns
With the inspiration from competitive analysis, I created mobile-first, lo-fidelity sketches envisioning the main screens and components. I also developed patterns aimed at boosting conversion rates for actions like newsletter sign-ups and donations.
Legend
A) Rearranged nav menu for effortless browsing
B) Components for main pages - Home, About, Programs
C) Centralized events on a dedicated page for effortless access and streamlined information retrieval
DEVELOPment
communicating the mission
Effectively communicating the non-profit's mission and impact, enhances user trust and enthusiasm for attending events. I created mid-fidelity wireframes to visualize strategies:
enhanced visibility of the org's impact
I used short info bits like testimonials, examples of impact, and a member spotlight section
projects and events are more accessible
Dedicated "Projects" and "Events" pages provide users with plenty of information about other programs, helping them decide whether to join future events and projects.
This would benefit not only users but also the non-profit as they continue to add more events to their database.
exploring copy text
A key focus of this project was crafting engaging headlines to draw in users and guide their journey through the pages. I received feedback and tried different versions to create a smooth experience, taking users on a circular journey throughout the website.
TEST
Learnings from Functional Prototype Testing
I conducted another round of "Think Aloud" user testing sessions, recruiting a total of 5 participants with either little or no familiarity of the org. Here were the top research findings I got from testing:
1
heavy association with kids
When asked to explain what they thought the nonprofit does, the majority of participants included kids in their description...
“Their mission is to get kids more involved with technology....”
“They team up with kids to give them a fun space to collaborate and learn about gaming with other kids...”
“POTIONS & PIXELS is focused on STEM and game development for the youth...”
2
“Projects” and “Events” were not perceived as intended
Projects and events were often mistaken for the same thing; completed projects were mistaken for ongoing or upcoming, and event categories caused confusion.
3
People weren't searching or filtering
New participants were unsure of how to use the project search and filter functions, given their unfamiliarity with the organization
"I don't know what to search because I don’t know what type of events to search"
iterations
Improvements based on testing feedback
The final prototypes
Conclusion
in summary, the new design was received well
Despite some hiccups, the redesign still garnered numerous positive reviews. Metrics, including high satisfaction, short time completion, and high completion rates for tasks reflected its success.
“Super informative, nicely organized, visually pleasing to look at”
“There’s a nice balance of info, it’s visually clean, pictures tell you the story beyond the content”
“Gives you what you need. Easily digestible. Approachable.”
Avg Ease of Use Rating: 4.64 / 5
Despite many participants living in different states, participants expressed high levels of interest in getting involved regarding the organization's impact and offerings.
My reflection
Understand my users beyond their words
Don't underestimate copy work in shaping a user's journey
Recognize the value of inspiration from resources beyond your current focus
Summarize deliverables and insights in a presentation-like format to make it easier on stakeholders to digest
Future steps
Validate the usability of the new “Programs” and “Projects” layout with A/B Testing
Find a way to cut down the amount of steps taken to view all projects
Go through a 1-2 more iterations with my client and eventually develop the designs into a live website