Approval Workflows for Course Registration in Discover
Project overview
With approval workflows in Discover, a tool within Brightspace that allows leaners to find and enroll in courses of their choice, institutions can make sure that only eligible learners can access restricted courses.
Team
My Role:
Product designer
In collaboration with:
Principal product designer, 2 User Researchers, Product Manager, Software Development Manager, 8 Software Developers
Timeline
1 year and 3 months
PROCESS OVERVIEW
01. Understanding
We conducted exploratory research with our client and other customers to understand why they need an approval process, who will be involved and what they’re looking for.
02. Defining
From the insights gathered, we narrowed down our scope into one that is realistic while still meeting the core user needs.
03. Exploring
I explored different options and iterated based on design reviews feedback, while making sure to align the experience with other similar flows in our platform.
04. Testing
Further iterations were made based on usability testing results and feedback from our client.
05. Slicing
The proposed design is still too large. The PM, Dev Manager and I defined a MVP by force-ranking all the features based on user needs, product goal and engineering effort.
06. Hand Off
I worked closely with the development team to figure out edge cases and challenges along the way.
PROBLEM
Admins & instructors struggle to control who can enroll into courses that require proof of eligibility
Certain courses offered in Discover requires proof of eligibility such as completion of prerequisites, enrollment in certain programme and proof of payment. However, there are currently no way to ensure that only eligible learner can enroll.
As a result, organizations have been using painful workarounds such as sending the course link to a group of learner via email with the accepted risk of non-eligible learners accessing the course.
We were also contracted to deliver this.
OUR USERS
Learner
wants to take courses they’re interested in
Approvers
responsible for assessing eligibility and controlling who can enroll
Role: Instructors / Admins / TAs / Managers / Someone from Finance
Course Facilitator
responsible for setting up courses
Role: Instructors / Admins
PROJECT GOALS
Create an approval process that ensures only eligible learners can enroll and access restricted courses
01.
Approvers should have access to all information required to make a decision
02.
Approvers should be able to manage a large amount of requests efficiently
03.
Both learners and approvers should be able to track requests and get notified when there's an update
04.
Approvers should be able to update the request status in case of mistakes
SOLUTION - KEY FEATURES
A simple yet efficient workflow
On top of basic functionalities, a lot of design effort was put into crafting an experience that reduces the workload of approvers.
Learners will also enjoy a simple enrollment requesting process with the ability to communicate with the approver in case of a dispute.
01. Collect all information required
Customizable Enrollment Questions (1) and File Submission (2) allow approvers to gather all necessary information from the learner to determine eligibility
02. Keep track of multiple requests
Both learners and approvers can keep track of their requests in a list view.
Approvers can also manage a large amount of incoming requests efficiently with filters (1) and bulk actions (2)
02. Request - List View
Both learners and approvers can keep track of their requests in a list view.
Approvers can also manage a large amount of incoming requests efficiently with filters and bulk actions
03. See requests in detail
Both learners and approvers can see the request details here.
The 'Approve & Next' button (1) and iterator (2) empower approvers with an efficient workflow
04. Update Status
Approvers can update the request status in case of a mistake or if the learner appeal the decision
Unique Project Constraints
01. Legacy tools and technical constraints
Founded in 1999, D2L Brightspace is a huge platform with a lot of legacy tools. Compared to my previous experiences at start-ups, there were a lot more technical constraints that design has to consider. This project taught me how to find balance between advocating for user experience and making sure that it’s still technically feasible.
02. Tight contractual timeline
In order to meet the contractual deadline for delivery, the Product Manager, Development Manager and I worked together to prioritize features and figure out what the MVP would be. We’ve also committed to follow-through with the remaining features once the team has the capacity so that we can provide the best user experience to our ability.
03. Design consistency with Wave, another D2L ProductWave is a platform by D2L that allows employees to browse and register for pre-approved courses offered by external institutions. They also have an approval flow so I made sure to work closely with the designers there to align the experience.
01. EXPLORATORY RESEARCH
The User Researcher and I conducted a round of research to understand
why approvals is needed,
what are the criteria that determine eligibility,
who is involved in this process and
what are their current workarounds and ideal approval process.We also showed participants a
conceptual walkthrough taken from Wave*’s flow to understand what works and what's missing.
*please see What Makes this Project Unique for more info on WaveI turned Wave's flow into a mid-fidelity conceptual walkthrough
KEY RESEARCH FINDINGS
a. Approvers find it hard to collect all the required information to determine eligibility
b. Courses in Discover have a lot of enrollment - meaning a lot of requests for approvers to go through
Some information such as prerequisites taken and proof of payment are not available within Brightspace.
Approvers need a way to manage a large amount of requests efficiently. They want to stay in the loop, but not get bombarded by notifications all the time.
Approvers find it hard to collect all the required information to determine eligibility
Some information such as prerequisites taken and proof of payment are not available within Brightspace.
Courses in Discover have a lot of enrollment - meaning a lot of requests for approvers to go through
Approvers need a way to manage a large amount of requests efficiently. They want to stay in the loop, but not get bombarded by notifications all the time.
02. DEFINING
With inputs from Product Management, Development, User Research and Design, we narrowed down the scope to a realistic one that will still meet the core user need.
Scoped user flow
03. EXPLORING
I focused on exploring solutions for the gaps identified during exploratory research, and adapting Wave's design to the unique needs of Discover users.
KEY DESIGN CHALLENGES
a. Thinking about the past, present, and future of Course & Approval Configuration
Course and approvals set up is done in the Course Configuration page, a legacy tool in Brightspace. The bulk of the exploration phase was spent figuring out what’s technically feasible, and how we can help bridge the gap between now and the future when this page is redesigned without compromising user experience.
b. Working with developers to figure out what’s technically possible for notifications
There are some limitations around sending out email notifications from Brightspace, but together with the Principle Product Designer and Developers we were able to figure out a solution. We’ve also integrated notifications in different locations within the platform as entry points.
c. Allowing approvers to update request decision
One of the gaps identified during our research is the need for updating request status in case of a mistake, so I made sure to keep Wave's designers in the loop while exploring for a consistent updating experience.
Key Design Features
a.
Common related words
Configuring for Approvals
Approval configuration is done in the legacy Course Offering Information page along with other course-related settings. An upcoming expand / collapse component from our design system is used to hide these settings from irrelevant users to keep this already long page concise. It also bridges the gap between the legacy page and the future re-designed version.
Customizable enrollment question and file submission requirement helps approvers with collecting information required to make a decision.
b.
A more visual dropdown
Request List Views for Learners and Approvers
Learners can keep track of their requests in a list view that is designed to be similar to the course browsing experience. Approver's list is heavily inspired by Wave's design, but tweaked to be consistent with the design system used in Brightspace.
Approvers can also manage a large amount of incoming requests efficiently with filters and bulk actions.
c.
A full list
Individual Request Views for Learners and Approvers
This page is designed to be shared between the learners and approvers as a single source of truth. Both the learner and approver have access to see who approved / requested to allow easy communication between them if needed.
An efficient workflow is also enabled by the 'Approve & Next' button, as well as the iterator on the top left.
d.
Updating Status
Updating Status
Approvers can always update the request status if a mistake has been made. They also have the option to include a comment for the learner to explain the status change.
04. USABILITY TESTINGS
After several rounds of design reviews with other designers at D2L, I moved on to usability testings with both the Approver’s and Learner’s flow.
With the help of User Researchers, we tested the prototype with 5-6 participants for each of the flow. There were no major pain points for both of them, although there were a few small improvements that we can make. Further iterations were made in response to the testing insights.
05. SLICING
At D2L, we usually go broad with our design exploration and slice out an MVP towards the end for the first release. In order to meet the contractual deadline, the PM, Dev Manager and I worked together to prioritize features based on user needs, business needs and engineering effort. We kept all the sliced-out features in our backlog.
User flow showing the full design (in black) and sliced features (in pink)
06. IMPLEMENTATION
After defining the MVP, I presented the design spec to our development team and worked closely with them on figuring out edge cases and challenges we encountered on the way.
The hand off document in Figma
Reflections
It was a huge pleasure to be part of a mature design team with established design practices, and a big shout out to everyone who has given me support on the way (especially Jeff, who kindly took on the mentorship role despite his other commitments)!
Working with a brief
Unlike previous work I've done, I was given a 'solution' upfront for this project. However, just because it's written in a contract doesn't mean that it must be done (hear me out) - as designers, we need to dig deeper into why our client has asked for this. What problem are the trying to solve for? Is this really a good direction to take? Sometimes it is, just like this project, where building an approval process does solve the root problem. However, there'll also be times when this might not be the case, and there's always room for negotiation with the client as we show them alternative ways that will solve their problem.
Advocating and negotiating for our users
When facing a tight delivery timeline and unique technical constraints, being able to advocate and negotiate for good UX becomes our priority as designers. A lot of it, I've learned, comes from being able to clearly communicate the why behind design decisions, as well as coming up with creative solutions together with other stakeholders.
Don't wait to be 'ready'
It was a scary thought to share messy work with other designers, but it's also one of the quickest way to get feedback that might inspire a totally new direction. As long as the context and expectation are clearly stated (which is an art in itself undeniably), getting design critiqued early is almost never a bad thing.
.svg)