Work

OpenTBL

OpenTBL is a learning platform designed specifically for Team-based Learning (TBL). Users can create peer evaluations and readiness assurance tests in minutes and distribute them among their classrooms with the click of a button. Real-time exercise results allow instructors to see what topics need more emphasis and adapt their course accordingly.

Jump to Case Study

Visit OpenTBL

Platform

Web

Role

UX Designer

Front-End (HTML/CSS)

Branding

Color Palette

Fig 1. OpenTBL.com

Landing page for OpenTBL. We wanted a fun and friendly aesthetic to match the application.

Fig 2. Course Home

This is what the instructor or course owner sees when they navigate to their course. We added a checklist to help give some direction to new users.

Fig 3. Exercise Overview

The Exercise Overview is the screen students see before they dive into an exercise. It has the directions, exercise status, type, and breakdown of what's inside.

Fig 4. Readiness Assurance Test (RAT)

A common TBL exercise is the RAT. Students take a multiple choice test individually and then complete the same test with their team. The goal is to give questions that create discussion amongst the team, so they learn from each other. OpenTBL provides a real-time chat to facilitate those discussions.

Fig 5. Readiness Assurance Test (RAT) Expanded

Instructors can allow for multiple attempts in each question since the focus is not the score but the discussion that comes with each answer. Teams have a place to have that discussion for each question.

Fig 6. Peer Evaluation Exercise

One common TBL exercise is the Peer Evaluation. Students themselves take the responsibility of evaluating their team members on their performance. The scores are averaged out, and the results are sent back to each team member with anonymous positive and constructive feedback.

Fig 7. OpenTBL Icons

Some of the assets I created for OpenTBL.

Background

What is Team-Based Learning?

TBL is a teaching methodology that shifts the teacher’s role from an instructor to more of a course facilitator. The instructor forgoes the traditional lecture for TBL activities that encourage teams to discuss topics amongst themselves and receive timely feedback to make sure they stay on track. With that shift comes hours of planning, gathering and distributing materials, monitoring team discussions, and the ability to give quick feedback to keep students engaged.

The Problem

We noticed a void when it came to a centralized solution to help implement TBL in a classroom. Instructors were trying to piece together different web apps, like Google Docs and spreadsheets, to create an online TBL environment but keeping it all organized proved to be overwhelming. So we decided to see if there was an opportunity for a full TBL web application.

My Role

I was responsible for compiling a list of requirements from user research and designing the user experience. I also tested and styled the platform based on my designs using HTML and CSS.

Research

My primary goal was to find similarities between the different implementations of TBL by the instructors to design a system that works for all.

To start off, we read through foundational Team-Based Learning literature to understand the theory. We then interviewed members of the Iowa State University’s TBL Faculty Learning Community to understand TBL at a practical level and gauge the scope of a tool that meets all the TBL needs. We also had the opportunity to interview leaders in the TBL field to hear what they’d see as the “perfect” TBL tool.

Through the interviews, we were able to validate the need for a full TBL solution. We gathered enough requirements to prioritize functionality and create a user flowchart which helped facilitate the discussion between the developers and myself.

Fig 8. OpenTBL Flow Chart

Here is a flowchart listing all of the possible screens and steps to get to each one. This approach helped us see the big picture and have conversations with teams.

Sketching & Mockups

I started with some initial sketches implementing the critical screens from the flowchart to get an idea of the layout. We focused the bulk of the brainstorming around the concept of “The Builder.” We wanted the process of creating an exercise to be as quick and effortless as possible.

Fig 9 & 10. Layout and Builder Sketches

Sketching layouts for the main screens of OpenTBL.

Once I had a consistent layout and a substantial number of sketched out components, I moved into creating mockups. We used ThinkSpace assets as the starting point for the high-fidelity mockups. The color palette was updated to be consistent with OpenTBL branding.

Fig 11. Builder Mockups

I used Photoshop to put together mockups based on sketches then added them to an InVision project.

Mockups were then added to a project on InVision for testing and prototyping.

Fig 12. Mockups on InVision

We used InVision for prototype testing, internal discussions, and group feedback.

User Testing

I conducted a focus group test with the TBL Learning Community to spot the glaring mistakes, make sure the designs were going in the right direction. The TBL Learning Community was a huge help here. They were supportive, critical, and most of all excited about the designs, which was a huge motivator for us!

Once the mockups were updated based on the group feedback, I conducted remote usability tests using Zoom, InVision, and Google Forms. Tasks focused on creating different types of exercises and managing their teams.

Fig 13. Video recording of focus group session

These sessions are beneficial at the beginning of the design process. Participants help spot problems early on in the design process.

Branding

I went through a couple of iterations of the OpenTBL logo. The final icon is following TBL literature which states that five students make the perfect team size. The star in the middle is the outcome of those five minds working together.

Fig 14. Old and New Logos

(Left) Initial logo. (Right) Updated version.

Release

OpenTBL was released Fall 2017 after a summer course pilot test that resulted in positive reviews. It is currently being used campus-wide at Iowa State University.

Lessons Learned

OpenTBL was a big lesson in Marketing. We had a product, we had some users, but we hadn’t baked in any marketing or business methods to the product itself. Things like drip email campaigns to keep users engaged and educated about some of the less-obvious features were missing. The lack of marking methods resulted and a lot of late nights reading marketing 101 posts and listening to podcasts. If you ever find yourself in a similar situation, Intercom’s Inside Intercom Podcast is a great resource.