RoundTeam Web App ReVAMP

ABOUT ROUNDTEAM

RoundTeam is a Twitter content management platform enabling brand marketers to more efficiently engage with followers on Twitter. RoundTeam automatically discovers and shares relevant content to users' Twitter timelines.  

DESIGN GOAL

RoundTeam received user feedback that their onboarding flow was confusing and it was leading to less than optimal conversion rates. They asked us to identify the most pressing problem, and re-design it. 

 

MY ROLE

I worked with 3 other designers for 11 weeks to scope and execute the project. I led usability tests, rapidly prototyped, and presented in key client meetings.

OUR REDESIGN WAS A GREAT IMPROVEMENT!

"THE INTERFACE CONVEYS A LOT MORE RELIABILITY AND INTEGRITY."
"SIMPLE ENOUGH. IT MAKES SENSE TO ME"
"THIS IS MUCH EASIER TO UNDERSTAND."
"THIS MAKES A LOT OF SENSE IN TERMS OF CONTENT CURATION."

RESULTING IN 50% INCREASE IN EFFICIENCY – ABOUT 10 MIN SAVED.

 


Embed Block
Add an embed URL or code. Learn more

QUICK SYNOPSIS

Re-Designing A Twitter Content management platform

The initial hypotheses around why users found the current on-boarding flow confusing drove what questions were included in our user test script.

We conducted usability tests with 7 users from the target demographic, growth marketers and brand managers, as well as analyzed current user data collected by RoundTeam. We uncovered key insights that led to re-evaluation of the account customization flow, in particular creating a no questions asked design which passively guides users to their next action or The Goldilocks Principle.

After analyzing other content management platform designs, and conducting multiple design studios, we rapidly prototyped multiple versions of dashboard screens.

Our final high fidelity prototype incorporated RoundTeam's design style and was implemented by the RoundTeam design team for further validation. 


RESEARCH

"what am i supposed to do?"

RoundTeam's Dashboard Pre-Consultation

RoundTeam's Dashboard Pre-Consultation

Our user testing objective was to understand each user's mental model and context navigating RoundTeam, paying particular attention to the product's largest components - Navigation, Landing Page, and Dashboard. We used the results as guidelines for which part of RoundTeam was the most dire in terms of redesign had the highest potential for overall impact of product satisfaction and retention.

DISCOVERY PHASE

USABILITY TEST WITH 7 GROWTH MARKETERS AND ANALYZED DATA SHARED BY ROUNDTEAM.

OBJECTIVE: Understand user's mental model and context navigating RoundTeam - NAVIGATION, LANDING PAGE AND DASHBOARD, FLEXIBILITY TO EXPAND TO OTHER SOCIAL MEDIA PLATFORMS


RESULT: Decided to tackle DASHBOARD based on importance

Our original hypothesis was that it was the landing page that was causing the high drop-off rate and that users simply could not understand what the product was exactly.  Upon conducting usability tests with the growth marketers, we uncovered some common themes: 

  1. Landing page issues

  2. Dashboard setup issues

  3. Authorization issues

  4. Pricing and other issues (help page, disruptive pop-ups, etc.)

We then mapped pain points in each of these categories across two axes: Most Important For Users vs Most Important For RoundTeam.  We were able to identify the most critical of RoundTeam components -  the Dashboard.  The Dashboard IS RoundTeam's product.  It was frighteningly obvious that this would have to be what we focused all of our energy on.  A great product in simple packaging is worth a lot more than a poor product with fancy decorations. 

Most Important For Users vs Most Important For RoundTeam

Most Important For Users vs Most Important For RoundTeam

We uncovered some common themes

Dashboard Findings

1. Users expect to understand what options are actionable on dashboard page

“What am I supposed to do? There’s no direction.”

Description: Users have trouble determining what options are available.

Recommendation: Provide clear visual and textual affordance on what filters are actionable.

 

2. Users expect to understand what to do next once on dashboard page

“What do I do now?”

