bon.bhakdibhumi

Work

Misc

About

bon.bhakdibhumi

Women in Information
Systems Website

Women in Information Systems Website

Women in Information
Systems Website

Unifying mentorship and community resources to
empower women in STEM at Carnegie Mellon University

Unifying mentorship and community resources to empower women in STEM at Carnegie Mellon University

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.

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.

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❷

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

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: Leveraging existing social media videos to quickly convey a sense of community
Home: All Offerings in One View
Home: All Offerings in One View
Home: Letting the Voices of Members Shine Through
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
  • 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

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.

Most students lack the understanding of what resources the organization provides.

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.

Interested students are unsure of the process it takes to become part of the community.

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.

Members don’t feel a sense of community—or represented—within the organization.

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

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

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.

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.

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.

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.

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.

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.

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

Resources Page V.2

❶

Resource Section consolidates links to online resources that were once scattered

Visual Identity, Design

System, & Hi-fi Wireframes

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

Documentation & Handoff

Bridging the gap between design
and development

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
❋

Thinking Beyond the Internship

If I were to continue working on the project, I would focus on the following →

①

Expanding beyond the current user group

Focusing on design that would increase engagement from alumnae, fostering connection beyond campus

Focusing on design that would increase engagement from alumnae, fostering connection beyond campus

②

Making the community even more accessible

Integrating sign-ups as part of the site experience rather than outbound links—reducing even more friction for participation

Integrating sign-ups as part of the site experience rather than outbound links—reducing even more friction for participation

③

Measuring success over time

Track increased unique members for the organization over time and survey prospective and current members on the effectiveness of the site in facilitating participation

Track increased unique members for the organization over time and survey prospective and current members on the effectiveness of the site in facilitating participation

Thinking Beyond the Internship

If I were to continue working on the project, I would focus on the following →

①

Expanding beyond the current user group

Focusing on design that would increase engagement from alumnae, fostering connection beyond campus

②

Making the community even more accessible

Integrating sign-ups as part of the site experience rather than outbound links—reducing even more friction for participation

③

Measuring success over time

Track increased unique members for the organization over time and survey prospective and current members on the effectiveness of the site in facilitating participation