RoundTeam Web App ReVAMP
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.
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.
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.
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.
"what am i supposed to do?"
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.
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:
Landing page issues
Dashboard setup issues
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.
We uncovered some common themes
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.
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?
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
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.
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.
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
The design would contain the following components based on user testing.
Resulting Iteration Tackle Points
Twitter Account: better display of active vs inactive status
Twitter Account: clarifying deactivate/pause meaning
Filter section: better indication when need to save changes
Filter section: clickable text for tweet items
Filter section: Instruction text closer to the text input field
Filter section: differentiating between tweet items and live twitter feed
Live Twitter Feed: a quick summary of explaining the section
Live Twitter Feed: an apply button for sort box
High Fidelity Prototypes (Select)
Balancing customization & simplicity
Next Step Suggestions
Further user testing on the dashboard after the design implementation
Developing a mobile web layout
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.
Invision Prototype and Specs with style guidelines via zeplin.io