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

Michelle Ramirez

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.

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:

Simple, one-page webpage
Well organized with links to current website
Easy to edit for future student associates
Static (no 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.

Draft 1: Sketch of an extremely basic home page with no special features and minimal text.

Draft 2: Inspired by this website: https://dib.harvard.edu. The carousel function seems like a good feature, but may not be accessible.

Draft 3: Inspired by GT Industrial Design website. Simple layout with large photos and minimal text. Include buttons to link to other pages with more information.

Draft 4: Inspired by Cybersecurity website.
Photos are smaller with an emphasis on text instead of images.

Draft 5: Inspired by gatech.edu landing page. The emphasis is on photos instead of text.

Draft 6: Inspired by Tab Panel Set on Drupal and Maryland University.
Users click on the different panels to learn more about the categories (engage, research, learn). Not extremely image-focused.

Draft 7: Combination of elements: Triple photo Hero Image with links, tab panel to explain DEI initiatives, goals, mission.
Three images lead users to learn more about Research, Engage, and Learn.

Draft 8: Combination of elements: single hero image, tab panel to explain DEI initiatives, goals, mission. Engage, Research & Learn are placed in horizontal rows with image & description text.

Revised Wireframes

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

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.
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.

Draft A: There is a balance between the hero image & categories. Gray shading to create a difference in each row.

Draft B: Emphasis on the hero image & mission statement.

Draft C: Emphasis on the hero image and mission statement with a bullet point list of links under each subject.

Draft D: The emphasis is on the three categories & useful links.

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.

Version 1: The hero image & categories are full-width.

Version 2: The hero image & categories are narrow-width. (The final selection).

Version 3: This prototype confirmed the three columns are not the best structure moving forward. The text under “Develop” has more weight and creates an imbalance. Additionally, the condensed text makes the page appear too wordy and may disinterest users.

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.

Reflections

Lessons learned

Make design decisions within a tight deadline
How to say goodbye when a project can’t be executed
Careful planning leads to seamless execution phase

Successes

I felt stronger in my design skills! I could mock up wireframes, make design decisions, and prototype in a quick pace

Next Steps

I’d love for this design to eventually be published on the website
User testing with students to see if any information is missing