University of Chicago Website Design

University of Chicago Website Design

University of Chicago Website Design

Consultation with University of Chicago’s Polsky Center for Entrepreneurship and Innovation to revamp their website design and improve usability.

Consultation with University of Chicago’s Polsky Center for Entrepreneurship and Innovation to revamp their website design and improve usability.

Consultation with University of Chicago’s Polsky Center for Entrepreneurship and Innovation to revamp their website design and improve usability.

ORG

University of Chicago

ROLE

UX Researcher & Designer

YEAR

2021

Project Overview

Project Overview

Research

Research

Design

Design

Outcomes

Outcomes

Takeaways

Takeaways

Project Overview

Project Overview

Project Overview

Background

Background

University of Chicago Polsky Center is a professional development hub that supports entrepreneurial technology projects by partnering with investors, project partners, and project creators. The Polsky Center website plays a major role in outreach and communication of these technologies with industry professionals. Overall goal is to form a partnership with collaborators, fund their research and product inventions, and eventually have companies license patents to their intellectual property all through the process of technology transfer.

Task

Task

The main issues faced by the Polsky Center for their website redesign were determining how to facilitate website navigation and how to improve the discoverability of key elements within the site. The task was to evaluate and redesign 3 core screens of the Polsky Center website: technology publisher home page, search page, and technology detail page.

Home Page

Search Page

Technology Detail Page

Process

Process

Process

Research and Problem Definition

Research and Problem Definition

Performed a heuristic evaluation, competitive analysis, and interviewed industry partners to better understand the problem and define our UX requirements.

Iterative Design

Iterative Design

Brainstorming and design planning, followed by high fidelity designs.

Validation Testing

Validation Testing

Usability testing on design concepts with users and corresponding design changes.

Client Handoff

Client Handoff

Developed implementation plan with the client and shared final design materials with interactive prototype included.

Defining the Problem

Defining the Problem

Defining the Problem

Guidelines from our client in terms of specific improvements to be made were minimal, so it was up to our team to evaluate the current experience, become familiar with the process of technology transfer, and design a seamless experience for industry partners. Our main goals for our discovery research were to

  • Identify pain points in the current website

  • Understand the hierarchy of information and form design recommendations that prioritize content to increase discoverability of available technologies

  • Determine a homepage structure that allows new users to onboard to the Polsky Center and their technology transfer process

  • Determine users' mental model around technology transfer process/when engaging with the website

Guidelines from our client in terms of specific improvements to be made were minimal, so it was up to our team to evaluate the current experience, become familiar with the process of technology transfer, and design a seamless experience for industry partners. Our main goals for our discovery research were to

  • Identify pain points in the current website

  • Understand the hierarchy of information and form design recommendations that prioritize content to increase discoverability of available technologies

  • Determine a homepage structure that allows new users to onboard to the Polsky Center and their technology transfer process

  • Determine users' mental model around technology transfer process/when engaging with the website

Guidelines from our client in terms of specific improvements to be made were minimal, so it was up to our team to evaluate the current experience, become familiar with the process of technology transfer, and design a seamless experience for industry partners. Our main goals for our discovery research were to

  • Identify pain points in the current website

  • Understand the hierarchy of information and form design recommendations that prioritize content to increase discoverability of available technologies

  • Determine a homepage structure that allows new users to onboard to the Polsky Center and their technology transfer process

  • Determine users' mental model around technology transfer process/when engaging with the website

First our team identified direct and indirect competitors for competitive analysis (other technology transfer organizations = direct competitors, organizations with similarly functioning filtering and search capabilities/licensing purposes = indirect competitors). From this analysis we had several key takeaways:

  • Grid formats are good ways to balance text and images when browsing many items

  • Offering many views to browse adds greater flexibility to users

  • More concise summaries make it easier to parse technologies

  • Helpful to provide resources to onboard users to technology transfer and the center

  • Most technology publisher website’s landings page go directly to search

  • Adding more precise filter criteria promotes greater exploration

