School of Public Policy: Diversity, Equity and Inclusion

A landing page to showcase Georgia Tech’s School of Public Policy Diversity, Equity, and Inclusion initiatives.

The Problem

How can the School of Public Policy best showcase its research, education, and initiatives related to Diversity, Equity, and Inclusion?

Objective

Create a digital artifact that displays the Diversity-Equity-Inclusion (DEI) activities at the School of Public Policy. This artifact should be static and simple to edit for future student associates.

Background

In 2020, Georgia Tech announced its ten-year Strategic Plan, which focuses on the university becoming “an example of inclusive innovation, a leading technological, research university relentlessly committed to serving the public good.”

In an effort to support the plan, the School of Public Policy (SPP) wanted a shareable digital artifact showcasing its efforts related to Diversity, Equity, and Inclusion. As the web designer for the SPP, I was tasked to think of a way to both support this effort and highlight research, curriculum, and events happening within SPP.

Project Duration

February – May 2021

Scope

  • UX/UI
  • Ideation
  • Wireframing
  • Low-fidelity prototype
  • User Testing
  • High-fidelity prototype

Tools

  • Sketch
  • Postit notes
  • Figma
  • Drupal

Team

Myself

What I worked on

  • Competitive analysis
  • User interviews
  • Low-fidelity wireframes
  • High-fidelity mockups

What I learned

I learned how to design and iterate within a tight deadline. It was a great opportunity to take the skills I learned from class and apply them in a professional setting. Thanks to my previous experience, I was able to carefully plan and explain my design to various stakeholders.

Design & Iteration

Competitive Analysis

The first step in the design process was conducting a competitive analysis to understand how other universities explain their DEI efforts. This way, I could get a better understanding of the market and understand what users expect to learn from these resources. I compiled a list of landing pages and informational brochures from different universites. I wrote notes on the pros and cons of those websites in order to inform my future design. I researched universities that were comparable to Georgia Tech’s academic rigor and mission such as Harvard, University of Georgia, Yale, University of Maryland School of Public Policy, and Goldman School of Public Policy.

Screenshot of my competitive analysis and notes that I used to inform my future designs.

User Interview

My supervisor acted as my client and user for this project. We meet weekly to discuss goals and review design iterations. After our first meeting we confirmed a list of requirements for the final product:

  1. Simple webpage
  2. One-page
  3. Well organized with links to current website
  4. Easy to edit for future student associates
  5. Static (don’t need to update frequently)

Sketching Wireframes

With website inspirations and client demands in mind, I then sketched wireframes to strike a balance. I focused on a simple layout that showcased the three important elements: Diversity, Equity, and Inclusion.

Revised Wireframes

After presenting the eight wireframes to my client, she asked to make a few changes moving forward.

  1. Instead of using the categories Diversity, Equity, and Inclusion to organize the webpage, it’s better to use Engage, Learn, and Research. That way we can categorize the current work happening in the School such as events, courses, academics, conferences, etc.
  2. Draft 3 & 4 are the strongest as they are simple yet effective. Move forward with these designs.

I created four more wireframe drafts before implementing them on Figma. I wanted to be sure the structure was sound so the construction process went seamlessly. Additionally, I was still debating between long three-row categories and short three columns. While I find the long rows more visually appealing, the three columns are sharp and potentially shorter.

High-Fidelity Protoypes

I presented the wireframes to my client once more. Based on my recommendation and her preference, we chose to move forward with three full-width rows. I supported that decision in the end as I believed it clearly yet beautifully presented the information. The three columns felt too cramped and text-heavy which is why I did not move forward with this layout.

Next, I used Figma to create high-fidelity prototypes replete with Tech-approved images, copy, and live links.

Final Design & Next Steps

After receiving approval of the design from the Interim Chair of the School of Public Policy, I built the interface on Drupal. Since the structure, images, and text were are all approved and ready to go, this process was rather quick. I learned how careful planning and research can significantly reduce time in the implementation phase.

Below is the screenshot of the published webpage that was on the School of Public Policy’s website.

While my client and the interim chair of the School of Public Policy approved the webpage, it was ultimately unpublished. The school was transitioning into a new chair who was going in a different direction. They wanted to keep this design draft so that the future chair could approve it. I was elated to hear how much my supervisors liked my design. I completely understood why this wasn’t the best time to publish. I was thankful for the opportunity to use skills from my program to make an impact on the School of Public Policy.