Women in Information
Systems Website
Unifying mentorship and community resources to
empower women in STEM at Carnegie Mellon University
Context
Women in Information Systems (IS) is an organization within Carnegie Mellon (CMU)’s bigger initiative to support women and underrepresented groups in STEM.
The organization is struggling to attract new members although it was created to address students’ needs.
Outcome
Received buy-in from organization for development
Achieved a 100% task success rate amongst the 4 participants with 4 different tasks for the final design
Decrease participants’ time spent on tasks by an average of -5 sec each between the two usability testing sessions
Roles
Design Lead
Bon Bhakdibhumi
Research Lead
Nicole Xiang
Development Lead
Michelle Koo
Timeframe
6 Weeks
2021, 2023
01
❋
The Problem
❋
Despite a robust ecosystem of resources, Women in IS faced a critical discovery gap: students reported that the organization and its most valuable offerings remained essentially ‘invisible’ to them.
Guiding Questions
How come students are not utilizing the resources provided by the organization?
How might the organization better support students in their college journey and set them up for professional success after they leave Carnegie Mellon University?
→
The project began with setting the goal with the team. Everything else—site map, wireframes, prototypes, etc.—was extrapolated from this point. By engaging in reflection, whether self-directed or by external feedback, I ensured that every design direction move the project closer to the goal.
Design Goal
A platform that quickly allows students to understand what resources exist❶ and conveys a sense of community❷
Project’s Criteria for Success
❶
Students are able to identify the organization’s main resources.
❷
More students express interest in joining.
02
❋
The Solution
❋
①
New Home that Fosters
A Sense of Belonging
A reimagined landing experience prioritizes community-driven imagery and clear value propositions, serving as a gateway to the organization for prospective members.
Home: Leveraging existing social media videos to quickly convey a sense of community
Home: All Offerings in One View
Home: Letting the Voices of Members Shine Through
②
Streamlined Access
to Critical Resources
The new site architecture transformed fragmented information into a single, centralized hub of information, simplifying the discovery process for important resources and lower friction for participation.
1/4
Resources Page: Cosolidating All Resources In One Place
People Page: Highlighting the Stories of The Women Behind the Org
Membership Page: Lowering the Barrier to Join
Contact Page: Making Communication Easy
③
Seamless Experience Across
All Devices
Responsiveness was at the heart of the design, allowing students to access information from different devices, from computer to mobile.
Events Page: Desktop and Mobile Views
Mobile View of the Website
03
❋
Research
❋
Semi-Structured Interviews
To understand the existing gap, we interviewed 5 representatives from the target audience—mentors, prospective members, and IS faculty advisors—ensuring that we understood the problem from all relevant perspectives.
Uncovering Needs and Pain Points Through Qualitative Research
Key Research Takeaways:
①
Most students lack the understanding of what resources the organization provides.
②
Interested students are unsure of the process
it takes to become part of the community.
③
Members don’t feel a sense of community—or represented—within the organization.
↓
Quotes from the interview that supported the research takeaways
1/3
Current Website Analysis
Looking at the current website, the issues the students mentioned in the interviews were clear:
①
Cumbersome navigation due to the site being nested under an unrelated page
②
Text heavy: no use of any imagery to represent the people within the community
③
Lacks necessary information about the organization and its resources
04
❋
Design Process
❋
2/2
Site Map, Wireframes,
& Evaluation
Building the backbone of an effective
and engaging web experience
To ensure the new site architecture resonated
with our users, we conducted a round of usability testing on the initial wireframes.
By testing with a representative group of prospective members, mentors, and advisors,
I was able to identify friction points and align the design with their mental models, resulting the Site Map V.2 and the mid-fi wireframes.
↓ Takeaways from the evaluation in details
Testing Methods
①
Think Aloud Testing
②
Task Success Rate
③
Time Spent on Task
④
Error Rate
Home Page V.1
Takeaway ①
Home Page
Participants expressed that the
home page felt cluttered, hindering their ability to find information.
↓ See changes to address issue
Home Page V.2
❶
New layout for the “What We Offer” section, optimized for desktop view, allows users understand the 3 primary offerings of the organization with a glimpse.
❷
Refined CTAs, linking to more in-depth pages, compel students to dive deeper into each topic.
❸
Overall improved spacing and hierarchy lead to better information intake.
Takeaway ②
Events Page
The org only hosts 3 events each month, so a full-calendar UI was too empty and unnecessary.
↓ See changes to address the issue
Events Page V.1
Events Page V.2
❶
Removing the calendar allows more space for highlighting upcoming events through a combination of image and text.
❷
Sign Up button makes it for students to express interest and participate.
People Page V.1
Takeaway ③
People Page
Users couldn't find advisors’ information because they were buried below mentors.
↓ See changes to address issue
People Page V.2
❶
Adding navigational tabs helps surface profiles of advisors and mentees that were once buried.
Resources Page V.2
❶
Resource Section consolidates links to online resources that were once scattered
Visual Identity, Design System, & Hi-fi Wireframes
Bringing the design intent to fruition
After another round of user, I started working on the final design of the website. At this stage, the focus of the design wasn’t only about utility and functionality but also about building trust through an identity—a design system—that the stakeholders can resonate with.
New WordMark: embrace of clarity and a more professional look
New Type System: A Balance between Sophistication, Flare, & Approachability
New Colors: Characteristics of Optimism, Freshness, Seriousness, & Fun
Old Identity System
Looking at old identity system, it was clear why a change was necessary:
①
Logo
The overlapping shapes create too much complexity for a logo.
②
Illustrations
They feel generic—a misrepresentation of the care and the human-connection that the organization strives for.
③
Colors
Palette is too close in hue, saturation, and brightness. Contracting colors will create a more comprehensive, unique, and flexible color system.
Documentation
& Handoff
Bridging the gap between design
and development
As the design process came to an end, I made sure to organize my file, deleting unnecessary elements and creating folders within Figma to organize my components, type, and color styles.
05
❋
Reflection
❋
If I had more time on this project, here are somethings I would work on to make the project even better.
1/3
