Designing an online community for B~STEM

Overview

As I was growing up, I was fortunate to be surrounded by a supportive group of girl friends - my troopmates from a youth organization called Girl Scouts. The organization empowers girls to lead with integrity, compassion, and confidence in all that they do.

When I received the opportunity to work with B~STEM Project, an organization that provides programming for girls interested in business and STEM-related fields, I jumped at the chance. Their mission reminded me of my time in Girl Scouts and how it had helped prepare me for my own career. I was overjoyed at the prospect of working with a group that could make a similar impact on other girls' lives.

I was paired with two other UX designers to build the prototype for a vibrant, online community - a resource to empower B~STEM Project members worldwide to meet, form their own groups for the organization's hackathons, continue communication after local events, and learn from each other. We planned to have a clickable prototype ready to present to sponsors and donors by the end of the 6-month contract.

Objective:

Validate the need for an online community for girls interested in business/STEM fields to learn from and work with each other, and create a prototype for usability testing.

Process

We started by mapping out the UX process, what steps were needed to complete the project, and determining who would take ownership of each step. I used Microsoft Project to clearly define how long each task would take and who would take ownership.

Our remote team primarily communicated through a work messaging application called Slack. We used one channel for general updates and used direct group messages and scheduled quick calls for more detailed changes/updates.

Research and planning

We set out to design a survey that would simultaneously screen potential interview participants and validate females' need for an online community. We wanted to discover how potential users already learned more about their chosen business/STEM fields, and how comfortable they would be in connecting with like-minded females over the Internet.

• Potential users' current participation in online communities
• The methods they used to learn more about their fields/industries of interest
• Experiences with mentorship and collaborative learning
• Resources used during career searching, and opportunities for new resources

User survey

Since our potential user base included females of all ages, wording the survey appropriately for each target group was challenging. The screener questions I came up with directed each set of participants to a different section: younger students, older students, and professionals.

We brainstormed distribution channels for the survey. In addition to past B-STEM program participants, we considered existing online community groups (Slack, Discord, Facebook), offline community groups (local Girl Scouts troops), and word of mouth (accessing our family/friends's networks).

We received 145 results from the survey, a great starting point for collecting information. Our survey analysis helped us understand our target audience. The responses received from our survey enabled us to fine-tune our user interview questions and ask more substantial, hard-hitting questions. We asked more specific questions to those who were willing to offer more insight by participating in user interviews.

When it comes to business opportunities and STEM education, what are the barriers and frustrations experienced by female students and professionals?

User interview insights

Common frustrations:

• Lack of transparency in salary information, networking opportunities, and open positions in today's workforce
• Few female role models early on in education/career
• Hostile tone from those currently in STEM industries, "you should already know this" mentality that discourages learning and asking questions

• Resilience in the face of male-dominated fields
• Seeking out support from female-focused professional organizations
• Looking for validation/feedback from other women professionals to gain insights

• Encouraging girls to pursue STEM roles, starting in school and continuing throughout their proessional career
• Providing young women confidence and skills at a young age
• Removing "imposter syndrome" that many women develop during their career
• More inclusive environments to encourage women to participate

Solution

Tentative "how might we" statements guided our design:

• How might we bring together girls of different demographics to comfortably collaborate?
• How might we attract females to start using the community?
• How might we encourage girls to participate in the community and share their findings?

Information architecture

I developed and ran open cardsorts with previous survey participants to identify the most effective sitemap for the site. In analyzing the results of our cardsorts, we arrived at the following conclusions:

• 53% of participants paired "mentoring" and "networking" activities together. 33% classified "networking" under Community or related sections, while the remaining 14% admitted they didn't know what networking meant.
• 40% categorized "projects" and "opportunities" together.
• 46% wanted recent information presented together as a continuous feed, rather than having it separated out across multiple categories.

User stories

I wrote user stories to detail the community's functionality. Our developer found it very helpful to have these high-level requirements written out.

Mapping out these user stories into their various epics helped me get a better idea of the scope of our project. Our team discussed how valuable each piece played in the overall B-STEM community experience, ultimately helping to assemble the MVP.

User scenarios

I illustrated how our various personas might use the community. Writing these user scenarios was an exercise in empathy, testing how well I understood how users would interact with the B-STEM community throughout their daily lives.

Design

Sketching process

While my teammates worked on wireframing the profiles and registration process, I did some whiteboarding to visualize two of our main features: Projects and Opportunities. The user stories were the foundation for my sketches. My main challenge was condensing the information-dense sections and making them bite-sized for younger audiences.

Wireframes

I created wireframes using Sketch. "Opportunities" and "Projects" pages alike needed to be easy to skim but quick to filter, so that users could mindlessly browse if they were very open to ideas or drill down on the exact set of opportunities that fit what they were searching for.

We were asked to focus primarily on building out content requirements during this stage, which I hadn't anticipated. It turned out to be an interesting exercise in product ownership - having to anticipate the exact fields a user would expect to see on a typical "post project" screen.

Feedback

During feedback, the lead stakeholder brought up the following points about the Project Posting wireframes:

• Members would want to see statistics for projects/opportunities, such as views/likes
• Project owners would want the option to disable comments
• Project owners and the community would want to flag comments
• Members would want to forward projects that caught their eye to other members or friends not part of the community, and be able to have a collection of these liked projects
• Members would want an easy way to access projects that they had favorited

Ultimately, it was decided that these features were "nice to haves" and would not be included in the MVP.

Developing the prototype

I continued to work on the "Opportunities" and "Projects" pages as we went through each round of revisions. My teammates and I provided helpful design critiques for each other regarding placement, hierarchy, and usability. My final draft is available here.

Reflection and next steps

I really enjoyed working with a team of designers, from the research phase to iterating on wireframes. Having multiple sets of eyes on my designs was very helpful to the process.

I was most excited when writing the user stories for the Projects and Opportunities features. Being present during that crucial moment of shaping the product was a real treat.

Plenty of feature ideas came up after we wrote those first user stories, so we had to make some tough calls to distinguish between "must haves" and "nice to haves". It was challenging when the team wasn't 100% in alignment on these. We had to be firm on the product's identity and the audience we were building the community for.

Overall, I loved being able to contribute to a product that felt so engaging, and hope to find more opportunities where I can do the same!