top of page
LIN ZHANG
Jackman Humanities Institute Website Redesign
Client Name
University of Toronto Jackman Humanities Institute
Platform
Website
Methods
Lean UX, usability testing, experience mapping, sketching, mid and high-fidelity prototyping, story board
Tools
Figma, Photoshop, Illustrator, Sketch
Project Overview
The Jackman Humanities Institute (JHI) advances scholarship at the University of Toronto by creating new networks for interaction among humanities scholars, regardless of their discipline.
The current JHI website offers all funding program, research communities, and communications information on the website, but most users still prefer asking details through emails.
This project is helping the Jackman institute to redesign its website to provide a better service for website users and to engage users to use the website frequently.
Current JHI website home page
The Project Plan
To address challenges, this project started with prioritizing user groups, identifying their needs and pain points in using the JHI website, and making decision on the key features that need to redesign to fulfill both user needs and business goals.
This project utilized a lean UX approach to built an MVP (Minimum Viable Product) in response to the needs of the JHI website and its users. A Lean UX approach allowed the design team to test each feature and determine if it adds value to years and business in the most time efficient way.
The two-week sprint method allowed the team to manage their time and effort most efficiently when iterating and testing one feature before moving on to the next. This strategy maximized the agility of the design and ensured that the team can produce a highly desirable finished product.
Our Approach
Usability Testing On Current JHI Website
Before starting website redesign, 4 users were recruited for usability testing. They were asked to finish three tasks:
1. Apply for funding
2. Find event information
3. Find information for a related project
The actions and error data were collected onto sticky notes and attempted to arrange them into affinity diagrams based on different tasks. We found that information seeking is a big problem on this website. We created an experience map to visualize the testing data and created persona based on testing data.
Sticky notes - Affinity Diagram
Experience Map
This is a experience map for JHI website information architecture, which is focusing on the user experience of seeking information on website.
The Design Process
The hypotheses and persona
From the usability test and the experience map, we got some ideas of what needs to be redesigned. We organized those ideas into a problem statement, user assumptions, and business goals using a Lean UX template. A persona was created to represent these assumptions in such a way as to help the team to capture user characteristics, user needs and goals, and intended features.
Preliminary Prototype and Usability Testing
In this project, we had two cycles of sprint. We split assumptions and intended features into those two sprints. Each sprint started with sketching out assumptions to paper prototype, followed by informal usability testing to validate assumptions. Our team came up with a final decision on the prototype and iterated the design based on the testing results.
We focused on redesign Information Architecture on JHI website home page.
Low Fidelity Prototype
Individual sketch - Features that are important:
-
Search bar
-
Website header menu
-
Filterable calendar
-
Drop-down menus
Low fidelity prototype - Features that are important:
-
Search bar
-
Website header menu
-
Fat footer
-
Consistent labels
Low Fidelity Prototype Usability Testing
For usability testing, our team went to the Jackman Humanities building to randomly find participants. The only screening question was if participants are faculty members or students at UofT. Before the usability testing, we gave a quick introduction to the project and our assumptions about those features. We would like to 1. confirm if our assumptions match with user needs; 2. test if users like the new layout of homepage prototype and gather data on their suggestions and feelings.
Guided Question:
-
Where would you go if you want to find
-
Undergrad fellows
-
Upcoming events
-
Scholars in Residence
-
Contact info
-
Blogs
-
How do you feel about information in the header?
-
How do you feel about information in the footer?
-
Are the labels clear?
-
Additional comments about body of the homepage?
P1&P2
P3
P6-4
P1&P2
1/8
Home page iterations
Features that are important:
-
A section on the homepage that highlights current activities in JHI
-
Slideshow on the homepage
Clickable Medium Fidelity Prototype
The home page presents important event information, annual themes and funding options that allow users save time in finding information. The layout of information has changed from low fidelity prototype
Home Page
About drop down menu
Events drop down menu
Home Page
1/5
User feedback:
-
Clean, simple professional looking home page
-
Scholars In Residence should be moved to Fellowship
-
There was a lot of white space
-
Did not understand the “Humanities at UofT” central footer
-
Donation/Register are hard to read
-
The header changes when you click onto the next page
-
Horizontal menus on the home page become vertical
-
Confused why there was no About Page in the About Section
-
Under Research, unclear what Aesthetic Humanities is
-
Under Events: Art at JHI and Recordings seem out of place
High Fidelity Prototype
Based on the testing feedback, our team started to work on the design iteration and transferred the prototype to high-fidelity and interactive prototype.
High Fidelity Prototype Storyboard
Final Deliverable
Home Page
Home page scroll menu
Events drop down menu
Home Page
1/6
Lesson Learned
-
Solid understanding of Experience map and Lean UX
-
Strong ability to apply Experience map and Lean UX approach to discover Information architecture (IA)
-
Work with real project and client
-
Effectively communication with team and project partner to meet partner's requirement
bottom of page