Our heads of creative on our Burger King Social Media account asked me to create a product that would show what Burger King's target audiences were talking about on social media.
Active users:
Strategists and Account (agency): People who are new to the account and need to educate themselves about the client's target audiences and their online presence.
Creatives and community managers (agency + client): People who need to create ideas or write tweets to engage a client's target audience.
Passive users:
Marketing leaders (client-side): In-house marketing departments (social media coordinators to CMOs) who need to stay abreast of what their target audiences are talking about and doing.
We created a web application that houses a real time feed of social conversations happening within and between a client's target audiences. We used our existing strategic audience research to inform how we filtered social data via an analytics vendor to create this dynamic feed.
We just launched v1 of Speedbag! We're tracking key click states (filters, linkoffs) to optimize our experience. In our next iteration, we'll add okta authentication, multiple clients, and our audience insights page. Our roadmap for the future also includes adding new data sources.
My role: Lead UX Designer (all assets displayed are mine, unless specified)
An SVP of Social Media mentioned to me that he was noticing that creative teams were unable to quickly create ideas based off social conversations, which have a super short lifespan. An example of a creative idea is when a local Burger King changed their signage to read "Prom?" to the adjacent Wendy's, our social media rival. The @BurgerKing account tweeted the image and it went viral, garnering a ton of earned media for no budget. This idea was inspired by the "promposal" trending tweets, which our creative teams only knew about because they had their finger on the pulse of Burger King's audience.
We had a social team that used a platform, Crimson Hexagon, to disseminate trends in a weekly email, but this information wasn't resonating enough to kickstart ideas.
This image was a slide from our awards show submission that I did not make.
This SVP had a lot of preconceptions about where these issues with creative ideation were coming from (not knowing enough about social media, creatives being too lazy). He and a community manager also had highly prescriptive designs of a fixed height screen with featured, "relevant" tweets that would update in "real time." In their minds, they wanted this board to be displayed in our lobby so we could also show off our knowledge of a client's audience when they were in the office. Ideally, he wanted this product to scale to all of our clients.
After hearing this, I asked to take a step back and conduct discovery research to interrogate these assumptions. I tabled the solutions.
I sourced 12 people from different departments within my company to examine how we were currently creating social ideas, what issues we had in executing social ideas, and what communication issues we had between teams.
I learned that we had difficulties creating ideas quickly because teams weren't monitoring audiences on social media properly—people only saw conversations that were 1) already winding down and 2) on their own social feeds. We needed to feature conversations that were relevant to our clients' audiences, before they started trending.
While I spoke to key players in-depth, I wanted to get a broad look at how people across our agency monitored their clients' audiences, how they ideate, and what platforms they used to stay up to date.
I learned that in addition to being behind the curve and monitoring the wrong conversations, our internal strategy, analytics, and social teams weren't sharing their respective information in a central place for everyone to view. We were briefing new people on accounts in ways that didn't include their social presence.
From our research, we determined that our product should at the very least include a feed of real-time social media conversations that our active users could view in order of their relevance. In order to input this data, we'd need to use a data vendor's API.
I created the criteria by which we assessed potential vendors. Our data vendor ideally needed to provide:
We analyzed four competitors and settled on a vendor called Newswhip, which aggregated news and social stories and ranked them using a predictive algorithm.
After synthesizing our information, we needed to present our findings and product proposal to our company CEO to secure the funding needed for our data vendor and internal resources.
Our elevator pitch? Let's create a social hub for each of our clients that shows a data feed with conversations on the verge of trending for their target audiences. We'll also include baseline strategy insights and trending topics as part of our first iteration.
For our clients (passive users), we'll use this dynamic feed to create a stylized "ambient" view, where people can get the top trends relevant to their customers in a single view.
After receiving approval from our CEO, I wanted to write a full product brief/plan of action. This document identified our key research findings, defined MVP features for the hub and ambient view, potential pitfalls, and ways our teams could operate after the MVP launched.
This brief helped crystallize our roadmap before I set out to design the first round of wireframes.
For the active user, we wanted to create a list view to showcase the trending news for each audience. I framed this data feed of social content and articles with conversational filters that prompted users to select which audiences and data sources they'd like to view.
For each content module, I focused on highlighting the headline and Newswhip's predictive ranking, which was supposed to show viral stories before they trended. Newswhip tended to bring in articles, so the headline usually encapsulated the content well. In this version, I de-prioritized imagery so users could quickly grasp the news.
Lastly, I included pages for trending topics and audience reference materials for each client to provide context around the feed data.
This project had a lot of stops and starts, as we had no money for our chosen data vendor! We needed to revert back to using our old data vendor, which only aggregated tweets, which they ranked by retweets. We could still filter tweets by their audience tags (an aggregation of boolean strings). We also explored using a free Reddit api to pull top subreddit threads.
This roadblock was a blessing in disguise, as we had time to stress test our preliminary ideas with other users. We realized that a shift to only including tweets meant we needed to better prioritize imagery, use variable module heights, and reorganize the content hierarchy of each module. I also looked at API readouts to determine exactly which data elements we'd want to include in our display.
I assembled my wireframes into these prototypes using InVision.
I did not make these comps. Instead, I worked closely with a visual designer responsible for branding this product. I created high-fidelity wireframes, which included iconography, protruding metrics, and a stylized filter system to provide a strongly framework that we could apply the branding to.
After selecting a color palette and a typeface for the product, the designer and I went through his different iterations to determine the ideal version from a usability and branding perspective.
During the build of Speedbag, we uncovered a couple issues with how we were displaying modules on the homepage. We now show top stories regardless of its audience tag, whereas before we were going to show only the top story from each audience to ensure a full cross-section of content. We streamlined how filter tokens worked.
Our entire team worked closely with QA and analytics to ensure not just functional operation, but also to make sure the content our API returned was relevant and intelligible. Our analytics team tweaked the boolean strings in their dashboard to better populate the Speedbag feed.
As we designed the Speedbag feed, I was envisioning how that data could be visualized in an ambient animation. The purpose of this ambient view was for our agency and our clients to display in office. This was essentially a useful screensaver.
I designed the first version with our original data vendor. In this version, I posited that we design our animation as an exploded pie chart, or a 'fan'. These visual and interactive cues would supplement the lack of imagery from our data vendor. Each fan slice would be associated with a story.
During our design process, we had been preliminarily pitching Speedbag to clients. Our SVP learned that C-level execs wanted a single sheet of top news for the day from their ambient view. We wanted to rethink the fan view with this 'one-sheeter' ask in mind.
We applied the branding to a sliding tile style mosaic of the top five stories of the day. Our designer envisioned how the tiles would grow and shrink as they animated on the screen. We designed a cadence of how stories should play throughout the day. I did not make the comps for this either.
We just launched v1 of Speedbag! We're tracking key click states (filters, linkoffs) to optimize our experience. In our next iteration, we'll add okta authentication, multiple clients, and our audience insights page. Our roadmap for the future also includes adding new data sources.