First our team identified direct and indirect competitors for competitive analysis (other technology transfer organizations = direct competitors, organizations with similarly functioning filtering and search capabilities/licensing purposes = indirect competitors). From this analysis we had several key takeaways:

  • Grid formats are good ways to balance text and images when browsing many items

  • Offering many views to browse adds greater flexibility to users

  • More concise summaries make it easier to parse technologies

  • Helpful to provide resources to onboard users to technology transfer and the center

  • Most technology publisher website’s landings page go directly to search

  • Adding more precise filter criteria promotes greater exploration

First our team identified direct and indirect competitors for competitive analysis (other technology transfer organizations = direct competitors, organizations with similarly functioning filtering and search capabilities/licensing purposes = indirect competitors). From this analysis we had several key takeaways:

  • Grid formats are good ways to balance text and images when browsing many items

  • Offering many views to browse adds greater flexibility to users

  • More concise summaries make it easier to parse technologies

  • Helpful to provide resources to onboard users to technology transfer and the center

  • Most technology publisher website’s landings page go directly to search

  • Adding more precise filter criteria promotes greater exploration

Based on this information, we had a better idea of how to evaluate the current website experience in our heuristic evaluation. Some common themes:

  • Confusion between homepage and search page

  • No visual highlight when tabbing through the page. Cannot navigate the page using a keyboard

  • Buttons are not styled consistently across different web pages

  • Multiple tag selection displays results that include any of the selected tags, and not overlapping tags

  • The website has a nice aesthetic and branding

  • Filter tag selection will not be saved

Based on this information, we had a better idea of how to evaluate the current website experience in our heuristic evaluation. Some common themes:

  • Confusion between homepage and search page

  • No visual highlight when tabbing through the page. Cannot navigate the page using a keyboard

  • Buttons are not styled consistently across different web pages

  • Multiple tag selection displays results that include any of the selected tags, and not overlapping tags

  • The website has a nice aesthetic and branding

  • Filter tag selection will not be saved

Based on this information, we had a better idea of how to evaluate the current website experience in our heuristic evaluation. Some common themes:

  • Confusion between homepage and search page

  • No visual highlight when tabbing through the page. Cannot navigate the page using a keyboard

  • Buttons are not styled consistently across different web pages

  • Multiple tag selection displays results that include any of the selected tags, and not overlapping tags

  • The website has a nice aesthetic and branding

  • Filter tag selection will not be saved

Hearing from Our Users

Hearing from Our Users

Hearing from Our Users

After doing independent research and analysis, our team had an opportunity to interview industry partners supplied by our client. In these interviews, we hoped to gain a better understanding of the technology transfer process, what their work looks like, and examine the usability of the current website experience to either validate or expand our current framework.

Sample questions:

  • Can you describe the steps you take when looking for available technologies?

  • Are there specific features that help accelerate your search?

  • What information is helpful when trying to understand the technology transfer process?

We also walked them through several usability tasks across our 3 core screens and observed how they engaged with the website.

Examples of tasks:

  • Navigating to Available Technologies from the home page

  • Filtering technologies by category

  • Identifying key information about a selected technology

After doing independent research and analysis, our team had an opportunity to interview industry partners supplied by our client. In these interviews, we hoped to gain a better understanding of the technology transfer process, what their work looks like, and examine the usability of the current website experience to either validate or expand our current framework.

Sample questions:

  • Can you describe the steps you take when looking for available technologies?

  • Are there specific features that help accelerate your search?

  • What information is helpful when trying to understand the technology transfer process?

We also walked them through several usability tasks across our 3 core screens and observed how they engaged with the website.

Examples of tasks:

  • Navigating to Available Technologies from the home page

  • Filtering technologies by category

  • Identifying key information about a selected technology

After doing independent research and analysis, our team had an opportunity to interview industry partners supplied by our client. In these interviews, we hoped to gain a better understanding of the technology transfer process, what their work looks like, and examine the usability of the current website experience to either validate or expand our current framework.

Sample questions:

  • Can you describe the steps you take when looking for available technologies?

  • Are there specific features that help accelerate your search?

  • What information is helpful when trying to understand the technology transfer process?

We also walked them through several usability tasks across our 3 core screens and observed how they engaged with the website.

Examples of tasks:

  • Navigating to Available Technologies from the home page

  • Filtering technologies by category

  • Identifying key information about a selected technology

