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.
How can the School of Public Policy best showcase its research, education, and initiatives related to Diversity, Equity, and Inclusion?
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.
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.
February – May 2021
- Low-fidelity prototype
- User Testing
- High-fidelity prototype
- Postit notes
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
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.
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 webpage
- Well organized with links to current website
- Easy to edit for future student associates
- Static (don’t need to update frequently)
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 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.
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.
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.
You must be logged in to post a comment.