Lyle Klyne » Interaction & User Experience Designer – Completion <br> by Design

Completion
by Design

Celebrating student success rates in community colleges

Completion <br> by Design hero image

tl;dr

Completion by Design (CBD) was a seven year Bill & Melinda Gates Foundation initiative that applied design thinking to improve student success rates in community colleges. I lead interaction and experience design while working with a strategist, a visual designer / videographer and an illustrator to create a website celebrating the initiative’s success and catalog its learnings. The live website can be viewed here.

Main CBD Screens


Design Brief

Seven years ago, nine colleges set out to improve student success rates. With support from the Bill & Melinda Gates Foundation, they bet that they needed to redesign their institutions around completion and success rates. It turned out they were right, and the initiative was a wild success. We were approached to redesign the website with two primary goals: highlight and celebrate the initiative’s success and categorize and catalogue best-practices and takeaways.

Learn

We begin by speaking with the participating institutions (there were nine throughout Florida, North Carolina, and Ohio) and doing a comprehensive audit of the existing site (we printed hundreds of pages and pinned them up, then threw a bunch away.)

Previous CBD Home Page

Previous Site

The previous website presented a number of opportunities. It appeared the website had been built incrementally starting at the onset of the initiative. There were not clear paths to the most relevant information — in fact frequently important information was obfuscated behind confusing menus.

Previous CBD Home Page

A pinwheel menu served as the primary way to get to critical information. It was unintuitive.

Previous CBD Menu

What we learned from the audit

  • Lots of information had been added incrementally — and although there was a wealth of quality and actionable information, it was difficult to parse
  • Much of the most valuable information was buried deep in the website — frequently in static PDF files
  • There were many outdated UI paradigms, including an unintuitive pinwheel menu that served as the gateway to critical information
  • The initiative as a whole had been a wild success — meeting goals over three years early, but this wasn’t clear
  • People involved were eager to share their stories and teach others, but the current website didn’t allow them to a good outlet too

What we learned from talking with people

  • There were two primary use cases that had to be supported
  • People who were unfamiliar with the site wanted to learn more about the initiative
  • Educators who were ready to apply (or currently applying) CBD methodologies needed a clear path to finding relevant Information
Previous CBD Home Page
Previous CBD Home Page

Consolidate

We consolidated the primary nav based on these two use cases. The primary nav included three primary sections. The home page serves as an overview for CBD, highlighting critical moments and serving as jumping off points for both users. The outcomes pages celebrates the success of the initiative with infographics, as well as providing some background information about schools involved.

We moved all the resources into a drop down menu. We also included calls-to-action at the end of each section, giving people the ability to continue to the next logical section or find information for applying lessons learned.

Previous CBD Home Page

We heard that the Loss / Momentum Framework was critical for understanding the CBD methodology. Previously, it was buried in a PDF deep in the website. We converted it into a top-level section in the resources menu to make it more accessible.

Previous CBD Home Page

In addition to working with an illustrator, I worked with a designer and videographer who flew to several of the participating schools and interviewed participants. We highlighted their stories throughout the site to give a human voice to Completion by Design.

Previous CBD Home Page

Design & Extend

The Bill & Melinda Gates foundation has many initiatives similar to Completion by Design. Their vision was that the CBD website could be the first of many websites documenting and cataloging knowledge from these initiatives. Once we had established a design direction, generalized our approach into a design system that could be applied towards later initiatives.

Previous CBD Home Page
Previous CBD Home Page

Impact

  • Launched website prior to a Courseware conference sponsored by The Bill & Melinda Gates foundation. The live website can be viewed here.
  • Won a renewed contract focusing on a universal knowledge sharing platform
  • Extensible design system applicable for future Gates Foundation initiatives

Work

Data Exploration

web app supporting exploration and comparison

Fun