Skill Assessments

Helping employees engagement and gaining confidence through frequent peer and manager feedback.

hero image of a colorful learning experience/there are two screens 1. desktop version of a program. 2. responsive mobile screen.

Introduction

In the new Bridge perform app. Receiving constant feedback was one of our main goals. Instead of just having a 360 review yearly.

Problem to solve

Perform needed a way to gather feedback to help employees improve. This insight also should give the HR Admin managers insight to where training and hiring can be applied.

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

Develop an assessment tool that would empower companies, teams, managers and individual employees to gain insights into where training, growth and hiring need to happen.

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.

Collaboration

At Instructure we are always working together in our product teams. I collaborated closely with a product manager over the program authoring feature in Bridge. Together we brainstormed and whiteboard through several different possible solutions to this problem.

profile picture of Todd Erickson

Dalin Larsen

Product Manager

profile picture of Aaron Uyehara

Aaron Uyehara

Senior 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 solve help solve the problem. We identified three main points of views

pictures of brainstorming sketches with notes and ideas.

Assumptions and Initial Designs

From our initial interviews and brainstorms we had developed our assumptions around who we were designing for.

Admin Experience
Admin need a way to configure skills and the way employees are assessed.
They all so needs to see data, analytics and insights in order to strengthen employees through training or hire employees to fill gaps.

Employee Experience
An employee needs to be able to self assess, request an assessment from peers in order to see where they are, what they can improve on and how to grow.

Managers Experience
A manager needs the ability to assess and request assessments from the team about individual members on the team. View the insights and data and see how they can strengthen their team through training or where to hire.

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

picture of the updated authoring view

Learner

picture of three screens for the learners experience. 1. list of learning modules. 2. completion page 3. mobile screen shot

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 inconography
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.

Back to the top

Arrow pointing up