Description: Users have trouble determining in which order to act on the options.

Recommendations: Rearrange visual hierarchy of filters and call to action buttons that are sequential based on importance or frequency of use.

 

3. Users expect to understand what each filter option means

“What does this mean? Whose tweets are these?”

Description: Users have trouble determining what each filter option does and the expected outcome of the filter option. They expect to see some instant view of their twitter feed immediately after they sign in.

Recommendations: Clarify vocabulary and icons of the actionable options.

 

4. Users expect to understand how to use the filter options

“How do I set up the filters?”

Description: Users have trouble determining how to use each filter option. Lot of users would try to hover on the filter to see if they could get a tooltip. Tooltip would render very slowly and disappear immediately.

Sometimes, the users ended up clicking on the filter and it would take them away from the platform to Round Team’s helpdesk center.

Recommendations: Make filter set up process self-explanatory or provide quick tips instead of taking users to a separate help page.

 


APPROACH

Key Design Decisions

 

The insights from the usability tests triggered us to think about solutions to the following design questions:

  • How might we simplify the dashboard while still maintaining functionality?
  • How might we provide the user with more guidance on what their entire experience will be like?
  • How might we create a design which showcases all that RoundTeam has to offer?

PROCESS SIMPLIFICATION

We narrowed down the user quotes concerning the dashboard to four overarching ones, hi-lighting the main point of confusion. from the broke down the dashboard into three sections - User Account, Filter Card, Live Twitter Feed Section


guidance

When mapping all of the dashboard painpoints from Least to Most Important to the User (self-reported by user) and Least to Most Severe in terms of product viability, we were able to guide our prioritization of areas to tackle in our redesign.  

 

sectionalization

Screen Shot 2016-01-20 at 6.22.30 PM.png

As an additional guide we further categorized each user pain point.  We were able to construct four categories: Twitter Account, Filters, Twitter Feed, and Other.  These would be used as the organizational framework for the actual prototype.   

 

After the user testing with 6 marketers, we listed usability issues and relevant user feedback on post-its and then arranged them by related groups – Twitter Account, Filters, Twitter Feed/Preview, and Others. When doing so, we stacked similar post-its and indicated frequency of each pain point as shown below.

 


DESIGN

Task Flows

 

The flow for users was not very clear.  They weren't sure which step was required to initialize product interaction.  We simplified the second flow by making steps intuitive and familiar to the users rather than strange and complicated.  This was a major barrier of adoption in the original design.

I was responsible for the Twitter Account Section interaction as well as the feedback structure throughout the dashboard. what i did for those parts. in our divide and conquer modular approach

 

Prototype Iterations

 

User Validation Prototype to final deliverable prototype

User Validation Prototype to final deliverable prototype

 

The design would contain the following components based on user testing.  

Resulting Iteration Tackle Points

  1. Twitter Account: better display of active vs inactive status

  2. Twitter Account: clarifying deactivate/pause meaning

  3. Filter section: better indication when need to save changes

  4. Filter section: clickable text for tweet items

  5. Filter section: Instruction text closer to the text input field

  6. Filter section: differentiating between tweet items and live twitter feed

  7. Live Twitter Feed: a quick summary of explaining the section

  8. Live Twitter Feed: an apply button for sort box

 

 

High Fidelity Prototypes (Select)

 

Twitter Account

Live Twitter Feed SORT

Sliding Interaction implemented by teammate  Eric Lee

Sliding Interaction implemented by teammate Eric Lee


RETROSPECTIVE

Balancing customization & simplicity

Next Step Suggestions

  • Further user testing on the dashboard after the design implementation

  • Developing a mobile web layout

  • Improving copywriting

  • Redesigning non-dashboard parts of the website

  • Simplification does not necessarily equal reduction - Process flow mapping and design and prioritization of information display can be used to make it easier for users.

 

Final Deliverables

Invision Prototype and Specs with style guidelines via zeplin.io

 

 

Our Team with the RoundTeam Founders

Our Team with the RoundTeam Founders