Designing Influencer Plus
We recently launched Influencer Plus (I+) at Fullscreen, a platform that helps brands and top social media influencers create authentic campaigns together. I’d like to share the story of how we stripped down an outmoded service and rebuilt it from the ground up to meet the needs of our users.
The Problem
Before its rebranding and relaunch as I+, the product used to be called Gorilla, an offering that lived within our YouTube Multichannel Network business, serving only YouTube influencers. Our sales team built campaigns with brands that were published to targeted groups of influencers, calling them to produce promotional content in exchange for higher return than AdSense earnings.
Gorilla served as a core part of Fullscreen’s value pitch for two years, but suffered low participation rates once influencers joined Fullscreen. This was particularly confusing because we were offering our influencers a way to earn more money: why weren’t they taking it?
After meeting with team members from the Gorilla business, our influencer-facing teams, and through directly polling our influencers, we unearthed two major problems:
- The campaigns drafted and published by our team in conjunction with large brands didn’t appeal to our influencers. They felt that they were rigid, fake, and overly corporate: worst of all, they felt participating would hurt their connection with their fans.
- The platform itself faced severe usability issues; a significant number of influencers never participated simply because they were overwhelmed or didn’t understand the campaigns themselves. Campaign screens were littered with paragraphs of disorderly text in different font styles, primary calls to action were hidden in hard-to-find places, and entry forms were both hard to find and fill out.
Our design process
We knew we had to solve these problems on two fronts: on the business side, where sales representatives write and publish campaigns to influencers, and in the product, where they receive and participate in campaigns.
With limited design resources, we chose to throw most of our design efforts behind the user-facing product first, which we felt needed the most attention. Over the past 6 months, here’s how we redefined Influencer Plus.
UX research on business and design
I basically covered this in the beginning. We picked apart our influencers’ behavior and needs meticulously, through polling and analytics analysis, customer interviews and usability tests, and focus groups.
Workshops and brain dumps
As a design team we usually conduct weekly critiques and workshops together to get our creative juices flowing. They worked so well that we decided to expand these workshops to include engineers and PMs.
First, we collectively built proto-personas to represent our core user groups (eventually, we expanded our personas to include real people). Building these personas helped give us a consistent stake in the ground that the team could always look to when trying to frame problems or think from a user’s perspective.
We also did a lot of brainstorming and idea generation. Using the Crazy 8s strategy (one of my favorite brainstorming activities), rapidly sketching out ideas and concepts and then marking, critiquing, and discussing them as a group. After several rounds, we were able to quickly identify and iterate on leading ideas.
Finally, we mapped out our product’s user journey and critical path, illustrating how we wanted to guide users through our product and to successful participation in campaigns.
Low-fidelity wireframes
Armed with a slew of concepts, personas, and user journeys, we collected everything and jumped into building out a basic style and structure for Influencer Plus that we could test internally and with real users.
Mapping everything out in blocks and gray tones helped us focus on architecture first before addressing brand and style. We had an engineer present for this process, helping us determine the scope and size of our MVP. This ended up being a really valuable part of the process, and definitely served to keep us realistic.
I’ve found that the more time I spend designing in low fidelity, the faster we can create visual design and UI elements at the end of the process, and the less rework that needs to happen in response to basic back-and-forth with team members.
Style guide
As we started to nail down the main structure of the product, and our engineers were close to completing the skeleton of the site, I started to explore a visual style guide we could start applying to the respective pages. This started with basic styles, colors, typography, grid, navigation, form fields, etc. and as the mocks started to become clear and needed more UI elements we plopped them in there as we moved along. At the time we had a lot of deadlines to achieve so to help out the engineers I jumped into CSS / Sass to get the appropriate styles in place as much as I could. If you’re a designer and worried about styles not looking right don’t be afraid to jump into the CSS and take a little control.
Testing
At the start of this project, we had done a lot of user research and testing before we implemented anything but I think we could have done a better job along the way. Alas, we didn’t test what we built a much as we should have (we didn’t have a QA team available to us at the time) but towards the end we sat together as a team to conducted a final user testing with talent managers a couple days before launch. Needless to say it was a flame of anxiety from what we discovered (submitting content wasn’t a clean flow as much as we thought it would be) and wanted to change a lot of what we already built. But that’s what MVPs and iterative maintenance are for. We just needed to take a step back and quickly plan for v2.
Launch and retrospective
Post launch, we all gather around a circular table and talk about what we did well, what we did less well, and what we could improve on together as a team. This gave us the opportunity to talk about frustrations that came up along the way and look back at how much we had achieved. It was a great way to get our team get back on the same page, even after all our stand ups and all our sprint planning, our retros are a great time to step back from the day-to-day and think about your development process holistically.
After a product launch I like to reflect and give myself my own retrospect as a designer. No matter how pixel perfect I build mocks, it’s unrealistic to expect them to end up perfectly representative in life. When I have a particular vision of how something needs to feel, I loving pairing with an engineer or writing CSS of my own to get something exactly right.
For those who are interested in perusing product design, I highly recommend learning even a little bit of HTML and CSS. It will help you understand the limitations of how complex your idea is getting, and it also lets you take control over your design in its implementation.
Influencer Plus will always be a work in progress. I’ve learned nothing is ever perfect or the way you expect them to turn out. There is no right or wrong way to go about building products. It’s about telling stories, learning from your mistakes, and working together. Above everything else, prioritize communication among the team, and resolve miscommunications as quickly as you can.
I’d like to give a shout out to my amazing team: Chuck Lee, Brett Ulrich, Justin Greene, Jeff Uyeno, Brandon Aaskov, Stefan Sundin, Dustin Goot, Jeremy Hoffing, Claudio Baccigalupo, Aaron Harpole. High fives to the Fullscreen Product and Engineering team that stood behind us the whole way through. You guys rule!
A HUGE thanks to Kat Kitay, product manager at Fullscreen,
for becoming my personal Editor-in-chief.
