HOS_headerImage

247%
Increase in Daily Active Users

37%
Reduction in First Response Time

21%
Reduction in Avg. Response Time

6.3/7
Avg. SEQ Score for Usability

Help on Social

Google
2016 - 2017

Role

Design lead, working in a small, cross-funtional team. Owner of research, UX and UI.

Introduction

Help on Social is a web app that allows Google’s online community members, called Product Experts, to assist millions of Google users from across the globe who ask for help through Twitter.

Help on Social allows Product Experts to focus on responding to questions by equipping them with specialist features that promote efficiency and accuracy of responses.

Introduction

Help on Social is a web app that allows Google’s online community members, called Product Experts, assist millions of Google users from across the globe for help through Twitter.

Help on Social allows Product Experts to focus on responding to questions by equipping them with specialist features that promote efficiency and accuracy of responses.

UI_all

Project Brief

Leverage design thinking practices to drive a refactor of the Help on Social desktop app. Enhance community and performance capabilities and make the app more appealing to a wider range of Product Experts.

helpOnSocial_closeup

Discovery

With limited system data available, research focused primarily on engaging with Google Product Experts—a large, diverse and accessible user group who were enthusiastic to help.

Research Goals

  • Measure users’ perception of ease of use of the app
  • Measure application usage
  • Understand what users like and find frustrating 
  • List improvements & new features
  • Get to know Product Experts

Research Methods

  • Data Analysis
  • User Interviews
  • Heuristic Evaluation
  • Concept Testing

System Data

Just 5% of Product Experts were using Help on Social

Only 8% of incoming conversations received responses

User Insight

The original Help on Social web app was rated 4.7/7 for usabilty

Navigating between conversations was a major problem for users

User Quote

“Help on Social is my life line. I have anxiety and don’t leave the house. HoS means that I get to interact with other PEs and Googlers who need help”

Insights

Insights gained from interviews showed that Product Experts are an extremely diverse group. However, they share similar motivations and behaviours—Nobody interviewed saw themselves as a Twitter user and the majority were motivated by a feeling of satisfaction.

Navigation and irrelevant posts were seen as big problems within HoS, also Product Experts explained that many questions repeatedly required similar or the same responses. Research had validated investment into the project.

Definition

Together, the team created goals, success metrics, benchmarks and user stories.

Defining Success

  • Increase user acquisition & retention
  • Increase replies per user
  • Reduce response times
  • Improve usability scores

Measuring Success

  • Active users over time (DAU/WAU/MAU)
  • Time spent in app per active user over time
  • Replies made in app per active user over time
  • First response time (FRT)
  • Average response time (ART)
  • Actions made in app per active user over time
  • Single Ease Question (SEQ)
protoPersona
protoPersona_2
expertEngagement

Proto Personas

Data inspired the creation of three HoS user personas

  • Product Expert & Mentor
  • Product Expert
  • Rising Star

Validated Feature List

Product Experts validated suggested improvements

  • Improved Navigation, Filtering & Sorting
  • Community Clipboard
  • Rich Media Attachments
  • Gamification / Leaderboard
  • Better Noise Reduction
  • Watching & Pinning
  • PWA / Responsive Optimisation

Backlog

Other features were deprioritised

  • Community Clippings
  • Gamification Phase 2

Early Concept Testing

Core short hand user flows were rapidly developed followed by wireframes and hi-fi mock ups of two concepts. Concepts were tested with Product Experts. There was a clear winner, version 2 was preferred by 82% of participants.

concept1
concept2

Development

Deliverables from the definition stage formed a solid foundation to work from when it came to developing ideas. Help on Social has a straightforward use case which meant focus was given to designing for simplicity and efficiency.

Wireframes & User flows

User flows were drawn in a short hand format, these were quick to deliver and easy to amend. At the same time, wireframes were created incorporating the features validated earlier in the project.

wireframes_flows

User Testing

There were two rounds of testing. First, unmoderated using the Validately platform and second, moderated sessions at Google headquarters located around the globe. The team were privelidged to attend Product Expert Summits in Dublin, Singapore and San Francisco.

Users were asked to complete four tasks using a linear prototype while thinking out loud—Reply to a Message, Create a Channel, Edit a Channel and View Notification.

User Testing Findings

Generally results were positive but there we several areas to improve upon.

What did users like?

  • Simple and clean User Interface
  • Navigation
  • Layout
  • Ease of browsing the different questions
  • Use of screen real estate
  • Ability to create channels

What needed work?

  • Language selection when in category widget
  • Selected category feedback in category widget
  • Lack of auto save in dialogues

In all, I loved how it's easy to move around and get things done. The UI is great...

Simple, much better use of screen real estate. It’s 100 times better than the current version

It’s a little bit confusing, that if I add the second category I saw the other category selected

Observations

Hesitations, Deviations and Task Completion were recorded whilst participlants completed tasks. These results reinforced user feedback, suggesting that there was a need to improve channel creation.

GoogleBGImage
userTesting

Delivery

Particular focus was paid to ensuring the app was easily readable. Horizontal and vertical grids not only helped with composition but also with vertical rhythm, ensuring content was scannable and digestible. Typography and UI passed W3C AA web accessibility standards for color contrast at least.

uiKit
verticalRhythmn