EM:RAP Admin, Groups Feature

EM:RAP delivers world-class medical education to emergency medicine professionals worldwide. They offer a variety of platforms, including a website and app for streaming audio and video content, along with a dedicated platform for accessing medical and drug reference chapters.

The EM:RAP support team utilizes a web-based Admin platform to manage and publish content across these platforms. The original system, built in PHP, had become outdated and increasingly difficult to maintain. To address these challenges, we embarked on developing a new, modern Admin tool built with React and the Material UI design framework. This solution not only simplifies support but also allows for seamless expansion as EM:RAP introduces new advanced features.

My role: Lead product designer for the React-based Admin product, responsible for conducting client interviews, creating wireframes, high-fidelity mockups, prototypes, and overseeing user testing throughout development.

Team: Several developers, a product owner and a project manager.

Timeline: Design - 2 months

Goal

The "Customer Groups" feature enabled groups of medical practitioners to access discounted subscriptions based on group size. The EM:RAP support team managed the creation, updates, and renewals of these groups through the Admin platform. The project aimed to migrate this feature to the new React Admin system, modernizing and enhancing it for greater efficiency and automation.

Initial client interviews

We conducted interviews with the EM:RAP support team to gain a comprehensive understanding of their workflow, both within and outside the Admin system. During these discussions, we uncovered several challenges, including numerous bugs in the current system, such as incorrect calculations that forced the support team to rely on manual workarounds. In particular, the group creation and renewal processes were largely manual and occurred outside the Admin tool. This led to a general lack of trust in the platform, making the team hesitant to adopt a more automated solution, as they preferred to manually verify each step.

Pain points

The pain points we identified during the interviews were:

  • Using spreadsheets to manage calculations, creating invoices and receipts, managing upcoming renewals and assigning groups to support members
  • Manually searching for accounts to verify existing subscriptions and upgrading members with different subscription types
  • Lacking visibility into group members who haven't activated their subscriptions
  • A confusing checkout process for new members, showing $0 orders during activation
  • Using a separate sales tax calculator for calculating individual member taxes
  • Processing payments through an external system

Insights

  • The support team is wary of automation due to a lack of confidence in the current platform
  • They value maintaining personal touchpoints with customers, often via email
  • They would prefer to eliminate the use of spreadsheets by integrating these tasks into the Admin system

User flow

After analyzing the support team’s existing processes and pain points, I mapped out a new, streamlined user flow, detailing customer actions, support team responsibilities, and system processes. The proposed flow would:

  • Automate many of the manual tasks the support team currently handles outside the Admin
  • Maintain personal touchpoints with customers at key stages
  • Reduce the number of inactive group subscriptions
  • Enable group administrators to manage group creation and renewals independently
  • Facilitate credit card payments within the Admin system
User flow diagram outlining the entire groups process
User flow diagram outlining the entire groups process

The support team’s feedback on the new flow was overwhelmingly positive, as the enhanced automation would save them significant time. Their only feedback involved removing automation at certain steps to allow them to check information and also add in more personal touchpoints. We discussed potentially adding back in this automation in a phase two of the project once EM:RAP were used to using it and once they had trust in it.

Wireframes

I designed wireframes focusing on key improvements to streamline group management for EM:RAP's support team. The main screens were:

  • New group/renewal form: The existing manual group creation process was replaced with an external-facing form, allowing group admins to manage member details, billing, and renewals without the involvement of the support team. After discussion with the development team on implementation and taking into consideration the best user experience we decided this form would be integrated into the subscriber-facing website.
  • Main group management screen: The new interface allows the support team to not only search but also manage new group submissions and renewals, track statuses, and filter for inactive or soon-to-expire groups, addressing inactive subscription issues.
  • Review step: Due to the support team's lack of trust in the system they requested a manual review step to verify group details before finalization. To mitigate data conflicts (e.g., duplicate accounts), an automated check was introduced to flag any conflicts. They also wanted to have visibility into any account changes that used to be manual and were now automated.
  • Payment step: Tax calculations and invoicing, previously done manually, were automated based on group addresses and tax-exempt status. Invoices are now auto-generated, and credit card payments can be processed directly through the Admin system.
  • View/edit active group: This step allowed the support team to manage updating group details, add admin notes, manage and resend invitations that hadn't been activated, and remove and replace subscribers during an active subscription.
Initial mid-fidelity wireframes
Initial mid-fidelity wireframes

During this phase, we also collaborated with the internal Checkout team, who were revising the checkout flow. Previously, new group members activated their accounts by going through the checkout process, which displayed a confusing $0 total since the group admin had already paid for their subscription. I worked closely with the Checkout team to ensure group account activations were factored into the new flow. The updated solution eliminated the need for a checkout entirely, replacing it with a simple account activation step. Group members would receive an email prompting them to either sign in to an existing account or provide a few additional details to activate a new one, creating a much more straightforward experience.

