Goldman School of Public Policy
Highlighting an inclusive community & encouraging connection across students.
OVERVIEW
Role: UX Designer
Platform: Desktop
Duration: 3 months
Tools: Figma, Expression Engine
As the Accessibility Designer at GSPP, I redesigned the Master of Development Practice (MDP) statistics page from its original text-based version. I designed data visualizations, improved information architecture, and worked alongside the web developer to ship the demographics page.
Clarifying with the Client
RESEARCH
I began by working closely with the client to fully understand her vision for the design. To summarize, she had two main goals in mind:
Attract prospective students, particularly by by highlighting the strengths and unique aspects of the MDP program
Engage current students, by giving them a clear view of the program's demographics & fostering a sense of community
Building the MDP Image
OBJECTIVES
Building on those goals, I identified two key objectives for the design:
💡
📊
Restructuring
RESEARCH
I started off by taking a look at the current structure of the page. The statistics lacked categorization and jumped around from demographic to demographic. I made it my first task to clean up the way this information was displayed through research with participants that were both current students and interested students to understand what people prioritized when it came to highlighting an inclusive and diverse community.
And the Results are In
To highlight some notable results from the insights of emotional responses to different types of demographic data:
⚖️
Gender Balance
Female participants consistently rated gender balance as a top priority, emphasizing discomfort with a skewed gender ratio.
🕰
Age
Across the board, age was seen as least important and did not play a large role in decision-making.
📊
Underrepresented Minority %
The statistic of 29% underrepresented minorities ended up being more harmful than it was helpful, making the program seem less diverse.
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.
Representing the Data
RESEARCH
I initially referenced online studies and best practices to see what was deemed most effective for representing each statistic. However, I also wanted to conduct my own testing to ensure that these design choices would resonate with our specific target users—prospective and current MDP students.
Pi Charts
For the gender and nationality percentages, pie charts were the very clear winner, due to being percentages of a whole.
Map
When it came to nationality, between a list and map, the map view was the preferred option. The map visually conveys how geographically diverse the program is, and users found it more engaging as it allowed them to immediately see the spread of nationalities.
Undergrad Majors
For the undergraduate majors, list format was really the only option, as it’s more niche and lets people quickly scan to see if their major is represented.
Slider
Lastly, for the age range, the slider was best to display the youngest, oldest, and average age, which provides a more dynamic and interactive way of exploring this data.
Accessibility
RESEARCH
Accessibility was a central focus throughout this project, particularly when it came to the use of graphs and maps. These visual elements, while engaging, can be tricky to make accessible, especially for users with color vision deficiencies or those relying on screen readers. During the design process, I encountered issues where the colors I initially used for charts and maps didn’t meet the necessary contrast standards. However, I was limited to the color palette of Berkeley’s official design system, which made it a bit challenging to find a perfect solution.
Primary Palette
Berkeley Blue
California Gold
Accessibility
To address this, I made a tradeoff by adding a dropdown table below the visuals that would give users an alternative, text-based format for viewing the data. This ensured that those who had difficulty interpreting the charts or maps due to color contrast issues could still access the information in a clear and straightforward way. This added flexibility allowed me to maintain visual appeal while also prioritizing accessibility for all users.
The Final Product
Results
The 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.
Reflections
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.