Cover picture

Brandwatch Admin experience

How can we create a best in class admin toolset to enable admins from small companies all the way up to large enterprise customers.

What did I do?

  • Design workshops
  • User interviews
  • Persona workshops
  • Concept mapping
  • Sketches
  • Wireframes
  • Visual design exploration
  • Hi-fi prototypes
  • Developer handover
  • Contributing to design system / production code

Background

Brandwatch merged with falcon to create a suite of social listening and social media management tools, I worked across a number of smaller projects to understand and transform the administration workflows, the project ran for a number of years (with a few items still ongoing).

A few key areas I was responsible for that I will go into further details too:

  • User invitation flows & signup
  • Product access / User permissions
  • Account creation
  • Deletion of users
  • Deletion of assets
  • Unified admin interface
  • Introduction of new design system
  • Consolidation of settings
  • Brand new reporting and audit logs

I worked on all areas as the lead product designer and paired up a UX researcher when the project required.

Administration is the foundation of successful software. Flexibility and clear workflows are critical when potentially dangerous actions are just a few clicks away.

User invitation flow, signup and login

To create a suite of tools, we needed to align and offer a single user with a brand new product access flow

Users face a fragmented experience when purchasing our product suite, as they must create and manage three separate accounts and navigate through different login pages

Research

Requirement mapping with stakeholders to understand how user invitations and logins work across all touchpoints.

Accessibility testings using a panel of users to uncover a11y issues.

User interviews to uncover pain points of creating new users.

Stakeholder interviews to align on tech and security improvements.

Design process

Understanding the requirements for each product, context mapping allowed us to visualize the users flow and how the data needed to be managed.

Content mapping

Miro screenshot of context mapping session

Merging BCR / SMM was the main focus to understand as that was the key commercial drive behind this work-stream.

Using wireflows to understand the user journey and the pages the user is likely to see.

Wireflow

Figma wireflow of the new login process

The login page was a core deliverable. It was important to keep the design clean while introducing all the new flows and features. We collaborated with the marketing team to offer an optional space for banner ads to promote events and new features.

user-settings

Screenshot of the new login page.

user-settings

Screenshot of the new login page in modal form

Working together with the development team, we designed and built new features including soical login, 2FA and a full redesign of the profile management screens, both for the user and the admin.

user-settings

Mockup of the new user settings modal

I spend a lot of time mapping out the edge cases and ensuring the devs had all the information they needed to build the features.

user-settings

Figma file showing new feature for user management screens.

While working on a new login flow reseach uncovered the emails went sent to welcome users to the platform were dated and easy to miss. We worked on a full redesign and I was also responsible for the development of the new email templates.

password reset email

Figma file showing the password reset email

An often overlooked area of the admin experience is the internal tooling used by our support and customer success teams. I worked on creating new flows that allow a single user to be created with access to all products in the suite.

interncal admin area interface

Internal admin area interface

After creating a single, unified user across all our products, we identified the need for a new product dedicated to managing the entire account and all associated products.

This new Admin Center provided our admin users with a comprehensive overview of the account, ensuring that costs were managed effectively and offering a centralized location for performing top-level admin tasks.

As Brandwatch is known for its data visualization capabilities, we thought it was important to provide a visual representation of the account’s usage.

password reset email

Admin Center dashboard

During interviews we found out that admins were scared to delete users, as it was unclear what happened next, what happened to assets they own? Will this impact other users on the account.

Together with the team we introduced two new features, the first being a new user deletion screen that surfaced any assets that were going to be transwered to the admin.

The second feature was a new setting to automatically deactivate users after a set number of days of inactivity. This would make the platform easier to manage for our admin users.

password reset email

Interface showing the delete user modals

password reset email

Interface showing the settings page with user deactivation

Conclusion

Combining user models and starting the unification of our product suite was a massive undertaking that required updates to multiple products.

Several limiting factors, such as legacy code and multiple security layers, introduced complexities and led to some hits to the user experience, including strict timeout limits. This necessitated a careful rollout with upfront information to ensure users were aware of the changes and could customize the new settings in advance.

This project laid the groundwork for future improvements, but further enhancements are needed to eliminate additional friction in the user management flows which were flagged during testing.