Introduction

In 2015 Bridge was a young and raw newcomer to the corporate training scene. Its MVP had a simple way to create courses and live training. There was a feeble attempt for corporate trainers, instructional designers and learning experience designers to chunk learning content/modules into a bucket which Bridge was calling a program. After doing interviews with existing and potential customers we discovered that there were problems that needed to be addressed.

I was tasked to lead out this feature work alongside my product manager counterpart.

Problem to solve

Author’s and training managers needed a way to easily create a curriculum using the Bridge LMS. There wasn’t a robust or flexible way to organize content and learning objects for learners/students.
‍
Some existing problems with programs:
All learning activities had to be taken in order, there was no way to visually organize or create a program in Bridge for the Author.
There was also no way for a learner to know why they needed to complete a program and what was up next and what they needed to do.

How might we?

How might we help training managers and instructional designers create robust and flexible learning experiences that help employees gain skills, training, knowledge, and become compliant to be empowered and confident during their careers?

The Process

I knew that in order for us to be successful, we would need to follow a design process that would enable us to deeply understand the user’s needs, validate, and iterate. Here are the steps we took in this project.

A picture of the design process. Empathize, define, Ideation, prototype and testing.

Teamwork makes the dream work!

I collaborated closely with a product manager over the program authoring feature in Bridge. Together we brainstormed and whiteboarded through several different possible solutions to this problem.

Todd Erickson

Senior Product Manager

Aaron Uyehara

Product Designer

Collaboration time

a picture of 3 other members of the design team.

To kickstart this project, the product and UX team gathered together for an iterative design session. As a product team, we laid out the core problems to be solved within the existing program creation tool. Each designer then individually sketched or wrote out as many ideas as possible within a given amount of time. Coming back together we explored each concept one-by-one, finding connections, and looking for ways these ideas could help solve the problem. We identified three main points of views

pictures of brainstorming sketches with notes and ideas.

Who are we solving this for?

Point of view #1

Learning Administrators need the ability to Curate programs focused on achieving specific goals that may be related to a company/team’s business objectives. For Learning Administrators, the heart of implementing training programs is Learning Outcomes.

Point Of View #2

A 25-year-old Tesla employee needs to understand and engage (buy into) the program outcomes so that they know how it can help them achieve their professional goals. As an employee, they have other responsibilities and would like to invest their time and effort into something worthwhile.

** Know their progress/tracking once they select to enroll

Point Of View #3

A new 30-year-old Sales employee needs to have mentorship from managers and peers as they go through a program. His learning experience is enhanced by getting reliable on the job experience, feedback and information.

User Flows

For my own understanding of how everything worked together within the app. I created some wireframes that included multiple points of view/personas.

Initial Designs

from our initial interviews and brainstorms we knew we wanted to make

Author Experience
An authoring tool that was simple and easy to use while being flexible but powerful.
‍
Learner Experience
A learning experience that was flexible, easy to understand and non-obtrusive.

picture of 3 screens that were initial wireframes

picture of an early iteration of a program workflow in card view

picture of an early iteration of a program workflow in list view

Getting feedback early and often

Bridge was highly collaborative and we held weekly design reviews with both the design and product team helped us with outside perspective. Sometime being on a project long enough starts to introduce bias.

Meeting with customers really helped us simplify what we were creating.

Prototyping & Testing

I created a robust prototype using sketch and invision to test out our designs with the users. We got mixed reviews from different customers, but what they all agreed upon was that it needed to be simple. For the author feedback we received was that it was too complex. We had customers threaten to not renew their contracts. We went back to the drawing board

Iterative sessions

Validation

After simplifying the authoring and learning experience quite a bit we landed on a solution that resonated with our users. In fact we were able to design, prototype and test with all our customers that were at risk of not renewing in september and made them happy enough that we were able to retain 100% of our existing customer while picking up some new customers.

Author

Learner

Delivery

I believe that a smooth handoff and tight collaboration with development is crucial to the success of every product. Knowing that this was a very large feature, I wanted to be as prepared as possible. Once we had further validated our design solution I went to work fleshing out every detail of the experience I could think of. I met with our development team to review the designs and get input on technical considerations, and then put together a comprehensive set of specifications to accompany the mockups and clickable prototype. This is an approach I regularly take, and has helped me time and time again streamline development and ensure a higher level of visual and interactive quality.

document showing different ui components for creating a program

document showing different card design states

document showing 3 screens of the authoring tool. 1. shows content flow. 2. How to add a module and where the add button appears above the fold. 3. hover examples. When a user hovers they see a plus icon.

Final Design Solution

Our final design was an immersive dual-path experience, leading the author to create simple yet powerful learning paths which allowed the learner to see exactly what they needed to learn and a path that would help them accomplish their goals.

Easy Authoring & Flexibility

A simple authoring experience that allows an author to quickly create a program outline and easily add learning objects

Gif animation of adding learning modules

Gif animation of customizing the programs cover slide.

Easy Preparation & organization

Add learning modules and create sections to break up content without being restrictive.
‍
I created a few illustrations for things like empty states and icons to help users with context and progress.

Responsive Design

As learners take a program it is important. Creating an intuitive and accessible learning experience for users where ever they might be.

responsive screens for the learners view of a program

two screens showing how a program would flow from one module to another.

Non Disruptive learning

We all know that training can be disruptive and take employees away from their real responsibilities. We made sure that learning was easy for our users. Helping them know what is on their plate, what needs to be done, inorder to get back to their real work.

Program Authoring

Making workplace learning easier by enabling authors to simply create complex content that is engaging and enjoyable for employees to accomplish their learning objectives.