Woovit
Influencer marketing web app connecting content creators with video game publishers
woovit cover

Company / TriplePoint PR tool Woovit

Role / UX design generalist and customer support working with Woovit founder, TriplePoint PR partner, 2 developers, and 1 creator relations manager

Tools / Sketch, Adobe Photoshop, HotJar, Zeplin, Pivotal Tracker, Trello

Timeline / 11 months

Overview

Woovit is TriplePoint PR's influencer marketing web app connecting game publishers with 13,000+ active content creators on Twitch, Mixer, and YouTube for promotional opportunities. Initially an internal code distribution platform, Woovit now streamlines the process of game discovery, code distribution, content production, and reporting.  

By the second half of 2018, I led the redesign of Woovit’s publisher experience with two software engineers, transforming a code distribution platform into a comprehensive marketing automation tool. To expedite the learning curve and better understand user needs, I eventually managed Woovit’s customer support as well as social media.

Problem Background

TriplePoint PR recommended video game clients to use Woovit when researching creator friendlies. However, the grunt work (influencer relations and key distribution) was done externally via email.

Before Redesign

Search Engine

woovit search engine image

While hired as an Account Coordinator for TriplePoint PR from 2018-2019, its internal tool Woovit was just a content creator database. Its initial value proposition was a search engine that archived every influencer that was given a video game key from a TriplePoint PR clients.​ It also offered analytics on subscriber and view growth, yet key distribution and influencer relations was done externally via email.

User Research

Customer Support

Handling customer support via email, I communicated with multiple video game clients who had problems distributing keys and setting up campaigns using Woovit.

"Different creators play on different consoles. For the same game I have to make unique campaigns for Xbox and PS4 keys."
"We're noticing a lot of creators haven't published a video yet..."
"I don't want small creators claiming our keys. I want keys automated to influencers with 25,000+ YouTube subscribers and 5,000+ Twitch followers."

Key Personas

Thanks to customer support, the team identified three content creator personas and two video game publisher personas.

key thief image

Key Thief

Bought Followers

Goal: Claim video game keys for personal use, sell video game keys for profit
Needs: Vulnerable account creation, no bot detection, unlimited key claims.
Pain Points: Account authentication, account suspension.

small creator - image

Small Creator

100 - 10K Followers

Goal: Grow their channel, foster community within chat, explore content creation.
Needs: Free or cheap games, time to balance streams with other obligations.
Pain Points: Unfamiliarity with contract negotiations.

influencer - image

Influencer

10K+ Followers

Goal: Acquire new sponsors and industry partners, build personal brand, satisfy community niche.
Needs: Seamless key transactions, agency representation.
Pain Points: Micro-managing partners.

coffee stain - image

Indie Game
Publishers

Employees: 1 - 100

Goal: Game launch becomes viral.
Needs: Complete creative control, sense of empowerment, influencer communication.
Pain Points: Activations going beyond budget, key theft, send appropriate console keys to creators (Xbox, PS4, etc.).

corporate game publishers - image

Corporate Game
Publishers

Employees: 100+

Goal: Launch large-scale influencer activations.
Needs: Team accounts, send appropriate console keys to creators (Xbox, PS4, etc.), campaign tracking, analytics.
Pain Points: High creator interaction.

Design Challenge

How might we scale up TriplePoint PR video game clients' efforts to recruit, monitor, and track analytics on content creators playing their games?

Implementation

Design / Engineering Collaboration

sketch - icon

I used Sketch to create design artifacts (e.g. low and high-fidelity wireframes, user flows).

pivotal tracker - image

We used Pivotal Tracker to assign tasks and priority levels (high, low, backlog).

zeplin - image

We used Zeplin to deliver high-fidelity wireframes to the engineering team.

hotjar - image

We used HotJar to analyze users' click patterns when we considered iterating.

User Flow Diagramming

Publisher Account Flow
Login, publisher home, create campaign, and setting flows

woovit user flow diagram

Low Fidelity Wireframes

30+ Unique Screens
Multiple screen states, micro-interactions, and modal states included.

Creator Profile

creator profile - lowfi

Settings - Administration

settings - administration lowfi

Offers

