License Chooser Tool Redesign

The Creative Commons (CC) is a non-profit organization that has developed several copyright-licenses that help content creators share and protect their work by licensing it free of charge to the public.

In January 2018, CC kicked off the CC Usability Initiative to rennovate the experience of CC licensing. Nine core insights were discovered and six projects green-lit for prototyping.

Redesigning the License Chooser Tool was one of those six projects, and CC partnered with INFO290: Product Studio Design to develop the concept and deliver a prototype.

Client

Creative Commons

Duration

4 weeks

Team

Conner Hunihan
UX Designer, Visual Designer, Project Manager

Personal Skills

User Testing
Prototyping
Design System
Multi-device Design

Research Synthesis

CC staff conducted a total of 117 interviews with publications and users of all kinds. This resulted in nine keyinsights, two of which were relevant to the License Chooser Tool:

Licenses are not understood

While creators understand that CC stands for free content sharing, the specifics of licensing were not clearly understood.

"I've been using CC for years and I couldn't explain the differences between the license options to you."

— Multimedia Artist, CC Usability Update for Public

The Licensing Process is not understood

While creators are motivated to license their work under CC, they have a hard time figuring out how to do so. While usability of the existing License Chooser Tool undoubtedly caused some of this uncertainty, interviews suggested that creators simply did not fully understand the process. In particular, how licenses are generated on the CC website, but often nbeeding to be applied on third-party platforms at the moment the creator uploads their content.

"An event producer and artist says he's always meant to CC license some of his work, but has never gotten around to it. "Maybe if it was more easier, like swipe up to license...""

Excerpt from the CC Usability Update for Public

This has lead to a lack of standardization across platforms, as well as feeling of loss of control by users.

Project Scope

Design Objective

Working with the Director of Product & Research, a final design objective was framed: give users a tool, not only to find the license they need, but to learn about the licensing process along the way. This tool also needed to be portable across platforms, in order to offer third-party content hosting platforms a standardized template.

How might we educate users about the process of using the license they are selecting for their work?

Target User

A user persona was created in the shadow of a typical user. Paulo is a University professor who publishes a variety of content types (academic papers, datasets, conference presentations), and he publishes that content across a variety of platforms, using many tools.

For Paulo, content is his life’s work, and so it is important not only to share it publically, but to protect it, as well. Paulo believes that the open sharing of knowledge is fundamental to his work.

For Paulo, the act of sharing is a statement.

Deliverable: Redesign the License Chooser Tool

The deliverable for the project would be a high-fidelity prototype of a License Selector feature to replace the existing selector tool on the CC website. The design was to address selection on both mobile and desktop devices, and also needed to integrate with a third-party platform.

Existing License Chooser Tool

Explorations

Existing Brightspots

The existing landscape had three areas that tested very well with users. These would become the foundation for the design:

License Context

Users responded strongly to this graphic on the CC website, which orders CC licenses along a dimension of restriction.

License Components

The CC website has a page that outlines the fundamental building blocks of every license.

Modularize Selection

Third-party platforms like Medium have already integrated CC license selection into the uploading process.

Metaphor: Selecting a license as making a recipe

These foundations were used to develop a new metaphor for the design – making a recipe.

1. Shopping List
Create a list of the "ingredients" to be used. This is provided by titrating the explanation of the license components into increasingly detailed levels of exploration.

2. Shopping Cart
Explore the store, pick items up, put items down. We encourage such exploration through an interactive matrix that allows for attribute-based comparison.

3. Recipe
Follow the recipe to turn those ingredients into a meal. In licensing terminology, this means instructing people on the process of how to actually apply the license they have just selected.

Shopping List

Before users can choose a license, they need to understand the licenses. An interactive graphic facilitates exploration of the "ingredients" users will need.

Shopping Cart

Once users understand what it is they are looking for, it is time to make a choise. Offering this selection via a matrix allows for comparison across licenses.

Recipe

Once theie license has been generated, users need to be instructed on how to actually apply the license, as the process is different, depending on whether the content is self-hosted, on a third-party platform, or needs plaintext application.

Left on the cutting room floor

While the matrix mechanism was ultimate selected because it allowed for the greatest degree of exploration and context-setting, two other selection mechanisms were considered:

Best-of-Three

Minimize choice aversion by offering a recommended option, as well as two attribute-based alternatives. While this streamlined the selection process, users found it too simplistic, “my work is too important…I need to know more about the details of this license before I can trust it.""

Wizard

The existing mechanic and, from a decisional perspective, the most usable. However, a wizard does not facilitate exploration outside of the confines of the component, resulting in long-time users who, while they have the correct license, do not undertsand it.

Multi-device Prototype

Mobile Design

The final design holds selection as the primary focus, but around that skeleton, introduces opportunities to explore the licensing process. Users can dive deeper into the technical language, see how attribution will look, and explore real-world examples that have used this license.

Desktop Design

Desktop allows for more detail upfront, essentially bringing the component summaries to the main hero section of the page. Nonetheless, selection is still the primary function of the feature.

Third-Party Integration

While a Creative Commons License Chooser add on already exists for Google Documents, conference presentations are high on the list of content Paulo wants to license. A Google Slides add on was therefore designed to demonstrate the integration of the revised Lisence Chooser Tool on a third-party platform.

Handover

Style Guide + Design System

The design necessitated extending the existing Creative Common's style guide. As such, a light design system was developed to document the typography, colors, and component details.

Project Design System

Next steps

The desktop and mobile prototypes have been staged for development, and can be viewed along with other prototypes developed as part of the CC Usability Initiative at this GitHub repository.

The Google Slides add on has also been staged for production. If you would like to learn more or get involved, visit the GitHub repo, here.