User testing, prototyping, design system, responsive design


Conner Hunihan (Design Lead, Product Manager)


4 weeks

Essential Questions

How can the design enable third-party content platforms to easily incorporate the license chooser tool out-of-the-box?

How can licensing decisions be framed so that users can make informed decisions, without needing to learn technical details?

The community doesn’t understand what licenses are, or how to use them

CC staff had already undertaken much of the research heavy lifting, conducting over 100 interviews with publications and users of all kinds. Of the nine key insights that came out of that research, two were particularly relevant to the License Chooser Tool – licenses are not understood and while creators are motivated, the process for how to actually license work is not clear.

  • Framing the opportunity

    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 the selection experience also educate users on the process and technical details of a license?

A typical, passionate 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 publicly, 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.

Three existing bright spots

In testing the existing licensing experience, there were three areas that stood out as particularly clear, insightful, and generally useful to users. These three concepts became pillars in the foundation for the rest of design.

  • Putting licenses in context

    Utilizing the existing data portal property would take advantage of existing awareness within the community, but the information architecture needed revision in order to suit the new product categorization.

  • Explaining license components

    The CC website has a page that outlines the fundamental building blocks of every license. These components are combined in different ways to produce license with varying degrees of restriction. Understanding these pieces allows users to craft, exactly, the protection placed on their content.

  • Third-party integration

    In the absence of a robust license chooser tool, many third-party content platforms have taken it upon themselves to design a CC licensing experience, as part of the content upload flow. Though these platforms have taken steps toward a fully portable-tool, there is no consistency or standardization.

Using metaphor to provide a mental model: grocery shopping

A shopping metaphor was used to give users the comprehension and control they need to make a decision, without having to explain license technicalities. This metaphor breaks the choosing experience down into three phases:

Step 1: making a shopping list

What do you do before going shopping? You make a list of the ingredients to buy. Orienting users to the license components gives them an opportunity to dive deeper into details. Surfacing summary information about the component as the default progressively discloses details that might not be immediately relevant.

Step 2: filling a shopping cart

Once in the store, shoppers compare and contrast items before making final purchasing decisions. Similarly, the Chooser Tool builds upon the license context graphic by introducing the four differentiating dimensions in a matrix format.

Step 3: making a recipe

The last step is actually using the purchased ingredients. With the Chooser Tool, this mostly means copying and pasting HTML (although there are different instructions for platform and plaintext versions). Highly contrasting text and color hierarchy instructs the user on what to do next, guiding them through this final step.

Interactions left on the cutting room floor

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

  • "Recommended option"

    In order to minimize choice aversion, a recommendation could be offered, 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 mechanism on the existing Chooser Tool is a wizard which, from a decisional perspective, is the most usable. However, a wizard does not facilitate exploration outside of the confines of the component you are selecting. This results in long-time users who, while they have the correct license, do not understand it.

Mobile prototype

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.

Designing for third-party integration

Conference presentations are high on the list of content Paulo wants to license, so the design was ported into Google Slides to demonstrate the integration of the revised Licence Chooser Tool on a third-party platform.

Handing off the revised 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.