Challenge: I needed to roadmap and design a new Social Media Monitoring service for our platform. How do users expect to engage with such a service, how is the data configured by default to impact the UI, and what should dev build for the best experience?
Method: Conduct user surveys; set up reviews with Product and Data teams to understand API calls and return data; document the flow of adding Networks for monitoring, create and test prototypes based on UI best practices.
Impact: A responsive UI that allows users to intuitively track, link and unlink Networks for monitoring.
With three potential data vendors, the first step in building the experience for the Social Media monitoring service was to assess how the data would be rendered in our platform and how each vendor's data would impact the UI flow. This helped flesh out the initial iterations of the service and served as an important step in choosing a vendor.
This dashboard flow explored the ways in which the user could access and begin to monitor their social media networks. The flow helped frame the experience when I discussed the services with Product and development. Click the image for detailed view.
These low-fidelity comps of a Social Media linkage wizard helped to vet this potential flow with the development team.
With insufficient time for developers to code a social media linkage wizard, I had to consider different UI/UX treatments to show users and encourage them to link their social media networks for monitoring. I cast a usability survey to help gauge which design for a service page widget would best inform the user about how to get started on monitoring. Click for quick and dirty survey
Working with a UI designer, I researched toolbar representations to determine which designs would best communicate the monitoring state for each social media network. I created a study and prototype, then conducted two user studies which were administerd in the context of monitoring the social media networks of a user's children. The studies resulted in interesting UI implications:
- Users were most confused by a toolbar in which no social media networks were being monitored.
- Users had a better grasp for which networks were or were not being monitored when at least one was in the opposite state, as they were able to visually compare the networks.
- The toggle option most clearly communicated that the user would be turning something on or off (monitoring) without implying the state for that social network. The toggle was also familiar to users as a UI mechanism.
Click to view the Google forms study
Click to view the prototype
used in conjunction with the study.
The toggle mechanism proved to be the best way to satisfy the requirements for users to manage linkages for their monitored social networks:
Users can track what is and isn't being monitored.
Users can see a means for taking action for each Network.
The Monitored Networks container degrades gracefully and is intuitive in responsive mobile view.
The implementation for multiple users in one screen differs from that of the main enrolled user, as with the Child Monitoring service. A toolbar mechanism has been leveraged to host the social networks that can be monitored for each child. User testing confirmed that users were able to track which networks were or were not monitored for each child when more than one child was displayed on the screen.