The Breakthrough Course Online Resource Center

Empowering clients with leadership tools and license tracking for their organization.

UX / UI / Branding

The Breakthrough Course Online is a self-study program that is the foundation of Gap International’s methodology.

We set out to design a resource center that encouraged teams to use the multiple times throughout their year-long subscription. We also wanted to equip the company’s Gatekeepers with the ability to distribute and track licenses within their organization.

Tools to Lead a Conversation

The Four Focus Areas

The elements of the course were unchanging, so instead, we created 4 focus areas for Team Leaders. Our clients could re-watch sections of the course but from the frame of a specific focus area.

Each Focus Area contains support materials for a Team Leader to guide the conversation and keep the methodology alive.

From there, Team Leaders and Gatekeepers can begin distributing licenses to their teams for that particular Focus Area.


Visualize it

Streamlined View

Once the leader decides on a Focus Area they can begin to distribute licenses to their team members and also assign someone to the Team Leader Support to assist them in distribution, leading the conversation, and tracking usage.

We wanted to create a quick-view for Team Leaders and Gatekeepers to easily keep track on multiple teams:

Tidying Up

License Management Update

The first iteration of the license management section was created under the truncated timeline of just one week due to a last-minute change in the scope.

In conducting interviews with our clients, we learned that exposing all of the data for each team was overwhelming them. It was hard to find specific functions due to a lack of hierarchy. In larger organizations, Gatekeepers were getting frustrated with an overabundance of scrolling while trying to manage multiple teams.

Another missing piece: insight into license distribution.

The insight into the total count of the licenses was only accessible on a few pages, leaving the Gatekeepers unsure of how many licenses they have left to distribute and having to search for the remaining count.

To solve for this, we added a total license count to the top navigation so that no matter what page the user was on they were able to easily see how many licenses have been distributed.

In Use vs. Not in Use

We also needed to inform how many licenses each team had and of those licenses, which ones were activated (or in our terms, “in use”)

The Manage Subscriptions page gave insight into this.

Team Details

If the user was to drill into a specific team, they could see who the Team Leaders / Support Leaders are, edit team information, and gain access to individual progress.

Easy In

Implementing Modal Windows

For ease of execution, we used modal windows for tasks like editing team information and adding licenses to specific teams. Modal windows were developed in the first iteration of the product, making these updates easier to implement for our developers.

Staying on Track

Individual Course Progress

From the team details page, Leaders can view outlines of individual progress within the course. the user could access the individual course progress, including whether or not the course was completed, as well as what sections of the course they’ve been in.

For example, if a leader chose a certain Focus Area and then wanted to assign sections of the course to their team, they can go into this view and see if and when team members completed those sections.