We gathered insights from interviews/usability testing into an affinity diagram to start identifying common themes. Some of the most valuable insights:

  • The Polsky technology publisher is too text heavy, which makes it difficult for users to parse content

  • Users saw little value in the technology publisher homepage

  • Many users were impressed with the responsiveness of search

  • Search results appear unprofessional and not helpful (with the exception of filter tags and technology titles)

  • Users are not typically browsing technology publisher websites

We gathered insights from interviews/usability testing into an affinity diagram to start identifying common themes. Some of the most valuable insights:

  • The Polsky technology publisher is too text heavy, which makes it difficult for users to parse content

  • Users saw little value in the technology publisher homepage

  • Many users were impressed with the responsiveness of search

  • Search results appear unprofessional and not helpful (with the exception of filter tags and technology titles)

  • Users are not typically browsing technology publisher websites

We gathered insights from interviews/usability testing into an affinity diagram to start identifying common themes. Some of the most valuable insights:

  • The Polsky technology publisher is too text heavy, which makes it difficult for users to parse content

  • Users saw little value in the technology publisher homepage

  • Many users were impressed with the responsiveness of search

  • Search results appear unprofessional and not helpful (with the exception of filter tags and technology titles)

  • Users are not typically browsing technology publisher websites

Mapping out the Requirements

Mapping out the Requirements

Mapping out the Requirements

All the insights from discovery research resulted in a detailed list of requirements, organized by category and priority. This chart guided our design process.

All the insights from discovery research resulted in a detailed list of requirements, organized by category and priority. This chart guided our design process.

All the insights from discovery research resulted in a detailed list of requirements, organized by category and priority. This chart guided our design process.

Brainstorming Solutions

Brainstorming Solutions

Brainstorming Solutions

Once requirements were defined and we had a clear path forward, we were able to start sketching design solutions. Low fidelity and mid fidelity design phases were mainly to establish core screens, design vision, and get alignment across pages.

Once requirements were defined and we had a clear path forward, we were able to start sketching design solutions. Low fidelity and mid fidelity design phases were mainly to establish core screens, design vision, and get alignment across pages.

Once requirements were defined and we had a clear path forward, we were able to start sketching design solutions. Low fidelity and mid fidelity design phases were mainly to establish core screens, design vision, and get alignment across pages.

During these brainstorming sessions, the design team made the decision to combine the Home Page and Search Page into one overarching search page. From screen, our new design would offer a navigation tab to allow users to alternate between core functions: Search Technologies, Explore More, Contact, and Resources.

We also settled on a dashboard format for the Technology Detail page due to research and usability testing showing that the current site was far too text heavy and difficult for users to parse important information.

Search Page

Search Page

Search Page

High fidelity explorations of the Search Page and filtering capabilities incorporated playing around with color from the Polsky team's brand guidelines. We explored both grid and list view displays, and variations of the "quick summary" underneath the technology names.

High fidelity explorations of the Search Page and filtering capabilities incorporated playing around with color from the Polsky team's brand guidelines. We explored both grid and list view displays, and variations of the "quick summary" underneath the technology names.

High fidelity explorations of the Search Page and filtering capabilities incorporated playing around with color from the Polsky team's brand guidelines. We explored both grid and list view displays, and variations of the "quick summary" underneath the technology names.

Technology Detail Page

Technology Detail Page

Technology Detail Page

On the Tech Detail pages, we were much more easily able to tell that the use of color was overwhelming and looked professional, leading us to tone down the color usage within the dashboard. In order to help our users more efficiently parse information and easily find what they're looking for, our redesign introduced a series of tabs within the dashboard to break up the information between technology summary, current status, advantages, and publications.

On the Tech Detail pages, we were much more easily able to tell that the use of color was overwhelming and looked professional, leading us to tone down the color usage within the dashboard. In order to help our users more efficiently parse information and easily find what they're looking for, our redesign introduced a series of tabs within the dashboard to break up the information between technology summary, current status, advantages, and publications.

On the Tech Detail pages, we were much more easily able to tell that the use of color was overwhelming and looked professional, leading us to tone down the color usage within the dashboard. In order to help our users more efficiently parse information and easily find what they're looking for, our redesign introduced a series of tabs within the dashboard to break up the information between technology summary, current status, advantages, and publications.

