Challenge
HMW improve the search experience for full-time domestic and international students on Humber.ca? In this conceptual solution, we broke down the UX process into 5 phases, redesigned, and tested the flow, from the homepage to the course application page.
Solution
A 10-page, web-based prototype that allows future applicants to search, filter and compare courses more easily.
HMW improve the search experience for full-time domestic and international students on Humber.ca? In this conceptual solution, we broke down the UX process into 5 phases, redesigned, and tested the flow, from the homepage to the course application page.
Solution
A 10-page, web-based prototype that allows future applicants to search, filter and compare courses more easily.
Outcome
The prototype was improved after 2 rounds of usability testing and the final version was successfully presented to the class on a Demo Day (recordings included).
My Deliverables
System Inspection - Interviews - Qualitative Analysis - Alignment Diagram - UI Framework
UI Filters - Figma Components, Layout and Interactions - Stakeholder Presentation.
My Role
Lead UX Designer
Lead UX Designer
Design Process
1-month long and feature-focused
Discovery
Search as a time-consuming task
Business goal - Improve engagement, increase retention (student applications) and reduce the average session length by improving the user flow in the process of finding a course.
Users' goal - Find and compare suitable full-time programs, then apply for them.
My goal was to optimize the search experience, balancing the business and users' goals.
The competitors were selected for their geographic proximity and commonality among students' profiles.
Data analysis gave me perspective on the industry's standards and the client's competitive advantage. After the system inspection, I focused on the users.
Research questions:
Q.1 How do prospective students find their courses with the existing filtering system?
Q.2 What do prospective students like best when using the program finder to filter courses of interest?
Q.3 What are the factors that affect students in choosing the filtering options.
Interviews
Preference for a step-by-step flow
Interviews helped me validate my hypothesis. I asked a few warm-up questions and heard about users' past experiences looking for education programs and their experience with search features in general. Finally, users were invited to naturally browse and search for a course of their choice on Humber.ca.
Below, you can access my process and data groupings. An Affinity Diagram is proposed for dot voting when feasibility/prioritization decisions take place.
Synthesis
Issues lie on the filters and search listings
We observed users and captured their knowledge gaps and needs. I guided 2 classmates in the journey mapping and persona creation. International Students have additional challenges associated with course availability and language requirements.
Ideation
Simplifying task timing and cognitive load
At this stage, I created a moodboard for group collaboration, explained the scope and constraints and proposed a framework. We looked for references, and best practices and agreed on the user flow. This process gave birth to the following sketches and wireframes.
My screens follow below. Systems: filtering, search bar, and course listing.
My screens follow below. Systems: filtering, search bar, and course listing.
Prototype Design
Before x After: course finder
I rearranged the search results for flexibility, efficiency, and minimalism. The new course listing on the right has categories and subcategories, expandable cards, and list/grid view modes.
Before x After:
comparison page
comparison page
Here, I intended to reduce cognitive load while maintaining a step-by-step protocol. I have also added the plus sign (+) as an affordance element, for efficiency.
New features added
Here, my intention was to foster system guidance (filters/facets), design and a step-by-step search protocol (autofill; expandable bars). Finally, I added a button that allows users to view the course page or add up to 3 courses to a comparison page prior to the application.
Usability Testing:
sessions 1 and 2
sessions 1 and 2
In the 1st session, the goal was to validate the solutions built after the remote interviews and ideation process. Users were proposed a few search-related scenarios and tasks. Eight (8) participants among the target audience have been recruited from our network. The 2nd session was focused on system refinement.
The final version was presented to the class on a Demo Day.
Precious learnings...
1. Working with people, learning from them, and developing systems for their benefit require patience, flexibility, and an open mind. It is crucial to set aside my biases, beliefs, and certainties. This experience has enabled me to create a framework that is applicable to both individual and group challenges.
2. Embracing and resolving differences and conflicts not only enhances our abilities but also provides a stimulating experience when approached with a positive mindset.
3. We successfully completed our first school project, which was an incredible opportunity for me to enhance my leadership skills and gain practical experience using Figma. Although the prototype had some glitches, I am eagerly looking forward to taking the next steps in my learning process.
4. Technical skills hold significant importance, and I am enthusiastic about furthering my knowledge in areas such as UI skills and UX strategy, which I am genuinely passionate about.
