SBEP Certification Portal
The SBEP Certification Portal was designed to improve how professionals apply for and progress through certification within the Blue Economy. At the time, the process was functioning operationally, but it was held together through manual workarounds, spreadsheet logic, and disconnected evaluation steps.
This project was not simply about designing a cleaner interface. It was about translating a complex certification workflow into a structured digital experience that could support applicants, reviewers, and administrators with more clarity, consistency, and trust.
Role: Product Designer & Front-End Developer
Client: ECO Canada / Ocean Alliance Canada
Timeline: August 2025 – November 2025
Scope: End-to-end product design & Front-end implementation (next.js)
Status: Live at sbep.eco.ca
The Problem
The certification process worked, but only because people behind the scenes were doing a significant amount of manual coordination.
Eligibility was being managed through Excel sheets with macros, where conditional logic helped determine whether an applicant qualified for the next stage. While this made the process operationally possible, it also meant that much of the system’s logic lived in a place users could not see or understand. For applicants, decisions could feel opaque. For administrators, maintaining and scaling the process required continuous manual effort.
On the applicant side, the experience was even more fragmented.
The self-assessment process consisted of hundreds of questions, scattered across different documents and categories, often presented without clear structure or progression. Depending on the application type, users were required to:
- Navigate large volumes of ungrouped questions
- Interpret requirements on their own
- Track their own progress manually
That combination created a poor experience on both sides. Applicants felt overwhelmed, progress was hard to track, and administrators had to spend additional time clarifying requirements, validating responses, and managing workflow transitions. The issue was not that the certification process was rigorous. The issue was that the rigor had not been translated into a guided experience.
The system worked — but only because people were constantly compensating for it.
Understanding the System
Once I started looking more closely at the workflow, it became clear that this was not a typical UI cleanup. The challenge was systemic.
What existed was a collection of steps:
- Eligibility checks handled through spreadsheet logic
- Self-assessments spread across large question sets
- Peer reviews conducted without standardized structure
- Exam readiness determined with limited visibility
Each step functioned independently, but there was no unified experience connecting them.
From a user’s perspective, this meant:
- No clear starting point
- No sense of progression
- No visibility into what comes next
The challenge, then, was to redesign not just individual interactions, but the entire flow as a connected system.
Key Insights
1. The biggest source of friction was not the amount of work, but the way it was structured
The certification process was inherently detailed, and that was not something to remove. The real issue was how that detail was presented. When users are faced with a large volume of questions without clear grouping, sequencing, or progress visibility, the task feels heavier than it actually is.
Users weren’t overwhelmed by the work itself, they were overwhelmed by the lack of structure around the work.
2. Hidden logic weakens trust
The Excel-and-macro setup handled real decision-making, but from a user experience standpoint it acted like a black box. Applicants could be told whether they qualified, but the reasoning behind that outcome was not clearly surfaced in the experience.
In certification systems, transparency matters because people are not just completing a form. They are investing effort into something that affects their professional credibility. If the rules and transitions are unclear, trust starts to erode.
3. Long processes need visible momentum
The portal was not a one-screen interaction. It was a multi-stage journey that required sustained effort over time. In that kind of process, progress visibility becomes part of the experience itself.
Users needed to understand where they were, what had been completed, and what remained. Without that, the system could feel endless, even when the path was defined internally.
4. Operational inefficiency becomes user-facing friction
Many of the problems visible to applicants were actually symptoms of backend inefficiency. Manual validation, scattered question sets, and unclear stage definitions all increased the workload for administrators, which in turn created delays, ambiguity, and inconsistency for users.
This reinforced that improving the internal structure of the process was inseparable from improving the front-end experience.
5. The solution was not simplification. It was guided complexity
This project required resisting the temptation to flatten everything into a “simple” flow. Certification is supposed to be thorough. The design opportunity was to take that unavoidable complexity and make it navigable through structure, hierarchy, and clear transitions.
Design Approach
The approach shifted from designing screens to designing a structured journey.
Instead of asking:
“How can we simplify this?”
The focus became:
“How can we make this process navigable?”
This led to a few key principles:
- Break large tasks into logical sections
- Introduce clear system states at every stage
- Make progress visible and measurable
- Align backend logic with front-end transparency
- Design for both applicants and administrators simultaneously
The goal was to create a system where users never have to ask:
“What do I do next?”
The Solution
The final solution reframed the certification process as a structured, end-to-end journey rather than a set of disconnected administrative tasks.
Centralized Dashboard
A centralized dashboard gave applicants a stable starting point and a clearer picture of their progress.
Instead of scattered interactions, users now have:
- A single entry point
- Clear visibility into their current stage
- Defined next steps
This removes ambiguity and anchors the entire journey in one place.
Replacing Excel Logic with Structured Eligibility
The eligibility flow translated backend conditions into a more understandable front-end experience.
Instead of relying on hidden spreadsheet logic, the portal began surfacing requirements in a structured way so users could better understand how qualification was determined.
Users now know:
- What qualifies them
- Why they qualify (or don’t)
Re-architecting Self-Assessment
The self-assessment was the most significant redesign area. Because applicants could face a very high number of questions depending on application type, the experience needed stronger hierarchy.
The scattered question sets were redesigned into:
- Categorized sections based on specialization
- Progressive disclosure of questions
- Clear progress indicators
Instead of facing hundreds of questions at once, users now:
- Move through focused sections
- Track completion in real time
- Maintain a sense of momentum
This shifts the experience from overwhelming to structured and manageable.
Standardizing Peer Review
The peer review process was previously inconsistent, with limited structure around how evaluations were conducted and interpreted.
To address this, the review layer was redesigned to align with the overall system:
- Evaluation criteria were clearly defined and structured
- Review inputs were standardized across all applications
- Feedback and outcomes were made more interpretable
This ensured that reviews were not only easier to conduct, but also more consistent across applicants.
For users, this reduced ambiguity around how their submissions were being evaluated.
For the organization, it created a more reliable and scalable review process.
Defining Transitions Between Stages
Previously, movement between stages was implicit and often unclear. Applicants were not always aware of when they had progressed, what triggered that progression, or what was expected next.
The redesigned system introduced clearly defined transitions between each stage of the journey:
- Each stage includes clear entry conditions
- Completion states are explicitly communicated
- Next steps are surfaced within the experience
This removes the need for users to interpret the process on their own.
Instead of guessing where they stand, applicants now move through a system that clearly communicates progress, expectations, and outcomes at every step.
From Design to Shipped Code
Because the design work came in ahead of the contract timeline, I took on building the front-end as well — not as a hand-off, but as the same person carrying the design into a working product.
Using Next.js (with ChatGPT assisting the coding), I implemented most of the portal’s front-end directly from my own Figma designs, while another developer handled the backend.
Designing and building the same system tightened the loop between intent and implementation: when something didn’t feel right in the live interface, I could fix it at the source rather than file it for someone else.
Impact
It shipped — and launched nationally. The portal went live at sbep.eco.ca as the application system for ECO Canada’s national SBEP rollout, onboarding the first wave of applicants across the designation’s three tiers (in-training, professional, and specialized).
What the redesign changed, structurally:
- Consolidated a workflow previously split across spreadsheets, documents, and manual coordination into a single, unified dashboard
- Re-architected hundreds of flat, ungrouped self-assessment questions into categorized sections with progressive disclosure and visible progress
- Replaced hidden Excel-macro eligibility logic with a transparent, front-end qualification flow
- Standardized a previously inconsistent peer-review step into a structured, repeatable format
Honest note on validation: Given the launch timeline, testing focused on internal QA and edge-case validation with the team rather than external usability studies. A structured usability evaluation with real applicants is the clear next step now that the system is live and collecting real-world usage.
Reflection
This project reinforced that not every UX problem should be solved by simplification. In complex systems, the better question is often how to make the complexity understandable.
The SBEP Certification Portal was valuable because it sat at the intersection of workflow design, information architecture, and trust. It required turning hidden logic into a visible experience, reorganizing dense content without weakening it, and shaping a process that worked better for both applicants and the organization behind it.
That is what made the project meaningful: the challenge was not designing a few better screens, but designing a clearer system.
More Projects
