Ripley's Accessibility Design
Role
Project Manager
UX Designer
Team
Erica Lee (UXR)
Valerie Wu (UXD)
Colin Xiao (UXD/Client Contact)
Lu Liu (UXD)
Tools Used
Figma
Canva
Miro
Timeline
Winter 2024 (4-Month)
At a glance
During winter 2024 I had the pleasure of working with the School of Graduate Studies and lead the redesigning efforts of the website. The University of Toronto's School of Graduate Studies (SGS) website serves as a pivotal platform to provide comprehensive information and resources at every phase and aspect of the graduate learning journey.
This redesign project focuses on making improvements to the navigation design and most frequently sought-after user paths/flows, such as program applications for prospective students and writing support for current students and employees.
Process
Research
Ideation
Testing
- Questionnaires
- Moderated Interview
- Observation
- Brainstorming
- Prototyping
- Storyboarding
- Usability Testing
- Feedback
- Accessibility
Impact
Increased average user satisfaction of website from 6.12/10 to 9.05/10
Reduced average search time for key resources by 86%
Eliminated content redundancies across crucial workflows, reducing user confusion and increasing clarity of information
Problem
Despite the university's reputation for excellence, its graduate studies website fails to meet users' needs due to design inconsistencies and content redundancy from multiple developer iterations. This results in poor information findability and inconsistent elements, significantly impacting the user experience for prospective students, current students, and staff.
Addressing these issues is crucial to align with SGS's mission of providing comprehensive information and enhancing the graduate school's reputation.
Alignment
Prior to starting our research it is crucial to understand first and foremost what are our client's objectives. We prioritized uncovering this during our first meeting with the clients.
Client Objective 1
To promote and support the work and supports offered by the SGS centres by ensuring their services are easy for students to find and they understand the benefits.
Client Objective 2
To support administrative staff and departments with the tools, messages and information they need to support their students.
Client Objective 3
To promote and support the communications needs and priorities of the Dean and Vice-Deans.
How might we improve the SGS website's navigation to ensure that it effectively meets its user groups' diverse needs by enhancing the findability of key application resources and educational support?
Research
4 Prospective Students
4 Staff
5 Current Students
Survey capturing background and demographic information such as student status, faculty, etc...
1. Questionnaires
2. Moderated Interview
15-30 min. interview session consisting of questions uncovering their main goals on the site, their experience, and any frustrations they experienced.
3. Observation
Participants were given two different tasks based on which user group they belong to:
Students - Find the program requirements for your program, and find out how to apply.
Current Students and Staff - Can you find the writing support contact for grad students?
Affinity Diagram
Following the research conducted, our next steps were to categorize the information and consolidate the main themes identified into artifacts such as personas and as-is scenarios. Not only was this useful for us in determining our scope, this was also extremely helpful in communicating with our client.
Theme
Pain-point
User Quotes
Prioritization Grid
Due to the strict 4-month timeframe of this project and the sheer size of the website, we needed a way to prioritize all the identified these and polish our focus and scope. We utilized a prioritization grid to plot all of our identified themes based on feasibility and impact.
Through this process of categorizing and prioritizing, we were able to identify five main pain points for our users...
Pain Point 1
Poor information hierarchy and organization of informatio
Pain Point 2
No assistance when scrolling up large amounts of content
Pain Point 3
Sections within web pages are hard to distinguish and navigate through
Pain Point 4
Information overload due to overwhelming amount of information and poor layout design
Pain Point 5
Links, headings, buttons, and menu items lack context which confuses users
Personas
From our identified themes, we wanted to create two personas that embodied the frustrations of both students and staff at UofT. Incorporating insights from our interview, survey, and pain points, our personas allowed for a more focused and effective redesign of our ideal user.
As-Is Scenario
Alongside our personas, we created As-Is scenarios capturing what our users are doing, feeling, thinking, and the pain points their experiencing throughout their user journey of the SGS Site. This highlighted for us what steps of the user flow are going wrong, which in turn increased our focus and efficiency on problem solving.
Ideation
Brainstorming
For ideation, we needed to start brainstorming solutions for the problems identified in our research and thanks to the prioritization grid created previously we had a good sense of issues to focus on.
Here are the solutions we felt were "No Brainers" based on its impact and feasibility...
Mid-Fidelity
For our medium-fidelity designs we wanted to make sure we nailed our user needs identified in our research and bring some of our "No Brainer" solution to life. Below are some of the designs we came up with:
Figma File
High-Fidelity
In the High-Fidelity Prototype stage, we meticulously translated our mid-fidelity designs into polished, visually compelling interfaces. This phase emphasized precise visual details, advanced interactive elements, and seamless user experiences. The high-fidelity prototype served as a near-final representation, allowing stakeholders to visualize the end product with clarity and confidence.
Figma File.jpg)
Storyboarding
Following our high-fidelity prototypes, we created storyboards to contextualize our designs. This not only helped in communicating with our clients but also served as a point of comparison with our as-is scenario. Below is a brief summary of the user flow, for the full walkthrough please click the Figma link below.
Full Storyboard Walkthrough
Final Design
Usability Testing
With our prototypes done, we moved towards usability testing. This iterative process ensured that the final design was both intuitive and effective, meeting the high standards required for the SGS website.
Major Improvements
Thanks to our participants, we were able to uncover some flaws in our design and iterate on those. Here are some of the major changes...
Prioritizing support over marketing
Removing marketing material such as quotes and replacing them with resources such as news report carousels
Polishing workflows
Removing unnecessary tutorials on program applications, allowing users to be taken straight to application page straight from program information page.
White space management
We felt like the side-menu on the program information page allowed for a lot of unused white space, so we explored other designs and layout to figure out how to better utilize it.
Final DesignAccessibility Considerations
- Colour contrast fulfills WCAG AAA Requirements
- Line spacing is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing
- The purpose of each link can be determined from the link text alone or from the link text together
- Proper headings and clear/concise content in the pages for optimized screen reader capabilities
Reflection
Take-aways
- Learning the importance of efficient project management as it ensured smooth team coordination, timely completion, and effective communication throughout the project
- Having design artifacts and utilizing them as a tool for communication with clients
- Taking the proper time and due diligence to really understand the wants and needs of your client is crucial
Next Steps
- Conduct second round of user-testing of final design
- Expand design decisions and improvements to other areas of the site
- Hand-off to development team at SGS for implementation