Another challenge I had to consider was that not all features had been transitioned to the new Admin. Certain functionalities related to the groups process, such as customer accounts and orders, still linked back to the old Admin. I needed to ensure that updates to the new groups process wouldn’t interfere with managing these areas in the old system. Additionally, I designed temporary workarounds to display order information on the group page, ensuring continuity until we could revamp the Orders feature in the new Admin.

High-fidelity designs

Once the client approved the structure and flow of the wireframes, I transitioned to high-fidelity designs, utilizing the Material UI design framework.

Initial high-fidelity designs of the main screens. Note: Not all components and states designed are included in this image.
Initial high-fidelity designs of the main screens. Note: Not all components and states designed are included in this image.

Throughout this phase, we held weekly client meetings to present design updates and gather feedback. Several key issues emerged during this stage:

Managing mid-subscription additions: It became clear that EM:RAP frequently added new members in the middle of a subscription, requiring an additional payment from the group. They wanted to manage this entirely themselves through the Admin. To address this, I added a section on the main manage groups page to manage these mid-subscription additions. The process mirrored the renewal process, where a form would be completed and a new invoice generated for the group’s payment.

Handling multiple additions and renewals: We discovered EM:RAP often dealt with overlapping additions and renewals, especially when payments for previous additions were delayed (e.g., when awaiting a cheque). This complexity required a pivot as I'd designed the Groups to have a single status and only one outstanding payment at a time. I revised the design to support multiple simultaneous statuses for a group, introducing two types of statuses: the group’s overall status (active, inactive, or expiring soon) and an addition/renewal status (in progress, pending review, or pending payment). This solution simplified the interface while allowing effective management of these concurrent processes.

Original group status diagram
Original group status diagram
Revised group status diagram
Revised group status diagram

Additional improvements:

  • EM:RAP wanted group admins to indicate tax-exempt status and upload certificates as proof during the group creation process. We updated the external form to include this feature, while still allowing EM:RAP to review and adjust it if necessary.
  • We introduced individual receipts alongside group receipts, as group admins often collected payments from individual members. These receipts were auto-generated by the Admin after payment was received.
  • For groups that preferred not to use the external form, I designed internal Admin forms to handle renewals and new group submissions directly within the Admin system.
  • We added a field to assign each group to a specific support team member, ensuring a consistent point of contact for groups during renewals and additions. However, the system also allows for reassignment when necessary, providing flexibility in managing workload distribution across the team.
  • We introduced a field to modify the start date of a group’s subscription. EM:RAP preferred aligning all subscriptions to begin on the first of the month to streamline group renewals. By default, the start date would automatically be set based on when the new group or renewal form was submitted. However, since payment processing can sometimes take weeks or be paid sooner than expected, EM:RAP requested the flexibility to adjust the start date themselves.

These enhancements improved usability, streamlined processes, and addressed key client needs, ensuring that the new Admin system would better support EM:RAP's operations.

Development

Once the design phase was finalized, I documented all functionalities in Figma and conducted a walkthrough with the development team to facilitate a smooth transition. In the development discovery phase, the team analyzed the existing codebase and database structure, surfacing several complex areas that could extend timelines significantly. To balance technical constraints with a high-quality user experience, we worked together to adjust the designs, focusing on key areas where we pivoted our approach:

Separating alerts: In the Review step, displaying alerts for duplicated accounts within the subscribers section created complexity. To reduce complexity, we created a dedicated section and table for alerts. Through this redesign I also revised the design of an alert to clarify which information came from the external form versus existing accounts in the system.

Revised design of the alerts on the review step.
Revised design of the alerts on the review step.

Integrating existing members in renewals: Rather than placing existing members in a separate renewal section, we incorporated them into the current subscriber section, allowing them to be removed in the scenario they wouldn't be renewing. We also visually indicated non-renewing members by disabling them, while still allowing them to be renewed again.

Revised designs for existing members during a renewal or addition.
Revised designs for existing members during a renewal or addition.

Creating a multi-step group form and removing autosave: To improve usability, we separated the external form into a multi-step process, especially helpful for groups with many members. Autosave also proved problematic due to validation requirements on incomplete forms, which could lead to constant error messages and a frustrating experience. Instead, we opted to validate and save forms upon clicking “Continue" to next step. Additionally, we introduced a confirmation modal to prevent users from navigating away with unsaved changes.

Revised design for the multi-step external group form.
Revised design for the multi-step external group form.

Handling pending administrator status: Managing pending administrators for renewals until payment was received added significant complexity. Instead, we adjusted the approach to add administrators to the group immediately, marking them as “pending review” until fully verified. This allowed us to simplify the data flow while maintaining accuracy in user roles.

Simplifying subscriber/administrator addition modal: To streamline the user flow, we combined the fields for adding an existing account and creating a new one into a single modal with tabbed sections. If an existing email was entered in the “Create New Account” tab, the system would recognize it and automatically switch to add the existing account.

Revised design of the modal to add a new subscriber/administrator.
Revised design of the modal to add a new subscriber/administrator.

Restricting subscriber removals during additions: Allowing users to remove subscribers during the addition process introduced numerous complex scenarios. By restricting removal actions, we kept the form’s purpose clear and minimized unintended consequences.