ByteBud
Launching in Fall ‘23.
Duration:
April ‘23 (Ongoing)
Project Type:
Community Project
Team:
2 Engineers
1 Researcher
Role:
UX Designer
BACKGROUND
ByteBud is a progressive web app that helps tech people discover new connections and open-source projects.
The project began as an effort to assist tech communities with retention — it eventually grew into an effort to understand the mindset of professionals in this field, along with the social environment in post-pandemic cities.
Becoming an intimate part of New York communities like User Experience Support Group and Code & Coffee was a vital step in understanding issues regarding unemployment and digital fatigue.
CHALLENGES
ByteBud came into fruition after many informal conversations with community leaders, volunteers, administrators and sponsors. What was clear to team members early on was the opportunity to alleviate the personal and professional pressures of meeting new people.
“How Might We” Statement
How might we simplify the discovery of new connections and collaboration opportunities for tech people?
RESEARCH
Surveys & Interviews
A survey was sent out to communities on Meetup.com and Discord. 10 questions were crafted to better understand what someone might look for in a tech community, and whether or not they feel like those needs are being met.
My responsibility during this phase was to conduct 5 interviews with the executive team from Code & Coffee, which helped the team understand challenges for managing a community of 20,000+ people in 25+ cities nationwide.
Affinity Diagramming
I came together with the team’s researcher to group our findings, which provided clarity on ideas such as: participant motivations, success metrics for community leaders, technology constraints and the future of large scale communities.
Opportunities for Impact
After numerous conversations virtually and in-person, I took several hours to draft all of the potential problems for the team to solve, a few worth mentioning include:
01
Making it easier to discover and manage new connections
02
An web experience to track volunteer events and gather information from users
03
Creating a tool for seamless community sponsorship
04
A platform to manage multiple communication and productivity tools in one place
MID-FI WIREFRAMES
The team decided on creating an experience that would make it easier for users to make initial connections in large communities. Feedback regarding this feature was overwhelmingly positive; in this case, offering users a handful of people to chat with who belong to the same communities, learning groups and projects was an essential step.
In addition, giving users the opportunity to discover projects also proved beneficial. Based on the survey responses, Junior talent is often searching for ways to contribute to community efforts, while a lot of senior talent feels confident enough to mentor others. ByteBud is an ideal place to discover new friends and career-growth opportunities.
USER TESTING
Overview
Our team researcher tested the mid-fidelity prototype with 4 community members in 30-minute virtual sessions. We sourced candidates from the official Code & Coffee Discord server; 3 were developers, and one a designer.
I collaborated with our researcher to create a semi-structured guide on walking users through: onboarding, completing a user profile, messaging other users, creating and joining projects, viewing peer profiles and signing out.
By following this flexible approach, the team was able to authentically gather information from participants.
Testing Results
All participants were confused about project permissions
Search and filtering functions were unclear for all participants
2 participants weren’t compelled to write summaries, but liked the idea of choosing personal & professional interests to learn or teach in the community
2 participants believed that snackbars at top of screen should appear at the bottom instead
One user mentioned that onboarding was text heavy and illustrations/iconography would be more stimulating
HIGH-FI WIREFRAMES
ByteBud’s Technical Foundation
The design team met with Engineering to discuss technical requirements for the project, and came to the conclusion that using an open source design system would be the most efficient, scalable and maintainable solution.
Material 3 is Google’s open source design system that offers flexible components for React developers. Choosing Material over other systems came down to predictability, well-written documentation, Figma compatibility and usability.
Progressive Web Apps(PWA) are a modern alternative to mobile or desktop exclusive products. They are performance-optimized and dynamic enough to work across any viewport. The mobile app market is remarkably saturated, so creating a platform that works in-browser across different device types would offer a seamless approach for users to log into ByteBud.
Onboarding
Research Findings
2 users completed onboarding and were still not confident in their understanding of the platform
One user mentioned that because several frames look identical, it was easy to lose track of what needs to be completed
Changes in state such as syncing a Meetup account were unclear to all 4 test participants
Design Changes
Created carousel to provide information about platform before sign up
Added progress bar to increase visibility of system status
Added explanation about why Bytebud syncs with Meetup for relevant information
Added ‘Account Found’ interaction
Added conduct agreement for community transparency
User Profiles
Research Findings
All users responded positively to the ‘Weekly Connect’ feature
3 test participants were looking for a better visual indication about what they have in common with other users
One test user mentioned that they were looking forward to teaching and learning from other users, but it wasn’t emphasized after onboarding
Design Changes
See which interests you have in common with users and see the projects that they’re contributing to
Added ‘Open to teaching / learning’ section to user profiles
Changed chip design to offer more clear communication about what users have in common
Met with Engineering to confirm that Events from associated section would be pulled from the Meetup.com API
Project Creation
Research Findings
3 participants were curious to know the difference between managing and contributing to a project, along with core functionalities such as creating a project
Design Changes
Created Community / Your Projects tabs to clearly distinguish between user permissions for a collection of projects
Added snackbar notification to affirm project creation
Accepting Requests & Project Filters
Research Findings
In relation to the previous section, creating a concise pattern to review and accept project requests was essential
One user also mentioned that they were concerned about sorting through projects based on their personal preferences
Design Changes
Added Project Requests section to allow organizers to view and accept users from their profile
Created filters feature which allows users to discover projects on their own terms
Editing Participants & Deleting Projects
For organizers, editing project details and participants is an expected functionality for managing projects. I advocated for creating an additional confirmation screen while removing participants from a project by requiring organizers to identify why they are removing a user, and typing the name of the project to confirm deletion.
Messaging
As a collaborative platform, the design team concluded that giving users access to messaging would be another core functionality for users.
LEARNING OUTCOMES
01
Leveraging Existing Design Systems
I learned to manage and customize components from existing systems to save time and scale UI deliverables which was an essential part of this project.
02
Stakeholder Management
Empathizing with the needs of different community members while using intuition to test new ideas was a valuable experience.