EDUCATION PLANNER BC
Helping BC students understand how their credits transfer
ABOUT THE PROJECT
Education Planner BC (EPBC) is a centralized resource for students across British Columbia, helping them explore post-secondary programs, compare institutions, and plan their educational journey. One of the biggest challenges students face is understanding how their existing courses and credits will transfer if they move from one BC institution to another.
To address this, EPBC set out to create a new tool that would allow students to request their official course record from their current post-secondary institution, then compare how their credits would transfer across as many BC institutions as they choose. Students would be able to see a clear one-to-one comparison of their completed courses against the equivalents at other institutions.
The tool also needed to account for students whose current institution had not yet integrated with the record-request feature. In these cases, the tool had to provide alternate pathways so those students could still explore transfer possibilities.
This project was a major undertaking for EPBC, as it combined technical integrations with multiple institutions and the need for a user-friendly interface that could clearly communicate complex information.
MY ROLE
Lead UX Designer
TOOLS
Figma
PROJECT LENGTH
5 months (main project during my one-year contract with EPBC)
01.
Exploration & discovery
A big part of the discovery phase was understanding where the course transfer data would come from and how it had traditionally been presented to students. In this case, the source was the BC Transfer Guide API, which provides the official mappings of how courses move between institutions in the province.
Along side studying the API and its outputs, I also explore EPBC's own design system and existing features. The My List tool, particularly the comparison view for institutions, served as an important reference point. It had already established a pattern for side-by-side comparisons that users were familiar with.
The exploration helped set the two guiding principles for the project:
Leverage the API effectively
Translate complex data from the BC Transfer Guide into a clear, approachable format.
Build on what works
Re-use familiar EPBC design patterns to keep the experience consistent and intuitive.
Competitive analysis
BC Transfer Guide
The existing BC Transfer Guide site has long been a go-to resource, but it can feel overwhelming and difficult to navigate for students who are simply trying to answer the question, "Will my credits transfer?" While it's comprehensive, the interface lacks the simplicity and clarity that EPBC aimed to provide.
Strengths
COMPREHENSIVE & AUTHORITATIVE DATA
Because it's the official BC system, the data tends to be reliable and widely accepted by institutions. Students can trust that the transfer info is correct.
MULTIPLE TRANSFER PATHS
Includes multiple transfer options: course-to-course, block transfer (e.g. diploma or certificate), English as Additional Language, IB/AP, etc.
GOOD FILTERING OPTIONS
Users can filter by institution type, (e.g. university, college, private) which helps narrow down comparisons.
GUIDED TOUR / HELP
The site offers a 'guided tour' for the course-to-course search to help new users understand the flow.
OFFICIAL BRANDING / TRUST
Because it's the official BC Transfer System, students are likely to trust it more than third-party tools. This helps with credibility.
Weaknesses
COMPLEXITY & STEEP LEARNING CURVE
Because of the way the search works (needing institution codes, subject codes, sometimes partial matches), users might get confused. The requirement to know or guess acronyms / course codes can be a barrier.
INTERFACE USABILITY
The UI is sometimes dense; the multiple steps and fields required may overwhelm users who just want a quick answer ("Will my credits transfer?")
LIMITED VISUAL COMPARISON
Results are text heavy; less visual aid (e.g. side-by-side tables, course equivalency indicators or icons) to help users immediately scan and compare.
LESS MODERN UI PATTERNS
The design feels more utilitarian than polished; opportunities exist for making the UI more modern, more in line with current design trends around comparison tools, dashboards, etc.
Summary & takeaways for EPBC's Transfer Credit Tool
Simplify the student experience
The existing BC Transfer Guide data was comprehensive but difficult to navigate. For EPBC's tool, I focused on presenting the same information in a clearer, more approachable way so students could quickly understand their transfer options.
Build on familiar patterns
EPBC users were already accustomed to side-by-side comparisons in the My List feature. Reducing and adapting this design pattern made the transfer tool feel consistent and intuitive.
Design for all users
Not every institution was integrated with the course record request process for the MVP. The tool needed alternate pathways to ensure those students could still explore how their credits might transfer.
Modernize without losing trust
The BC Transfer Guide is an authoritative resources, but its interface feels dates. EPBC's tool aimed to keep the credibility of official data while improving usability with a more modern, student-centred design.
02.
UX design process
With the research and guiding principles in place, I began shaping the experience of the Transfer Credit Tool. My process was grounded in aligning stakeholder requirements with user needs, while staying true to EPBC's design system.
Defining scope and requirements
I worked with stakeholders to outline a clear must-have, nice-to-have, and will-not-have list. This helped balance ambitious ideas with the practical realities of development timelines and technical limitations, ensuring the project stayed focused.
Must haves
Critical for the core functionality and user success.
-
Course record request form / flow
-
Add comparison institutions
-
See direct transfer info (what the credit transfers to)
-
See if credit does not transfer
-
Email notifications on Course Record request status
Could have
"Nice to have" features that can be included in future iterations.
-
Grid and list views
-
Ability to add a new Course Record / update Course Record
-
Advanced credit visualization (interactive graphs or charts showing credit applicability across institutions)
-
"What if?" abilities. Add possible future courses to be taken at current institution and how they would transfer to a list of possible transfer institutions
-
Offer tailored recommendations based on users current transcript information
Should have
These enhance the user experience, but are not essential to launch.
-
Ability to manually add transcript information if current institution is unavailable for transcript transfer
-
Course record request progress tracking
-
Credit match score (percentage indicating how well the user's credits match with each institution)
-
Downloadable report for future reference
-
Help and support integration
-
Ability to apply to institutions directly from transfer tool
Won't have
Features that can't be done / aren't necessary
-
Offer tailored recommendations based on users current transcript information
-
For political reasons with public and private institutions, we can not fulfill this
-
-
Downloadable report for future reference​
-
Deemed not necessary, and caused some privacy concerns​
-
-
Ability to apply to institutions directly from transfer tool​
-
Because of the way EPBC's Apply flow architecture is built, this is not possible to do without serious dev time commitment ​
-
Mapping the flow
Next, I created a user flow that mapped out how students would move through the tool: from requesting a course record, to selecting target institutions, to reviewing side-by-side credit transfer results. For users whose institution was not integrated, I included alternate entry points so they could still benefit from the comparison view.
Wireframing and iteration
I then moved into wireframing to define the overall structure and screen-to-screen interactions. This stage involved multiple rounds of iteration with the project team and stakeholders. Each cycle refined the tool's usability and ensured that the data from the BC Transfer Guide API could be displayed in a way that was both accurate and student-friendly.
While I am not showcasing every version of the wireframes here, it's worth noting that this iterative process was essential to aligning design decisions with both technical feasibility and user expectations.
Imported course record
Originally, the users imported course record lived here and would follow the user as they scrolled. This column also included everything to do with their courses, imported or manually added, including the ability to see the full course record.
1
Selecting institutions to compare
Utilizing the unique branding for each institution, I wanted to add the logos for each selection to improve scanability and recognition. Also adding a search bar here as the list of institutions is quite lengthy.
2
Transcript courses
By default, all the courses that are from a users course record obtained from their current institution would be selected for seeing the transferability. Eventually some UX tweaks would be made here to follow best practices more closely.
3
Manually add courses
Providing this block here allows the user to add in additional courses, regardless if they have their course record imported or not. This decision helped package the tool as a "what if" planning tool as well as a transfer credits analyzation tool.
4
Add another institution
CTA that allows users to add other institutions right from the comparison screen.
1
Institutions and transferability percentage
The headings for this detailed grid view are the institutions selected by the user. Taking inspiration from credit dashboards, I wanted to include a quick and easy to understand breakdown of how well their current credits transfer to this institution (the number associated with green for good, yellow for mid, red for poor transferability).
2
Users transcript courses
The courses from the users imported transcript
3
Transfer credit
The credit the user would receive if they transferred to that new institution.
4
Tool tips
I wanted to make sure we had generously sprinkled tooltips throughout, so if at any point the user was not sure what something was alluding to, they could have clarity.
5
Simple view vs detailed view
This is an example of the simple view which allows users to see from a very simplified and high level whether their credits will transfer or not.
1
Credit transferability
By reducing all the given information here at a glance to simple yes, no, or warning icons, it allows users to see better at a glance their transfer information. By clicking these icons, a dialogue box will open detailing the transfer in more detail.
2
03.
Final designs and prototype
