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 should the School of Public Policy showcase its research, education, and initiatives related to Diversity, Equity, and Inclusion for current & prospective students, as well as comparable universities?

Objective

Finalize and format an electronic brochure and/or webpage on the Diversity-Equity-Inclusion (DEI) activities at the School of Public Policy. This digital artifact should be easy to edit for future student associates, as well as static.

Background

In an effort to support new sustainability initiatives at Georgia Tech, led by President Ángel Cabrera, the School of Public Policy wanted a digital artifact to showcase efforts related to diversity, equity, and inclusion.

Project Duraiton

February – May 2021

Scope

  • UX/UX
  • User Research
  • Ideation
  • Wireframing
  • High-fidelity prototype

Tools

  • Sketch
  • Postit Notes
  • Figma
  • Drupal

Team

Michelle Ramirez

What I worked

  • Conducted research
  • Created a Competitive Analysis
  • Conducted user interview
  • Sketched low-fidelity wireframes
  • Created high-fidelity mockups

What I learned

I learned how to apply skills and theory from class and apply them to a real-life scenario that had a short deadline. Even though my final designs were approved by my supervisor, they were not officially published on the website. This was a great opportunity to understand what it’s like to work on design projects in the real world – even if they’re great they don’t make it to market which is okay. It’s important on focuses on how to improve my skills and make sure my clients are happy.

Design & Iteration

Competitive Analysis

I reviewed how other universities are explaining their diversity, equity, and inclusion efforts. I compiled a resource list of their landing pages & brochures and wrote notes about what I felt they did well and could be improved upon. I selected universities that are comparable to Georgia Tech’s academic rigor & mission such as Harvard, University of Georgia, Yale, University of Maryland School of Public Policy, and Goldman School of Public Policy.

User Interview

For this project, my supervisor acted as my client and user. Since she requested this assignment, I made sure to address her questions, concerns, and needs.

Upon completing my initial research, I spoke to her at length about her goals for this digital artifact. The list of demands follows

  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 highlighted 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 adequately and beautifully presents the information. Whereas the three columns are too cramped and text-heavy.

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 patience with planning and research really matters 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 of this webpage, it was ultimately unpublished on put on the backburner. The school was transitioning into a new chair who was going in a new direction. They wanted to keep this design draft in the future, once the new chair had been selected and approved of the webpage. It was a bit disappointing to go through this work to only be asked to “pause,” but I learned so much from this process. It feels good to know that my draft could help someone else in the future and be approved by senior researchers and staff in the School of Public Policy. I did not take it personally but treated it as an event that probably happens in the real workplace.