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 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.
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.
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.
Reflections
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.
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
You must be logged in to post a comment.