offers - lowfi

Key Features

Creator Identification and Key Delivery

creator identification and key delivery - high fi

Inserting search into Woovit’s header now suggests the feature as a core tool for Publishers. Coupled with a new search engine results page, we then implemented Proactive Offers, allowing Publishers to push their promotional opportunities straight to creators’ Woovit feeds rather than their inboxes. No more emails!

creator profile high fi

To keep users engaged with search, I designed Creator Profiles— pages dedicated in expediting publishers’ vetting time. In addition to pulling videos from YouTube, Twitch, and Mixer’s APIs, these pages allow creators to customize their biography, add additional social media accounts, and even make their location and email public for future business opportunities.

Transforming Accounts into Collaborative Organizations

collaborative organizations high fi 1

While single-user publisher accounts satisfied Indie studios with small teams, we soon discovered prospective AAA studios and video game agencies needed something more collaborative. With team members siloed to different projects, it did not make sense for large studios to have just one person in charge of multiple promotional campaigns. A prime example was Paradox Interactive, a Woovit friendly boasting over a dozen game franchises, 6+ line teams, and an army of marketing and PR pros.

account settings - high fi

To better accommodate large teams, I designed the core functionality of Woovit’s new Team plan. Loaded with supplemental project management tools, publishers can invite members to an organization, set tiered admin controls, assign campaign notifications, and much more. Tying the experience together, a new username dropdown frames users as members of an organization.

Upload and Manage Codes at Scale

managing codes - high fi

In order to manage campaign codes in the past, publishers were required to go back to Woovit’s campaign creator. With only two features present (upload and delete all), publishers for example had to re-upload their entire depository if even one faulty code was reported.  An awkward and ultimately archaic experience, I subsequently redesigned the Codes tab so publishers can better manage their codes at scale.

codes - high fi

Instead of being a veiled depository, the new design supports a transparent layout for adding, deleting, and exporting codes in bulk. Through a dedicated search bar, publishers can pull individual codes instead of parsing through an entire library. If a publisher prefers the latter, I included three filters (All, Sent, and Available) to help shorten their spreadsheets— along with their time.

Real-time Updates Through Activity Feeds

real time activity feed - images

As Woovit sought to empower publishers with new tools for collaboration and project management, the team knew the platform’s growing complexity demanded some form of campaign tracking. Especially for new users and disorganized teams, any time saved through automation would be spent inevitably on monitoring and record keeping.

To better measure campaign performance, I designed Activity Feeds to help publishers quickly identify campaign updates— video deliveries, uploaded codes, troubleshooting requests, and more. Activity Feeds also track internal actions (highlighted in blue) so hands-off users can quickly get up to speed.

Customizable Campaign Widgets

campaign widgets - image

Crafting customizable widgets that advertised campaign offers required me to come up with a consistent design pattern that retained Woovit’s distinct branding when reconfigured. After several iterations, the final widget design establishes visual hierarchy with actions at the top, content in the center, and qualifications at the bottom.

In terms of the new Widget tab, publishers can seamlessly adjust their campaign widget’s width, height, theme, and publisher picture through an in-window preview. For even greater convenience, the widget’s HTML link automatically updates as configurations become adjusted.​

Impact

user base expansion - icon

100%

User base expansion from 2018 - 2019

users growth - icon

10,000+

Users from 2018 - 2019

users as of 2021 - icon

27,000+

Users as of 2021

What I Learned

User research should guide design decisions

Customer support guided myself and the engineering team on what features deserved high priority, and what features could be left in back-log. It was also humbling to realize what I worked on benefitted creators and publishers I chatted with months if not weeks before.

Design / engineering collaboration

I initially wanted to flex my design chops and think outside the box. Yet when presenting my early work to stakeholders and engineers, I found that the simplest designs were the most effective in handholding users (and my teammates) through lengthy workflows.

Agile product development involves designers working ahead of engineers

My first experience working in agile product development, I found it most time-effective to hand deliverables one week in advance to the engineering team. This way, engineering had ample time to give feedback on any working limitations and wrestle with bugs later on. Leveraging kanban boards via Pivotal Tracker was especially valuable in prioritizing tasks within our development timeline.