Getting Started Guide

Role: Visual designer and UX writer

Timeline: 6 months

Tools: Sketch, Marvelapp, Google docs

Outcome: Launched product

Problem Statement: Getty Images had a contributor onboarding problem. When new contributors finished enrolling, they had no idea what to do next. We also knew, that they were not reading important documentation before making their first submissions. Data also told us that an overwhelming number of contributors dropped off, and never submitted, after enrolling. With contributor tools mostly only available in English, we were losing engagement from the very diverse and global contributor base.

The idea: Design a Getting Started Guide for new contributors that they’re presented with right after completing enrollment. It will walk contributors through the most important parts of being a contributor and support a fully localized experience for the global userbase.

Stakeholder Interviews

I performed stakeholder interviews to understand the underlying problems. I interviewed individuals from a number of teams who are impacted by our poor onboarding process.

Teams included:

Finance

  • New contributors did not understand their different account names.
  • New contributors were not completing important steps that allowed Getty Images to pay them royalties.

Regional offices

  • New contributors did not understand our tools because the localized experience was very spotty and felt impersonal.

Support

  • The majority of tickets were from new contributors. The answers to their questions existed in current documentation but contributors couldn’t find it.
  • Support employees had a hard time finding documentation as well.

Content

  • New contributors did not understand important concepts, like when releases were needed, understanding exclusivity, and how to upload.

Themes/Sitemap

After collecting insights from my stakeholder interviews, I mapped out common themes which helped create an initial site map.

Copy first approach

I used a copy first approach, knowing that what the Getting Started Guide said would be most important.

I used my initial site map to create the different sections, or modules, of the guide. The document was built in Google docs, which I find best for collaborative editing. I socialized the copy with stakeholders and subject matter experts for their feedback.

We went through three iterations of the copy, with included multiple revisions and some reorganization of the sitemap.

Design iterations

I began the visual design portion shortly after the first iteration of the copy. I had a few goals in mind to achieve with the visual design.

Customized – The Guide needed to tailor content based off the user type. The Getty Images contributor base was diverse, and information was not the same for everyone. The design would support a modular approach, making it easy for us to customize their experience.

Visual – Since this would be one of the first experiences for new contributors, I wanted it to be visually stunning and showcase our award-winning imagery.

Long page scroll – I was tasked by our UX Manager to implement a long page scroll design for this project, giving it a more modern and interactive feel.

1st Prototype

2nd Prototype

  • More visual, less copy
  • Simplified the header
  • Made the division of modules clearer, by including the header above the bar
  • Added personalization

The second prototype was handed off to our developer and built into our staging environment. We would perform testing on the beta version.

User Testing

I performed 3 usability tests with non-contributors. Here’s what I learned.

  1. Users couldn’t figure out where to make their first upload.
    1. They were ready to upload, but it was not obvious where they could do it. They were forced to read a lengthy User Guide to find the link.
  2. Payment information is buried.
    1. Getting paid was top of mind. Users were surprised to find payment information at the bottom of the IA.
  3. Navigation was missed
    1. Users interacted with the long page scroll, but 2 out of 3, completely overlooked the navigation at the top. This made it difficult for them to feel anchored within the experience, and hard to find something they had once seen before.

Final design

Based off the user testing, final adjustments were made to the design.

  1. Left hand navigation – A more robust navigation, that exposes the sub sections and helps anchor the user to where they are within the experience.
  2. I moved the section, ‘Get Paid’, higher up in the hierarchy.
  3. Added additional copy in the Basics and Upload section that clearly illustrates where the user will upload content for review.
  4. Added final imagery that reveal a color gradient as the user scrolls, this is aligned with our overall brand style on gettyimages.com.
Desktop
Mobile