ADMIN MANAGEMENT UX & UI

UI+UX DESIGN | START TO END IMPLEMENTATION 

**created while employed at Showbie | VP Product acted as creative director**

While working as a designer and product manager at Showbie I designed and managed the implementation of a brand new admin management web app. The general styling was created by the VP Product as well as one core user journey; from there I created the UI and UX for all supporting flows. 

*unfortunately I no longer have access to working files and these images have
been pulled from a spec document, please excuse the content :( *

 

THE PROBLEM

With Showbie's user base growing ever larger and a support team of 1, it was clear that we needed to build a tool to allow school admins to manage their own accounts and licenses. 

The key problems that a new admin tool needed to address:

  • schools with unused licenses
  • no ability for admins to self-serve or know how many users they had 
  • bulk invites and user management was done by Showbie staff, creating a bottleneck internally and for schools.

THE SOLUTION

The architecture was created to support the four main user actions within the admin tool:

  • Search - contains all search and filtering options
  • Invite - allows for single and batch invites 
  • Manage - can verify, upgrade, downgrade and remove multiple or individual teachers here.
  • Upgrade - contains running license information. Admins can perform bulk and individual upgrades from this page and purchase more licenses. This page is active on sign in.

Bulk actions were an important part of the UX in this tool. The nature of the Showbie app involves some front loaded set up for school admins and often happened with groups of teachers at a time. Bulk actions were designed specifically for this group of users.

The UX is purposeful in delivering as much information in as timely a way as possible. Contextual menus and buttons allow users to perform actions directly within the user listing allowing for the most efficient management. 


 

USERS AND SEARCH

Within each user was several edge case events. We needed to account for users who paid for their own license as well as licenses that needed to come from specific pools. We wanted to create a robust search feature that allowed the admin user to quickly locate the teachers they're looking for at time within a list of 1000s.

Search filtering options included:

  • search field (name + email)
  • status (verified, unverified, invited)
  • school (all + individual schools within the district) **district only field
  • license (basic, pro, lapsed, Solo pro). 

    Running meta information next to “My Teachers” changes to display the search information (in sentence form) of the filters applied by the user.

 

INVITES

Using the invite page, admins can send single - batch invites. The modifier bar is replaced with a UI showing a running tally of invite information as well as bulk actions to resend and cancel current invites while the context menu within the user listing allows for individual resending or cancelling.The same UI is then used for the input field for inviting a single teacher. This flow is full of rich feedback and contextual messaging to try to eliminate any confusion during the licensing process.

One of the most anticipated features of the admin tool was the ability to send out batch invites to 100s or even 1000s of teachers at a time. The batch invite flow allows admins to get in-context feedback as well as the ability to edit or remove invites before sending. The batch invite button keeps a running tally of the number of invites that are to be sent. This modal is full of information and saved hours and hours of time for admins. The next feature after launch was to allow .csv uploads instead of just rich text emails.


MANAGE

The bulk editing continued with the Manage page allowing admins to make bulk edits to user status and licensing. The action buttons are contextual: as users are selected, all eligible actions will become active allowing for quick edits without user confusion. As with all the other pages, the context menu within the user listing allows for individual actions as well.

The system was built to be as intelligent and communicative as possible, ensuring users knew at all times how their actions affected their account.

 

UPGRADE

Slightly different from the Manage page, the Upgrade page displays all relevant licensing information within the modifier bar ensuring admins always have a clear understanding of their licenses. It also allows a direct link to their assigned sales rep which can offer a pre-populated license request email.

When upgrading more teachers than available licenses, the same overage modal as seen on the Manage page will show here. Licensing was a point of confusion at Showbie so ensuring that we were overly communicative with the users was essential on these pages.

IMPLEMENTATION & LEARNING

As a dual product designer and product manager at this time at Showbie, I not only designed the UX but also led a team of 3 developers through the implementation and launch of this new tool. Because this was brand new, we knew we wanted to have it thoroughly tested not only internally but also with real users. This tool was originally launched as a beta so we could learn from our users and improve.

The launch of this web app drastically reduced the number of unused licenses within school and districts. Through beta testing it became clear that some admins preferred no automation, so there was a back-end switch built in to turn automated license assignments off. Included with this new feature was time and event based email notifications. These were all created and qa'd by myself.

Overall, I learned a lot during this project. I had deep collaboration with the development team the full way through to ensure we were building solutions that made sense both from a UX perspective but also a technical one as well, because of this we were able to build a very smart and robust licensing system that solved the problems it set out to. We set up robust monitoring metrics within Amplitude that allowed us to monitor usage and ensure we were offering the right support to our users at the right time.

Self awareness is key so I do feel that the UI was outdated before the project even began. If I were to do this again I would definitely like to see an updated UI that feels less clunky. The four page approach feels somewhat redundant between the Manage and Upgrade  pages and I feel a more elegant solution can be found. That being said, this was quite a complex UX and technical project and it was a great learning experience to be involved in every step of the project from initial designs to launch and beyond.

 

Using Format