POTIONS & PIXELS Redesign
Service Design
Interaction Design
Content Strategy
Web Design
Reimagining an online space for an inclusive game community
TEAM
Michael Zytkow - Founder
Dominique Prescott - Graphic Designer
TOOLS
Figma, FigJam, Maze, Google Workspace, Grain
ROLE & DURATION
Product Designer & UX Strategist
Oct 2023 - Jan 2024
OVERVIEW
POTIONS & PIXELS is a nonprofit located in Charlotte, NC. They address community challenges using games, art, and technology and hope to connect everyone through the power of games.
CHALLENGE
The nonprofit hosts board game nights, providing a fun opportunity for the community to connect over games. However, despite offering so much more, POTIONS & PIXELS is primarily known in the area as a club for board games. The true value the nonprofit can bring to the community isn't being communicated.
SOLUTION
To understand this board game club phenomenon, I went to a game night in-person and spoke to attendees. Using the insights gathered, I designed a plan to emphasize the nonprofit's unique value proposition on their website to strengthen their relationship with the community.
TEAM
Michael Zytkow - Founder
Dominique Prescott - Graphic Designer
TOOLS
Figma, FigJam, Maze, Google Workspace, Grain
ROLE & DURATION
Product Designer & UX Strategist
Oct 2023 - Jan 2024
OVERVIEW
POTIONS & PIXELS is a nonprofit located in Charlotte, NC. They address community challenges using games, art, and technology and hope to connect everyone through the power of games.
CHALLENGE
The nonprofit hosts board game nights, providing a fun opportunity for the community to connect over games. However, despite offering so much more, POTIONS & PIXELS is primarily known in the area as a club for board games. The true value the nonprofit can bring to the community isn't being communicated.
SOLUTION
To understand this board game club phenomenon, I went to a game night in-person and spoke to attendees. Using the insights gathered, I designed a plan to emphasize the nonprofit's unique value proposition on their website to strengthen their relationship with the community.
TEAM
Michael Zytkow - Founder
Dominique Prescott - Graphic Designer
TOOLS
Figma, FigJam, Maze, Google Workspace, Grain
ROLE & DURATION
Product Designer & UX Strategist
Oct 2023 - Jan 2024
OVERVIEW
POTIONS & PIXELS is a nonprofit located in Charlotte, NC. They address community challenges using games, art, and technology and hope to connect everyone through the power of games.
CHALLENGE
The nonprofit hosts board game nights, providing a fun opportunity for the community to connect over games. However, despite offering so much more, POTIONS & PIXELS is primarily known in the area as a club for board games. The true value the nonprofit can bring to the community isn't being communicated.
SOLUTION
To understand this board game club phenomenon, I went to a game night in-person and spoke to attendees. Using the insights gathered, I designed a plan to emphasize the nonprofit's unique value proposition on their website to strengthen their relationship with the community.
My Design Process
My Design Process
My Design Process
I started off the process gathering as much previous research as I could from the nonprofit owner, Michael. With the feedback and resources provided, I executed the redesign using the standard Empathize, Define, Ideate, Deliver, and Test phases. I often switched between the Ideate and Prototype phase as I was testing out different layout components.
I started off the process gathering as much previous research as I could from the nonprofit owner, Michael. With the feedback and resources provided, I executed the redesign using the standard Empathize, Define, Ideate, Deliver, and Test phases. I often switched between the Ideate and Prototype phase as I was testing out different layout components.
I started off the process gathering as much previous research as I could from the nonprofit owner, Michael. With the feedback and resources provided, I executed the redesign using the standard Empathize, Define, Ideate, Deliver, and Test phases. I often switched between the Ideate and Prototype phase as I was testing out different layout components.
The Solution
The Solution
The Solution
The new web and mobile prototypes contain improvements to all pages in an attempt to provide more context to users and inform them about the variety of services, events, and programs the nonprofit has to offer for the community.
The new web and mobile prototypes contain improvements to all pages in an attempt to provide more context to users and inform them about the variety of services, events, and programs the nonprofit has to offer for the community.
The new web and mobile prototypes contain improvements to all pages in an attempt to provide more context to users and inform them about the variety of services, events, and programs the nonprofit has to offer for the community.
Dedicated space for upcoming events
BEFORE
AFTER
The events page prior to the design was just a single section on the home page that listed out flyers and a single-line text for information. Now, users can view all events in relation to the current date with a new event calendar.
The events page prior to the design was just a single section on the home page that listed out flyers and a single-line text for information. Now, users can view all events in relation to the current date with a new event calendar.
The events page prior to the design was just a single section on the home page that listed out flyers and a single-line text for information. Now, users can view all events in relation to the current date with a new event calendar.
Visibility of programs
BEFORE
AFTER
Before, there was a wall of images and non-accessible text that would list out different types of activities and programs the nonprofit does. Now, the structure of these programs have been reformatted and better distinguished in a less glaring way.
Before, there was a wall of images and non-accessible text that would list out different types of activities and programs the nonprofit does. Now, the structure of these programs have been reformatted and better distinguished in a less glaring way.
Before, there was a wall of images and non-accessible text that would list out different types of activities and programs the nonprofit does. Now, the structure of these programs have been reformatted and better distinguished in a less glaring way.
Feeling more like a member
BEFORE
AFTER
Looking through the original site, you'll find a variety of different media. Although this helped evoke a sense of fun and community, the next transition point for a user was unclear - how can they join in on the fun? A new page provides different opportunities for someone to get more involved with the nonprofit and feel more like a member rather than an observer.
Looking through the original site, you'll find a variety of different media. Although this helped evoke a sense of fun and community, the next transition point for a user was unclear - how can they join in on the fun? A new page provides different opportunities for someone to get more involved with the nonprofit and feel more like a member rather than an observer.
Looking through the original site, you'll find a variety of different media. Although this helped evoke a sense of fun and community, the next transition point for a user was unclear - how can they join in on the fun? A new page provides different opportunities for someone to get more involved with the nonprofit and feel more like a member rather than an observer.
Discovery
Discovery
Discovery
confirming user feedback
confirming user feedback
confirming user feedback
According to Michael (the nonprofit founder), people usually find the nonprofit through the Meetup app. This was how the board game nights began to kick off and gain popularity. I conducted user research to dig deeper into these users and understand what other motives they might have had when seeing a nonprofit like POTIONS & PIXELS online.
According to Michael (the nonprofit founder), people usually find the nonprofit through the Meetup app. This was how the board game nights began to kick off and gain popularity. I conducted user research to dig deeper into these users and understand what other motives they might have had when seeing a nonprofit like POTIONS & PIXELS online.
According to Michael (the nonprofit founder), people usually find the nonprofit through the Meetup app. This was how the board game nights began to kick off and gain popularity. I conducted user research to dig deeper into these users and understand what other motives they might have had when seeing a nonprofit like POTIONS & PIXELS online.
Think Aloud Interviews
During the in-person board game night, I conducted 5 Think Aloud interviews and gathered more information through surveying. I also conducted two virtual Think Aloud interviews at a different time with participants who hadn't heard of the organization, ensuring unbiased feedback.
Think Aloud Interviews
During the in-person board game night, I conducted 5 Think Aloud interviews and gathered more information through surveying. I also conducted two virtual Think Aloud interviews at a different time with participants who hadn't heard of the organization, ensuring unbiased feedback.
Think Aloud Interviews
During the in-person board game night, I conducted 5 Think Aloud interviews and gathered more information through surveying. I also conducted two virtual Think Aloud interviews at a different time with participants who hadn't heard of the organization, ensuring unbiased feedback.
Key Insights
While the website provided fun, engaging imagery, the repetition and volume used eventually fatigued the attention span of users. The site also lacked in-depth information that users might need to decide if and how to come back again and get involved.
Key Insights
While the website provided fun, engaging imagery, the repetition and volume used eventually fatigued the attention span of users. The site also lacked in-depth information that users might need to decide if and how to come back again and get involved.
Key Insights
While the website provided fun, engaging imagery, the repetition and volume used eventually fatigued the attention span of users. The site also lacked in-depth information that users might need to decide if and how to come back again and get involved.
Who are our users?
Who are our users?
Who are our users?
Meet Kayla
Meet Kayla
Meet Kayla
Kayla's Online Interaction Journey
Kayla's interaction with POTIONS & PIXELS all starts from her move to Charlotte, NC. Using a user journey map, I pinpointed areas of friction that could arise from the beginning of her journey up to the end. This helped me empathize with personal struggles she might face being a newcomer to both the org and the area.
Kayla's Online Interaction Journey
Kayla's interaction with POTIONS & PIXELS all starts from her move to Charlotte, NC. Using a user journey map, I pinpointed areas of friction that could arise from the beginning of her journey up to the end. This helped me empathize with personal struggles she might face being a newcomer to both the org and the area.
Kayla's Online Interaction Journey
Kayla's interaction with POTIONS & PIXELS all starts from her move to Charlotte, NC. Using a user journey map, I pinpointed areas of friction that could arise from the beginning of her journey up to the end. This helped me empathize with personal struggles she might face being a newcomer to both the org and the area.
Ideation
Ideation
Ideation
A fresh new information architecture
A fresh new information architecture
A fresh new information architecture
Sitemapping
Information discovery is a natural human behavior when going through a new site. The original site had an unnatural structure of pages and content which made it hard to make sense of what the nonprofit does and what it offers for the community. I used a site map to group relevant information together, strategizing paths for intuitive information discovery that would allow users to connect the dots on their own.
Sitemapping
Information discovery is a natural human behavior when going through a new site. The original site had an unnatural structure of pages and content which made it hard to make sense of what the nonprofit does and what it offers for the community. I used a site map to group relevant information together, strategizing paths for intuitive information discovery that would allow users to connect the dots on their own.
Sitemapping
Information discovery is a natural human behavior when going through a new site. The original site had an unnatural structure of pages and content which made it hard to make sense of what the nonprofit does and what it offers for the community. I used a site map to group relevant information together, strategizing paths for intuitive information discovery that would allow users to connect the dots on their own.
Enhancing Interaction Design
Enhancing Interaction Design
Enhancing Interaction Design
Usability & Interaction Pain Points
Kayla's site interactions made a huge influence in her ultimate decision to not join an org event. It was at this stage where visual clutter, confusing navigation, and missing context made it hard for her to get a feel of how an in-person event would unravel. Using the structure of a task flow, I wanted to dive deeper into these interaction points and find ways to address them.
Usability & Interaction Pain Points
Kayla's site interactions made a huge influence in her ultimate decision to not join an org event. It was at this stage where visual clutter, confusing navigation, and missing context made it hard for her to get a feel of how an in-person event would unravel. Using the structure of a task flow, I wanted to dive deeper into these interaction points and find ways to address them.
Usability & Interaction Pain Points
Kayla's site interactions made a huge influence in her ultimate decision to not join an org event. It was at this stage where visual clutter, confusing navigation, and missing context made it hard for her to get a feel of how an in-person event would unravel. Using the structure of a task flow, I wanted to dive deeper into these interaction points and find ways to address them.
Optimizing Engagement with New Architecture
I began to ideate on ideas to improve micro-interactions on the site. On top of that, I brainstormed with user engagement in mind, thinking about their interaction with the org itself as they discovered new information throughout the site.
Optimizing Engagement with New Architecture
I began to ideate on ideas to improve micro-interactions on the site. On top of that, I brainstormed with user engagement in mind, thinking about their interaction with the org itself as they discovered new information throughout the site.
Optimizing Engagement with New Architecture
I began to ideate on ideas to improve micro-interactions on the site. On top of that, I brainstormed with user engagement in mind, thinking about their interaction with the org itself as they discovered new information throughout the site.
Development
Development
Development
translating the vision
translating the vision
translating the vision
Visuals and Copy Text
Kayla's fear of social exclusion can hinder event attendance. As a nonprofit committed to inclusivity, it's crucial we address this. To foster a welcoming atmosphere, I incorporated inclusive visuals and colors into the designs. Copy text was important as well as it plays a crucial role in setting the tone for how welcoming the org feels.
Visuals and Copy Text
Kayla's fear of social exclusion can hinder event attendance. As a nonprofit committed to inclusivity, it's crucial we address this. To foster a welcoming atmosphere, I incorporated inclusive visuals and colors into the designs. Copy text was important as well as it plays a crucial role in setting the tone for how welcoming the org feels.
Visuals and Copy Text
Kayla's fear of social exclusion can hinder event attendance. As a nonprofit committed to inclusivity, it's crucial we address this. To foster a welcoming atmosphere, I incorporated inclusive visuals and colors into the designs. Copy text was important as well as it plays a crucial role in setting the tone for how welcoming the org feels.
Sparking Interest and Curiosity
"Upcoming Events" and "Past Programs" sections have been included on the home page to garner user attention, encouraging exploration and event participation. By providing more context about these items, users can have a better idea of what to expect and whether or not they'd like to click onto the event or program to learn more.
Sparking Interest and Curiosity
"Upcoming Events" and "Past Programs" sections have been included on the home page to garner user attention, encouraging exploration and event participation. By providing more context about these items, users can have a better idea of what to expect and whether or not they'd like to click onto the event or program to learn more.
Sparking Interest and Curiosity
"Upcoming Events" and "Past Programs" sections have been included on the home page to garner user attention, encouraging exploration and event participation. By providing more context about these items, users can have a better idea of what to expect and whether or not they'd like to click onto the event or program to learn more.
Empowering User Choice
A dedicated "Events" and "Projects" page has been created to allow users to find opportunities that truly interest them in an organized fashion. The addition of these pages helps distinguish the difference between each category and lets users discover more events than just board game nights.
Empowering User Choice
A dedicated "Events" and "Projects" page has been created to allow users to find opportunities that truly interest them in an organized fashion. The addition of these pages helps distinguish the difference between each category and lets users discover more events than just board game nights.
Empowering User Choice
A dedicated "Events" and "Projects" page has been created to allow users to find opportunities that truly interest them in an organized fashion. The addition of these pages helps distinguish the difference between each category and lets users discover more events than just board game nights.
Celebrating Members
I included short, engaging content like testimonials, member spotlights, and examples of games developed to shine more light on the impact that the org makes within the community. Making this more transparent and celebrating the impact and contribution of members will be a great start to foster opportunities for long-term engagement and support.
Celebrating Members
I included short, engaging content like testimonials, member spotlights, and examples of games developed to shine more light on the impact that the org makes within the community. Making this more transparent and celebrating the impact and contribution of members will be a great start to foster opportunities for long-term engagement and support.
Celebrating Members
I included short, engaging content like testimonials, member spotlights, and examples of games developed to shine more light on the impact that the org makes within the community. Making this more transparent and celebrating the impact and contribution of members will be a great start to foster opportunities for long-term engagement and support.
Impact
Impact
Impact
Unbiased Feedback Reveals Opportunities
Unbiased Feedback Reveals Opportunities
Unbiased Feedback Reveals Opportunities
I recruited 5 participants unfamiliar with the organization for a round of Think Aloud usability testing. Their behavior yielded surprising insights that I wanted to further explore:
I recruited 5 participants unfamiliar with the organization for a round of Think Aloud usability testing. Their behavior yielded surprising insights that I wanted to further explore:
I recruited 5 participants unfamiliar with the organization for a round of Think Aloud usability testing. Their behavior yielded surprising insights that I wanted to further explore:
Heavy Association of the Nonprofit with Kids
When asked to explain what the nonprofit does, the majority of participants included kids in their description
Heavy Association of the Nonprofit with Kids
When asked to explain what the nonprofit does, the majority of participants included kids in their description
Heavy Association of the Nonprofit with Kids
When asked to explain what 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...”
“Projects” and “Events” were not perceived as intended
Projects and events were often mistaken for the same thing while completed projects were mistaken for ongoing or upcoming events.
“Projects” and “Events” were not perceived as intended
Projects and events were often mistaken for the same thing while completed projects were mistaken for ongoing or upcoming events.
“Projects” and “Events” were not perceived as intended
Projects and events were often mistaken for the same thing while completed projects were mistaken for ongoing or upcoming events.
Positive Reviews
Positive Reviews
Positive Reviews
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.
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.
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.
Avg Ease of Use Rating: 4.64 / 5
“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.”
Prioritizing Revisions
Prioritizing Revisions
Prioritizing Revisions
Revisions on the prototype involved re-assessment of imagery to create a more inclusive vibe and making the distinction between "Projects" and "Events" clearer. Scroll through the images below to learn more.
Revisions on the prototype involved re-assessment of imagery to create a more inclusive vibe and making the distinction between "Projects" and "Events" clearer. Scroll through the images below to learn more.
Revisions on the prototype involved re-assessment of imagery to create a more inclusive vibe and making the distinction between "Projects" and "Events" clearer. Scroll through the images below to learn more.
Final Prototypes
Final Prototypes
Final Prototypes
Reflection
Reflection
Reflection
Key Learnings
Key Learnings
Key Learnings
This project emphasized the importance of understanding users beyond their words. I had to really dig deeper into other aspects of their journey with the nonprofit that extended beyond the screen. Lastly, presenting findings in a presentation-style format ensured stakeholder understanding. I adopted this format for client updates and design critiques, leading to a smoother feedback loop.
This project emphasized the importance of understanding users beyond their words. I had to really dig deeper into other aspects of their journey with the nonprofit that extended beyond the screen. Lastly, presenting findings in a presentation-style format ensured stakeholder understanding. I adopted this format for client updates and design critiques, leading to a smoother feedback loop.
This project emphasized the importance of understanding users beyond their words. I had to really dig deeper into other aspects of their journey with the nonprofit that extended beyond the screen. Lastly, presenting findings in a presentation-style format ensured stakeholder understanding. I adopted this format for client updates and design critiques, leading to a smoother feedback loop.
Next Steps
Next Steps
Next Steps
After a long hiatus, both my client and I have decided to regroup and continue the project again in July 2024. There are ongoing efforts to realign the redesign with new organizational updates and a new vision. We plan to fully develop these designs using Wix once we've finished up the last iteration of the designs.
After a long hiatus, both my client and I have decided to regroup and continue the project again in July 2024. There are ongoing efforts to realign the redesign with new organizational updates and a new vision. We plan to fully develop these designs using Wix once we've finished up the last iteration of the designs.
After a long hiatus, both my client and I have decided to regroup and continue the project again in July 2024. There are ongoing efforts to realign the redesign with new organizational updates and a new vision. We plan to fully develop these designs using Wix once we've finished up the last iteration of the designs.