EdgeTheory

Product Design and Development

EdgeTheory is a social media marketing company that aims to introduce brands to a larger audience. They create engaging messages for clients on Twitter that lead to brand recognition.

I joined the company in February 2015 as their lead designer, and worked remotely with frequent trips to their offices in Jackson, Mississippi.

Onboarding

During my first few days, I observed a strong need for design across departments (brand identity, marketing, product, and internal tools), and was excited to get started.

My first project was to redesign our client-facing analytics report, "Sphere". The goal of Sphere was to display the following user engagement metrics in real-time:

However, few clients understood how to use it and questioned the value EdgeTheory provided.

To get a better understanding of Sphere, I scheduled time to meet with people from different departments to learn more about their involvement in the product. Gradually, it became clear not everyone was on the same page – both in the goals of the product and mission of the company. I addressed this by conducting an anonymous survey with members of the leadership staff. The purpose of the survey was to document where we were on the same page, where we weren’t, and what we needed to focus on. Some of the questions included:

The survey showed we needed to better communicate the value we provided customers, minimize buzzwords, and be more specific about the company vision. It also showed broad consensus on what success and failure looked like for both the company and the report.

While conducting the survey was outside the scope of my role, it helped provide a deeper understanding of where we needed to improve and how I could be most effective.

Soundboard Report: Design

My first proposal was to remove many of the distracting elements from the report and display a simple list of relevant keywords. By taking a keyword-centric approach, we could keep the mental-model and interface simple, but still support deep analysis of the data. For example, clients might ask “how many messages have been published with the keyword “#healthy?”, or “how many messages containing that keyword have been published by my account?”, and “what is the click through rate on those messages?”. Also, since EdgeTheory delivered on it’s core value proposition through hand-curated keywords, I thought the interface should be oriented around them.

