Goldman School of Public Policy
Highlighting an inclusive community & encouraging connection across students.
OVERVIEWRole: UX Designer
Platform: Desktop
Duration: 3 months
Tools: Figma, Expression Engine
As the Accessibility Designer for GSPP, I was challenged to redesign the Master of Development Practice (MDP) statistics page. The existing page, though functional, was a minimally designed MVP that lacked visual representations needed to effectively communicate the program's diverse demographics. My role was to create a design that not only met accessibility standards but also enhanced the user experience by making the information more engaging and easier to navigate.
The ChallengeTo better understand the goals of the site, I first met with the stakeholder to talk about key objectives and challenges for the project. She emphasized that:
“It should inspire prospective students. The diversity and inclusivity of our program are strengths, but right now, all that data is just a bunch of text. We need a design that brings this information to life and makes it easy for people to understand at a glance.”
From this, I identified the main goals for the research/design, with the target audience of prospective students in mind:
💡
Highlight an inclusive community
USER RESEARCHI started off with conducting user research with a diverse group of prospective students to gauge their emotional responses to different types of demographic data. The participants varied in gender, nationality, and academic background, which provided insights into how different demographics perceive diversity.
⚖️
🌏
🕰
🎒
📊
📊
Female participants consistently rated gender balance as a top priority, emphasizing discomfort with a skewed gender ratio. Conversely, male participants were more indifferent about gender but valued diversity in other areas, such as geographic location and nationality.
Nationality & Geographic Location
International students prioritized diversity in geographic location and nationality, seeing it as essential for a program that benefits from varied perspectives. Domestic students also valued these factors but placed a stronger emphasis on academic diversity (e.g., undergraduate major).
Age
Age was deemed the least important demographic factor. While a range of ages in the program was seen as beneficial, it didn’t significantly influence decision-making. Prospective students were more interested in diversity of thought and experience, which they associated with varied academic backgrounds, nationalities, and gender representation, rather than age.
Undergraduate Major
Interviewees were generally indifferent toward undergraduate major as a demographic factor. While some valued academic diversity for the variety of perspectives it brings, it was not prioritized as highly as other factors like gender balance, nationality, or geographic diversity.
Underrepresented Minority Percentage
The statistic of 29% underrepresented minorities was not appealing to participants; in fact, it had the opposite effect, making the program seem less diverse. Many felt that this percentage fell short of their expectations and gave the impression that the program lacked broader inclusivity.
Design ProcessResultsThe redesign was tested with a new group of prospective students:
Improved Engagement: The time users spent on the MDP page increased by 75%, indicating that the information was more engaging and easier to digest.
Positive Feedback on Gender Representation: Female users reported feeling more confident about the program’s commitment to gender diversity, aligning with the earlier research findings.
Smooth Implementation: With the clear handoff process, ongoing discussions about interactive features, and consistent stakeholder communication, the development team implemented the design with minimal back-and-forth, launching the page on time and without major revisions.
Key Takeaways⛔️
📢
Showcase data in an engaging and accessible way
Persona 2: Econ Edwin
Gender Balance
Future ImprovementsAge: 27
Gender: Male
Nationality: International (Vietnam)
Background: B.A. in Economics
I then defined 2 user personas to create a more targeted focus for the audience of the product and to keep in mind for future design decisions.
Persona 1: Graduate Grace
Age: 24
Gender: Female
Nationality: Domestic (U.S.)
Background: Recent grad with B.A. in Sociology
GOALS
To be part of a program with diverse geographic & national backgrounds for broad range of perspectives.
To share international insights to enhance discussions and projects with peers from around the world.
FRUSTRATIONS
Concerned that limited international diversity may restrict depth of discussions and learning experiences.
GOALS
To be part of a program with a balanced gender ratio where she feels comfortable and included.
To collaborate with diverse peers in a supportive academic environment.
FRUSTRATIONS
Concerned about feeling isolated or uncomfortable in a male-dominated program.
Optimizing Information Architecture
I reorganized the information architecture of the page to align with user priorities. Demographic data was grouped into meaningful categories—such as Gender, Nationality, and Academic Background—making it easier for users to find and understand the information that mattered most to them.
MVP’s heirarchy
Revised information architecture designed to convey program’s inclusivity and diversity.
Accessibility and Update Ease
WCAG Compliance: I ran into an issue where the branded colors used in the charts didn’t meet the required color contrast for accessibility, seeing as any sort of yellow against any sort of gray almost never has an adequate contrast ratio. Instead of changing the colors completely, I added data tables in text format as a workaround to make sure the information was still accessible. This way, we were able to keep the brand’s look while making sure the data was clear and usable for everyone.
PRIMARY PALETTE
Berkeley Blue
Hex 002676
California Gold
Hex FDB515
Accessibility is key
While I had experience with remediating accessibility issues across existing pages, this was my first time creating a design with one of the main goals being accessibility. The data visualization part of it was one that required me to do extensive research on best practices, especially considering the limitations with the color palette considering the branding. However, it was a fun challenge, and I’m very glad I got the opportunity to tackle it!
Communicate, Communicate, Communicate
This was also my first experience with handing off my designs to engineers for development. It was an incredible learning experience to understand the importance of communicating with them every step of the way. I also had regular communication with the stakeholder in order to receive and incorporate feedback. This project really highlighted the importance of clear, detailed handoffs and ongoing collaboration to ensure the final product matches the design vision.
Different Approach to Color Usage in Graphs
During my research on best practices for creating web-accessible graphs, I realized that my initial solution—providing a data table alongside the graph—wasn't the most effective. A more technically sound approach would involve using patterns within the graph’s slices. This method eliminates the reliance on color alone, ensuring the information remains accessible to all users, including those with color vision deficiencies.
Simple, Scalable Design: I designed the page to be easily updated each year, using dynamic text and data visualization techniques that wouldn't require a full redesign. I also collaborated with the web developers to make sure the designs were possible to implement, as the stakeholder specifically requested a solution that could be easily updated from year to year.
FINAL SOLUTION