Contact Page

Contact Page

Contact Page

Participants from our user interviews offered the insight that an important detail they look for is the point of contact for licensing technologies and getting in contact with the Polsky Center. The original site design didn't offer a designated page for contact info, so this was a net new screen. Here we played around with what information to include, whether it be subscribing to the hub's newsletter, browsing upcoming events, or viewing profiles of featured inventors. Based on engineering feedback, we determined that some of these additions may be out of scope for this project, so we opted for the newsletter signup and a community engagement section in the final design.

Participants from our user interviews offered the insight that an important detail they look for is the point of contact for licensing technologies and getting in contact with the Polsky Center. The original site design didn't offer a designated page for contact info, so this was a net new screen. Here we played around with what information to include, whether it be subscribing to the hub's newsletter, browsing upcoming events, or viewing profiles of featured inventors. Based on engineering feedback, we determined that some of these additions may be out of scope for this project, so we opted for the newsletter signup and a community engagement section in the final design.

Participants from our user interviews offered the insight that an important detail they look for is the point of contact for licensing technologies and getting in contact with the Polsky Center. The original site design didn't offer a designated page for contact info, so this was a net new screen. Here we played around with what information to include, whether it be subscribing to the hub's newsletter, browsing upcoming events, or viewing profiles of featured inventors. Based on engineering feedback, we determined that some of these additions may be out of scope for this project, so we opted for the newsletter signup and a community engagement section in the final design.

Results

Results

Results

Validation testing was done with 4 industry partners in a very similar format to our first round of usability testing, with questions and tasks modified only slightly where it was necessary to reflect design changes. We received some minor feedback that we implemented as reflected in the final prototype.

Validation testing was done with 4 industry partners in a very similar format to our first round of usability testing, with questions and tasks modified only slightly where it was necessary to reflect design changes. We received some minor feedback that we implemented as reflected in the final prototype.

Validation testing was done with 4 industry partners in a very similar format to our first round of usability testing, with questions and tasks modified only slightly where it was necessary to reflect design changes. We received some minor feedback that we implemented as reflected in the final prototype.

Search Results

Search Results

Feedback: Somewhat difficult to understand which content is grouped together on grid card results

Action: Added drop shadow and spacing across cards to increase distinction across information groups

Images on Tech Detail Page

Images on Tech Detail Page

Feedback: Images do not have caption describing what the image is and why it’s important to users

Action: Provide captions when user selects view image in full screen

Newsletter Form

Newsletter Form

Feedback: Newsletter signup being mistaken for a contact form

Action: Change the header color to be more consistent with the rest of the page and use a more clear header to describe the form

Begin by clicking "Available Technologies" in the upper right corner. Navigate to the "Search Technologies" tab and apply the "Therapeutics" filter to test filtering results. Then click into the first card to get a view of the Technology Details Page.

Solutions

Solutions

Solutions

The final design resulted in a 7.5 point increase in System Usability Score based on user ratings (72.5 points for the original site and 80 points for the redesign).

The final design resulted in a 7.5 point increase in System Usability Score based on user ratings (72.5 points for the original site and 80 points for the redesign).

The final design resulted in a 7.5 point increase in System Usability Score based on user ratings (72.5 points for the original site and 80 points for the redesign).

Increased Home Page Value

Increased Home Page Value

Improved value of home page by directing users to search and reducing their required number of clicks.

Scannability

Scannability

Improved appearance of technology details by effectively synthesizing and grouping information for easy scanning.

Community Engagement

Community Engagement

Improved opportunities for community outreach by more clearly providing access to points of contact.

Takeaways

Takeaways

Takeaways

Challenges and constraints

Challenges and constraints

Challenges and constraints

Usability Testing

Usability Testing

We were limited in how frequently we were able to get access to participants for user testing, so we saved the industry partners for validation testing and used feedback from design critiques and client meetings for iterations throughout the design process.

Minimal engineering involvement

Our team reached out to the University of Chicago development team to receive feedback and feasibility insights on our in-progress designs, but were unable to meet with them as frequently as I would have liked to truly have their input and ensure a smooth handoff for implementation.