Some of my colleagues pushed back on this proposal and expressed concern that if all our interface displayed was a simple list of keywords, clients might misperceive us as a traditional SEO company. They proposed creating a hierarchical relationship between topics, keywords, and messages (for example, placing #organic, #antioxidants, and #healthy under a “Nutrition” topic).

I considered this approach, but mentioned that our clients would have to work way too hard to find what they were looking for. I explained that nesting and hierarchy would require an additional level of human curation on a scale we weren’t able to support. For example, should the keyword #diet be displayed in the “Lifestyle” or “Nutrition” topic? An argument could be made for displaying keywords in all relevant topics, however that would create massive duplication, client confusion, and likely lead to increased demand on our customer support staff. Furthermore, how could performance be assessed when nesting doesn’t facilitate comparison between keywords?

To address the concerns raised by my colleagues, I modified my original proposal to include a set of controls that would allow clients to manually sort the data by keyword, messages sent, and total number of messages. Sorting would support multiple use cases and would work well, regardless if there were 10 or 10,000 keywords.

Next, there was a strong preference from the leadership to show “conversation share” in a way clients could understand. Though the term was popular internally, I personally found it very confusing. It’s a simple formula, but it’s not a common metric used in online marketing and it’s meaning isn’t immediately obvious. While I wasn’t successful in having it removed from the product, I wanted clients to have a better understanding of what it actually meant.

In the Sphere report, conversation share was represented by a star system, but a higher percentage did not necessarily mean more stars. This reminded me of the star-ratings you see on sites like Yelp and Amazon, and it didn’t make sense for what we were trying to convey.

After a number of brainstorming sessions and iterations with pen and paper, I realized we needed to start thinking of conversation share as a “sweet spot” between spamming (too many messages) and low engagement (too few messages). Ideas that came to mind were a bubble level, balance scale, and an Indo Board. With any of these, the goal is to stay within an optimal range. Similar to a sparkline:

Like Google Stocks and Google Finance, I liked the idea of being able to hover over any part of the graph to view the data. This approach allowed a rich set of data to be displayed in one area of the page. For example, after clicking on a keyword, a graph would drop down showing axes of “% Conversation Share” vs. “Time”. When hovering over any date on the graph, a popup would appear showing the date, number of signups, total messages sent, and conversation share.

Additionally, I added a date filter for the entire page, giving clients a quick glance into their history. I also tried on “Timeline” for size instead of “Conversation Share” for this round.

Feeling good with the first version, I began a Google Groups thread for the engineering team to ask questions, express concerns, and share feedback. I expressed that having an open forum for the entire team was beneficial because:

Once everyone had a chance to weigh in, some key takeaways from the discussion were:

After considering feedback from the first iteration, I thought it would be great to have a page dedicated to users, showing helpful information such as followers, signup date, and location.

Furthermore, I realized after speaking with a number of sales reps within the company that many clients preferred to use the report as a regular reference tool. I shifted my thinking from an “end-of-quarter report” to a “daily dashboard”.

I also changed the name to “Soundboard Report”, since the main purpose of the product was to support “Soundboard”, our main service.

With these changes in mind, I scrapped the previous mocks and started with a user dashboard.

A crucial update here was a sidebar containing filtering options. Filtering would complement the sorting feature by giving users even more control over the data. For example, if I had the “followers” column sorted by highest to lowest, I could also apply a filter that would only show me users who had 1,000 - 10,000 followers. The users shown would be sorted from highest to lowest and have 1,000 - 10,000 followers.

After sharing these mocks with my team, there was confusion as to what “Messaging” was, exactly. I changed this to “Conversation”, and created a sub-navigation for “Analytics” and “Messages”. The “Analytics” dashboard was meant to show data related to keywords, while the “Messages” dashboard displayed top-ranked messages (based on human clicks). I also changed “Timeline” back to “Conversation Share”, as this was a deal-breaker for some executives.

Next, I held a meeting with executives to walk through the mocks, elaborate on specific features, and get their feedback. Some great suggestions from this meeting were:

For the location columns (City, State/Province, Country), there was concern about some of these fields ending up being blank, dummy text, fake locations, etc., since this information is pulled directly from user’s Twitter profiles. After a colleague ran a test script, we decided that lumping all three columns into one made the most sense.

A summary page was exactly the thing that was missing, and it provided a soft landing onto the report. I decided to use cards to give clients bite-sized chunks of data that could be easily absorbed.

After consulting with the engineering team, there were concerns that loading sparklines for every keyword in the “Conversation Share” column would substantially increase latency. We decided to keep it on the table for now, but our backup would be to just show percentages for conversation share.

Before presenting the final set of mocks, I cleaned up the Soundboard Report logo, adjusted the color scheme, created a faceted navigation in the sidebar, expanded table rows to take up the entire width of the container, and simplified the navigation.

Soundboard Report: Development

With resounding positive feedback, I joined forces with the engineering team and moved into the development phase. I worked with a build system for the first time,

wrote the initial HTML and Sass,

learned how to work with branches in git,

and what happens when you merge unsaved changes.

After the final tweaks and polishes were made, version one of the report was launched.

Screenshots from the actual UI:

Website

During the making of the report, there was talk of outsourcing the design and implementation of a new marketing website for edgetheory.com. The idea was to hire a cheap contractor who could put one together that was “better than the one we have now”. I quickly expressed my concerns.

While I didn’t have much time to devote towards building a new site from scratch, I offered to take on the responsibility of creating a quick Squarespace site. Using a pre-existing template, I would be able to move fast without compromising aesthetics.

The existing site began with a flashy video background, switching between scenes of snowboarding, a rock concert, and the New York skyline. Scrolling down the page was jumpy, text was crammed together, the site copy was confusing, and many items seemed clickable when they weren’t.

Though the new site was a major improvement, there were still many more aspects of it I would have liked to refine (copy, logo, home page image, product logos, etc.). However, within just one week, and while working concurrently on another project, I was able to help create a much stronger face for the company.

Conclusion

During my time at EdgeTheory, I:

Additionally, I was fortunate enough to have worked on a team that made an equally significant impact on me – I grew as a designer, professional, and friend, and am grateful for the opportunity to have created something together, better than what any of us could have alone.

©Copyright 2017 Jodi Mack – Seattle, WA