University of Chicago Website Design
University of Chicago Website Design
University of Chicago Website Design
ROLE
UX Researcher & Designer
UX Researcher & Designer
UX Researcher & Designer
YEAR
2021
2021
2021
Project Description
Project Description
Project Description
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.
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
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.
Team
Core team of 4 researchers/designers
Home Page
Search Page
Technology Detail Page
Home Page
Search Page
Technology Detail Page
Home Page
Search Page
Technology Detail Page
Process
Process
Process
Research and Problem Defiinition
Performed a heuristic evaluation, competitive analysis, and interviewed industry partners to better understand the problem and define our UX requirements.
Iterative Design
Brainstorming and design planning, followed by high fidelity designs.
Validation Testing
Usability testing on design concepts with users and corresponding design changes.
Client Handoff
Developed implementation plan with the client and shared final design materials with interactive prototype included.
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.
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 Details 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.
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.
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 = 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
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.
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.
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.
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).
Increased Home Page Value
Improved value of home page by directing users to search and reducing their required number of clicks.
Scannability
Improved appearance of technology details by effectively synthesizing and grouping information for easy scanning.
Community Engagement
Improved opportunities for community outreach by more clearly providing access to points of contact.
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.
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
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
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
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.
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
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
Improved value of home page by directing users to search and reducing their required number of clicks.
Scannability
Improved appearance of technology details by effectively synthesizing and grouping information for easy scanning.
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
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.