.png){kind=small}
ICCIT Department Website
UX Research / Participatory Design / Qualitative Work Models
Role: Co-UX Designer, Participatory Design Moderator
Duration: 4 Months
Tools Used: Stormboard, Mural, Adobe Illustrator, Figma, Balsamiq
OVERVIEW
The University of Toronto Mississauga is a highly acclaimed public University specializing in research and World-renowned post-secondary education programs The ICCIT department of The University of Toronto Mississauga offers programs related to communications and media such as Communication, Culture, Information, and Technology (CCIT) and Digital Enterprise Management (DEM).The department features a website that holds relevant information regarding department news and updates and information on the different programs.
The team was tasked with identifying issues in the website and then offer design recommendations to resolve the website’s issues and therefore increase its usability.
THE CHALLENGE
To formulate design suggestions for improving the ICCIT Department’s usability via qualitative research methods to increase the website's user traffic, and interaction, and therefore elevate interest in the department programs.
THE DESIGN PROCESS
After defining the project's scope and challenge, the Design Process was outlined as a roadmap toward completing the project objectives.
Empathize
Define
Participatory Design
Thematic
analysis
design
EMPATHIZE
CONTEXTUAL INQUIRY
The goal in the empathizing stage is to identify the frequent user pain points that moderate to highly experienced users face. Moderately experienced users are defined as students in grade 11 or 12 thinking of applying to an ICCIT program while highly experienced user is defined as users that are current ICCIT students in their third to fifth years.
Contextual inquiry is a process where we assume the role of the novice user as the actual user assumes the position of the experienced user who teaches us how to use the website. We then ask them to teach us how to get to particular pages and then pick up user pain points via their side comments in the process and also how how they navigate through the website.
TRANSCRIPTS
We recorded any notable actions each user took such as an emotion evoked, the comments they make, how their eyes scan during the contextual inquiry sessions and then codified these transcripts to to make sense of our observations.
DEFINE - WORK MODELS
We created work models to get a better picture of the current experience of the ICCIT website. There are a total of 5 different types of models that we created for each user’s Contextual Inquiry sessions. This includes Flow, Sequence, Physical, Artifact, and Cultural work models.
FLOW MODEL
Flow models provide information on locations in the website where users face usability breakdowns in the process of executing tasks on the webstie. These breakdowns are highlighted in red. An example of a breakdown is when User 5 gets when they are taken to a separate website in search of the course description of the course CCT109.
SEQUENCE MODEL
Sequence Models shows the step by step process the user takes in accomplishing a given task. Pain points that the user experiences through each process are also identified and are highlighted in red.
PHYSICAL MODEL
The physical model shows what the users are looking at, hence the exact page they experience a certain pain point.
ARTIFACT MODEL
The Artifact Model recognizes any exterior tools used outside of the website to fully grasp the process and what the users use when doing tasks on the website.
CULTURAL MODEL
The Cultural Models recognize any cultural influence that can impact the experience, ease of use, and purpose of a user using the ICCIT website. In effect, the cultural models are different between our two different user groups as the more novice users could have their high school student culture recognized as an influence while the more experienced user is more directly influenced by the ICCIT program department and other departments they major or minor in.
AGGREGATE MODEL
We then made an Aggregate model for each form of work model which essentially combines all the users' models into one to understand repeating user breakdowns.
THEMATIC ANALYSIS
Usability Fails were formulated based on patterns of user struggles found in the Contextual Inquiry transcripts and the pain points derived from the multiple Work Models.
DESIGN REQUIREMENTS
We then made a list of design requirements which proposes to mitigate each usability fail found in our Thematic Analsysis
Thematic Analysis | Design Requirements |
|---|---|
Location of content is not apparent to users. | Website’s web pages should be labeled specifically and evidently so users are aware of their location on the website. |
Information for future students is not stated together nor is it clear to understand and find on the website. | Website should state information for all future students (highschool & transferring students) and said info should be located together in clear language. |
Home page does not look pleasing to users and lacks specific info users expect. | Website’s home page should be more sophisticated and aesthetically pleasing.
Website’s most accessed info (such as different ICCIT programs) should be located at the top of the home page.
|
Website has confusing navigation and sub navigation to inner pages.
| Website navigation labels should be concise.
Website navigation labels should be kept to a minimum.
Website sub navigation should be located easily and labels should be clearly visible to users.
|
Website requires too many unnecessary steps/too long to find full info/description on the program. | Website’s program page should contain a full description on the top of the corresponding program page.
|
Website requires too many steps/takes too long to find course info/description. | Website users should be able to locate course descriptions/information quickly - in 3 steps or less.
|
Website content in PDF formats are hard to see, an inconsistent format then the website and overall seem unnecessary (to users).
| Website content should be presented in consistent formats with the rest of the website (ie. web pages).
|
Content layout differs in certain pages program to program | Website layout should be consistent from page to page |
Insufficient information on tuition (none at all). | Website should provide information about tuition on the CCIT program page (explanation of deregulated program, annual fee payment etc.). |
Insufficient information on alumni/jobs. | Website should include a section about alumni experiences/reviews
Website should include future job opportunities on program page as well (not just on PDF)
|
Not enough information on what to expect from each program in program descriptions.
| Website should include more info about what to expect from each program (ex. Timetable, acceptance rate, cgpa etc.) |
Not all information/content is found on the ICCIT website itself.
| Website content/information should be available on the website without going through external links (program timeline, career opportunities etc.) |
PARTICIPATORY DESIGN
The team took on a collaborative approach in producing designs with participatory design in that we got users of the ICCIT website to make their insights and provide low-fidelity designs via Mural with the following virtual materials. We then get them to take these materials and put together a UI design that they think best meets the requirement of a given design prompt:
These prompts were formulated based off Contextual Inquiry Design Requirements.
MATERIALS
DESIGN PROMPTS
-
How would you design the layout of the program requirements page to make it consistent across the different programs?
-
Where would you place information on tuition on the ICCIT page so that it’s visible? What information would you include?
-
Can you design a section about alumni experiences/reviews?
-
As well future jobs and opportunities?
-
-
How would you design a page to include more information about what to expect from the program?
-
How would you make course information accessed within 3 clicks or less?
-
Where would you place the full program description?
-
How would you design/where would you place the navigation?
-
How would you design/where would you place the sub navigation?
-
-
How would you design the homepage to be more simple and aesthetically pleasing?
-
How would you design the homepage to have the most accessed information most visible?
-
-
Where and how would you place information for future students to ensure that they’re easy to find and are together?
-
Future high school students
-
Transfer students
-
-
Where and how would you place each page title on each inner page?
I led 6 participatory design sessions where each user was given 6 out of the 10 prompts to design. Each user gets a different combination of 6 prompts for their participatory design sessions.
THEMATIC ANALYSIS
Notes taken during the Participatory Design sessions were coded and organized for thematic analysis. This helped us identify common design choices amongst the participants.
FINAL WIREFRAMES
We then designed final iterations of wireframes based on our participants' designs from the Participatory Design sessions. Proper direction of our designs is justified by the thematic analysis that demonstrates what to focus on based on multiple participants noticing the same problems and offering similar design solutions.
HOME PAGE
With this wireframe, Programs, Tuitions, and Student Experience is placed above the video as multiple participants believed these components should be seen earlier. The program section has four sections featuring each program that is offered by the ICCIT department, therefore offering a direct path to each program’s pages from the Home Page.
PROGRAM PAGE
Here, we updated the ICCIT navigation by rearranging the links and putting the programs at the bottom. We also added links such as Mental Health Resources, Faculty, and a Home link, all of which were not found on the navigation bar in the original version of the website. We also improved the interactivity of the navigation bar by making each link contrast from the rest when its corresponding page is open. One of the feedback we got was to add a section about “Jobs and Opportunities”, so we added a button for it in the program description section. We also cut down the information in the program description section and added a chart that features program course requirements for each year and the GPA cutoff.
TUITION PAGE
This wireframe features a section for each program showing a brief description of the program and the program’s tuition details. Under tuition, details are the GPA Cutoff information which shows the grade average a student needs to reach to be considered for a given program. The GPA cutoff information was added so that not only do users get information about financing but also information about the grades that they need to get into their desired program. Lastly, a learn more button is added to each program section to expand.
ALUMNI PAGE
The purpose of the Alumni Page is to offer practical next steps after one has finished the program. Thus, there is a section where there is a video featuring past students sharing their firsthand experiences with opportunities they have taken on after graduating. Below the video are three boxes for Alumni experience, Jobs and Opportunities, and Resources and Guidance. Each box has a learn more button that expands on each topic on a separate page. Each box also features a picture as signified by the “X” in the background.
FUTURE AND TRANSFER STUDENTS PAGE
This page features two sections that cater to high school students and transfer students. A Program Requirements button is found at the bottom right of the "Coming from another University or College?" section that leads to a separate page about what credits transfer students need and can also transfer into going into the program.
FINAL DESIGN REQUIREMENTS
CONTENT
-
Website should include a section about alumni experiences/reviews in a separate Student Experience page.
-
Website should provide information about tuition (deregulated & regulated) and future job opportunities on the Program page.
-
Program page should include information about what to expect from each program’s POSt (ex. Acceptance Rate & GPA cut offs etc.).
-
Website navigation labels should be kept to a minimum and concise.
-
Website should state information for all future students (highschool & transferring students) and said info should be located together in the Future Students page.
-
Website content/information should be available on the website without going through external links (program timeline, career opportunities etc.).
-
Website users should be able to locate course descriptions/information quickly - in 3 steps or less (if still want to include Academic Calendar, Course codes on websites should lead to course description/info directly on Academic Calendar).
LAYOUT
-
Website layout should be consistent from page to page and presented in consistent formats with the rest of the website (ie. web pages).
-
Website navigation labels should be kept to a minimum and concise.
-
Make the Picture Carousel smaller for more space for program panels to be seen without scrolling down.
-
Website’s web pages should be labeled specifically and evidently so users are aware of their location on the website.
-
Websites should follow the order of most important/frequently accessed data to least important/frequently accessed data.
-
Include usage of dropdowns to maximize space of pages to minimize need for scrolling and use design space efficiently.
-
Sub-navigation should have essential information (ex. Mental health resources, accessibility services, tuition page) to make high traffic/important pages accessible at all times.
VISUALS & GRAPHICS
-
Website’s home page should be more sophisticated and aesthetically pleasing.
-
Website should include more videos and pictures to reflect that ICCIT is a design course.