converTsation

Gathering Requirements

Given that this was a client project and my client was a subject matter expert, the best place to kick it off was by meeting with my client so that I could understand his problem, his goals and his existing knowledge of the users I’d be designing for. From our discussions I was able to gather and document the following requirements for this project:

Creating a Proto-Persona

Shawn and I had talked about who our target user is, and what they are trying to do. Now it was time to put a face to them, and begin empathizing with their situation.

To achieve this, I created a proto-persona for Jane Washington. I chose to create a proto-persona because these insights were informed both by Shawn and my own anecdotal experience working with candidates over the years. These kinds of assumptions are what make up a proto-persona vs. the hard data and research that usually supports a fully flushed out persona, which I did not have in this boot camp project.

Empathy and Journey Map

To continue empathizing with and understanding our user I created an empathy map and a customer journey map, focused on Jane’s experience while managing her social media comments. There are two really important insights that emerge from this:

• Running for office is incredibly difficult and overwhelming by itself because every day that passes is another day you are closer to the inevitable election.
• This gets even more challenging because while candidates of all genders can get nasty and toxic comments, female candidates get a level of hate and vitriol that their male counterparts never do. Unfortunately, it’s not uncommon for female candidates to have their bodies critiqued, their tone policed, and every other sexist comment thrown their way.

These insights highlight the importance of designing intentionally to reduce the overwhelm and make it easier for Jane to manage the toxicity that will emerge from doing comment management.

How Might We - Key Targets

Now that I had more appreciation for our target user and their struggles, I launched into a solo How Might We (HMW) session to begin identifying different targets that would meet my client’s scope and help our users.

After brainstorming, I picked the following four HMWs to focus on:

• How might we structure and prioritize comments?
• How might we give the user quick context on who posted the comment and their relationship to the page?
• How might we give users options for taking action (respond, hide, engage) on the comments?
• How might we incentivize, reward and encourage our users to respond to comments?

I included the last HMW because it should be universally considered in every aspect of my design to achieve those goals. I believe that I needed to build a strong foundation with these goals in mind, then if that works, I could layer on more specific elements that could reward the user more explicitly.

User Stories

I converted the first three HMWs into the following user stories ranked by priority:

• As a candidate managing comments on my page, I want to have comments categorized so that I can take action on the most important ones and prioritize them.
• As a candidate managing comments on my page, I want to be able to easily take different actions on each comment like replying, hiding, or reacting so that I can manage them accordingly.
• As a candidate managing comments on my page, I want to be able to see the context behind the comment and information about the commenter so that I have a better idea of who I am talking to.

User Flows

I went through two iterations of mapping the user flow, and at first I was struggling with mapping their experience with the feed and what kind of actions the user would take. After further sketching and ideating, I came back to this current version of our user flows.

Four-Step Sketching

In traditional design sprint fashion, I kicked off my sketching with the classic “Four-Step Sketching Process”. In this exercise, I found the most value from doing the crazy 8s sketches.

As shown in the two left sketches below, I did two iterations focused on what the comment feed page would look like. I drew inspiration from ActionSprout’s own design as well as ZenDesk Support. Particularly how ZenDesk allows for users to sort their feed based on different categories.

Then, as is shown in the right most sketch, I focused on what the reply page would look like and how we could use it to display more information to the user about the commenter. Here I was inspired by iMessage and Facebook Messenger, because those are common patterns recognizable to users and helps put the user in the mindset of having a 1:1 conversation.

Wireframe Sketches

Before diving into Figma to whip up some digital wireframes, I wanted to produce some more detailed and cleaner sketches that pulled together all of my ideas for what this would look like.

Digital Wireframes - 1st Iteration

Now that I had a clear vision for what the design would look like, I jumped into Figma and started pushing pixels with my first iteration of the digital wireframe. Below are the four most important pages to core experience we are trying to provide.

Giving the user an efficient and familiar mental model of a feed that they can work through (with an example showing a category expanded), which they can control and even edit to best fit their comment management style. Then giving them the ability to respond 1:1 with a commenter, while also being able to see more information about who the commenter is, and their relationship to the campaign.

Digital Wireframe Changes

Now that I had everything I had been thinking about into a digital wireframe, I wanted to get my client's feedback before moving into the testing phase. From this meeting, I learned that the client envisioned a slightly different way of leveraging the recommendation engine to best allow users to progress through the feed.

At first I was imagining comment “categories” in the feed where we would essentially put comments into these recommended action buckets, while still allowing the user to take any action they wanted on the comment.

My client pointed out that while this gives the user more options, it somewhat defeats the point of making recommendations and adds to the user’s cognitive load. Instead, he proposed that we could group comments into the different action queues, where the user would choose to only take that respective action or not on the comment.

This would create more of a “whackamole” experience for the user, and allow for better training of our recommendation engine. So given his feedback I changed my wireframes in the following ways to incorporate this model.

Tasks Tested

I tested the following tasks with 5 participants (3 female, 2 male) in the form of user interviews and testing.

User Testing Quotes

Quantitative Findings

After testing these tasks with users, I also had them complete the following survey to capture some quantitative feedback as well as my observational qualitative feedback.

Key Qualitative Findings

After reviewing all of the notes for each participant, I saw the following patterns emerge as key findings:

• Users were initially confused by the different queues and their contents, but quickly got familiar after exploring the feed and queues. (Negative)
• Missing the ability to permanently block or ban commenters. (Negative)
• Every user had different name recommendations for at least one of the queues to make them more clear. (Neutral)
• Users described working through the feed as some version of “simple” and “enjoyable”, and much less overwhelming compared to Facebook’s native tools. (Positive)
• Users found the information on the “More Info” page very helpful, and each preferred different parts but all of them liked seeing the Follower Count and if the commenter was “In District” or not. (Positive)

Key Insights

These findings validated a couple core ideas that I had for the design:

• An aggregated comment feed is an efficient and intuitive model to provide the users with which allows them to work through the comments in a very engaging way. Completing the feed and having a clear queue also creates a feeling of accomplishment and enjoyment.
• The 1:1 reply flow was seamless, and very natural to users and I believe this is due to it being such a familiar pattern that closely resembles the experience of popular messaging apps.
• Users do in fact want the ability to see more information about the person they are talking to, and while everyone has their own preferred data points that shape their view of the person, there are some universally important ones.