QUEEN'S UNIVERSITY

Postgraduate Program Information Redesign

This project involved the redesign of the Postgraduate Program Information webpage within the School of Medicine website. While using SiteImprove to make sure all of our websites were level AAA in their AODA Compliance, this page was flagged as non-compliant. The page was created by one of our department editors as a directory for prospective residents to choose between available postgraduate programs. Although this page housed very important program information, it was unorganized, visually unappealing, and had a very long scroll depth. The purpose of this project was to redesign this page into one that would house important program information for prospective residents as well as attract them towards this University all while keeping in mind AODA compliance. I was tasked with research, analysis, design, and build of this webpage.

Team: Saif Elmaghraby and Michael Ferguson

Research and Understand

Although this webpage played an important role in prospective residents' choice in universities, it lacked AODA compliance and organization as pictured below.

Understand

In order to do that, we needed to do some research regarding the user's needs and pain points, while keeping in mind our brand.

User needs:
- A directory to all available postgraduate programs.
- Engaging content such as videos and images to help users choose the right program.
Pain points:
- It is not AODA compliant
- It is unorganized making it visually unappealing and overwhelming
- Scroll depth is very long (users have to keep scrolling to find their program)
Brand:
- Specific design elements can be used
- Each program has equal importance
- Colours and design must match the website theme.

Empathize with the user

In order to best understand the purpose of this website and how it aligns with user needs, I decided to empathize with the user by using an empathy map. By mapping out what a prospective resident would say, do, think, and feel after using this website, I would then be able to define the problem statement.

Screen Shot 2022-01-10 at 5.57.07 PM.png

Define the problem

After analyzing the empathy map, I was able to define the problem statement as follows:

"Users visiting this webpage are faced with a plethora of unorganized and unappealing information that is not AODA compliant and expected to make a choice out of it. This is a problem because prospective residents are not able to trust and make decisions when confronted with this type of content. This situation causes frustration and uncertainty for both applicants and staff."

Ideate solutions

Using the problem statement, we can ideate solutions that would best fit the needs of the user and the brand we are designing for. In this case, we decided to use a mindmap:

HOMEPAGE

Prototyping feasible solutions

After brainstorming ways to tackle the problem statement, we needed to narrow down solutions that would be most feasible and viable for both the user and brand. In this case, we decided to go with two main prototyping ideas:

Idea #1

One-pager with anchors that display program details, video, PDF brochure, and contact information.
This idea solves for AODA compliance, organization, and attractiveness.
This idea does not solve for scroll depth and engagement.

Idea #2

Images with content that links out to each individual program pages outside of this page.
Each program page must also follow the same theme.
This idea solves for AODA compliance, organization, attractiveness, scroll depth, and engagement

Launching our designs

After wireframing and putting together possible solutions, we decided to narrow down our designs to the one design that seemed to solve for all of the user's pain points.