Senior Product Designer
hero-image.jpeg

RF Admin Panel

    

    

    

 

 

 

 

 

 

 

  

     

   

 

 
 

Realeflow Admin Panel

Problem
Using round-about methods involving developers and the usage of multiple tools to manage user accounts was inefficient and time-consuming for Realeflow’s Customer Happiness team.

Solution
A robust Admin Panel that serves as a one-stop-shop to fulfill all administrative and billing tasks.

Outcome
Operating costs for the company were reduced by migrating all billing to Stripe and shortening customer support workflows.


 
 
 

My Role
Senior Design Lead

Timeframe
Jan 2020 - Jun 2020

What I Used
Sketch, Invision

Team
Tyler Snyder | Senior Front End Developer
Allen Li | Senior Software Engineer
Payal Mathur | Senior Developer
Josh Tobias | Customer Happiness Director
Rachel Sekerak | Product Manager
Austin Hale | CTO

 
 

 
 

Continue scrolling for case study.

 
 

 
The different methods/tools that were previously being used

The different methods/tools that were previously being used

 

Too Many Tools

There were 3 methods/tools that were being used to fulfill billing and administrative tasks on the Customer Happiness team:

  1. The internal admin panel which hadn’t been updated in over 6 years

  2. Zuora, a 3rd party billing platform that was getting phased out

  3. Submitting requests to the dev team

The company’s upcoming migration from Zuora to Stripe was really the catalyst in addressing the team’s inefficient workflows. Instead of simply replacing Zuora and training the team on Stripe, we wanted to keep the Customer Happiness team out of Stripe as much as possible and instead provide a singular place they could go to in order to fulfill their tasks.

 
 
One of the workflows to be addressed

One of the workflows to be addressed

 

Understanding the Pain Points

Before diving into the solution, I wanted to get a clear understanding of how the team was currently fulfilling their tasks while noting areas of opportunity. I worked closely with Josh, our Customer Happiness Director, who helped me understand the problems his team was experiencing on a day-to-day basis.

Core User Problems

• Using a 3rd party app for billing is time-consuming and requires additional training: Representatives have to get trained to use a 3rd party app (previously Zuora, now Stripe) in order to manage a user’s billing, which adds more complexity and time to fulfill billing-associated tasks.
• Developers are unnecessarily involved: In order to make administrative changes to a user’s account (like adding a product or subscription), a request often times had to be submitted to the dev team for a developer to manually change it in the backend.
• Having to switch into a user’s account: Representatives had to switch into the user’s account to manage subscriptions and cancel/suspend the account.
• Unused Admin Panel features: The old admin panel had several features that were no longer being used and were only getting in the way of the needed features.
• Gaining key insights on an account is time-consuming: In order to get an account overview while on a phone call with a user, several tabs and pages across tools had to be visited.

 
 
admin-panel-users-2.png
 

Designing with Two Users in Mind

During the user research process, we became aware of two distinct users: the experienced representative and the newer one. While both would have the same tasks to complete, the newer representative would benefit from additional guidance along the way. We wanted to provide contextual help for those who were still learning the ropes without slowing down the workflows of the more experienced team members. This essentially became a design principle we followed throughout our process.

 
 
Features from Zuora and the old Admin Panel that were needed

Features from Zuora and the old Admin Panel that were needed

 

Scoping it Out

One of the more tedious yet crucial parts of the process was sitting down with Josh and combing through every single page in Zuora and the old Admin Panel to determine what was no longer being used, and what needed to be included in the new design. We ended up with a list of features, workflows, and data sets that the new Admin Panel needed to have, ranked by priorities (P0, P1, and P2) according to the project’s timeline.

Scope

  • Account info (name on account, contact info, white labels)

  • Filterable activity feed showing emails and account updates

  • Account overview (notable products purchased, milestones achieved, length of membership, account status, last login)

  • Core plan with list of features and ability to downgrade/upgrade plan and change pricing

  • All products, subscriptions, and courses ever purchased with the ability to quickly add products (like Leadpipes Premium, our most popular tool)

  • Cancel/Suspend/Reactivate account

  • Billing (past and future payments, invoices, refunds, processing a payment, cards on file)

  • All users associated with account and ability to add/remove

Now that I had a long list of features, I was able to get started on the information architecture and figure out how I was going to organize it all.

 
 
Initial explorations that weren’t used

Initial explorations that weren’t used

 

Figuring Out the Information Architecture

Taking all of the needed features and organizing them into sections and subsections that made sense was challenging. The goal here was to make the layout as neat and concise as possible while making it intuitive for users to find the specific feature they needed.

Option A
This option resembled the layout of the old Admin Panel the most and attempted to compile everything into one view. After showing it to the team, we realized that certain sections like Activity, Products, and Subscriptions would need more space, and sections like Contact Information and Users didn’t need to be as prominent.

Option B
This option was a little better with the introduction of a top navigation as it made it easier for users to drill down to their needed feature. However, similar to the problem with Option A, we needed a layout that would dedicate more space to Products, Subscriptions, and Payment as these sections would become quite complex.

 
 
Final Admin Panel designs (click for larger view)

Final Admin Panel designs (click for larger view)

 

The New and Improved Admin Panel

Layout

After much trial and error, we landed on an information architecture and ultimately a layout that met our needs: An Admin Panel with four main sections: Dashboard, Products, Billing, and Users. We were successfully able to place all other features into one of the 4 sections.

Navigation

The previous options had a navigation that took up a lot of vertical space (especially considering the browser and Realeflow header), which pushed some of the content down below the fold. Keeping in mind that the Admin Panel would always be accessed from a desktop where there’s more screen real estate to the sides, I felt it made more sense to move the navigation to the left and reserve as much vertical space for content. Using this same idea, we were also able to add in information panels to the right when needed.

 
 
Dashboard page (click for larger view)

Dashboard page (click for larger view)

 

The Dashboard

As the first screen in the Admin Panel, the Dashboard needed to provide quick information and key insights about a user’s account (this was one of the top requested features from the Customer Happiness team). In doing so, our representatives would be empowered to provide the most relevant help to our users.

  1. Left Panel & Navigation
    As the only section that would remain fixed and visible throughout, the left panel shows the name on the account, whether the account is accessing our software via Realeflow or a white label, and notable product tags (see image below). Other important account links are provided at the bottom, with a button to switch into the user’s account if needed.

  2. Activity
    Automatic and manually entered account updates can be filtered. Account update categories were merged and organized from 6+ into 3 simple categories: General, Billing, and Email.

  3. Right Panel
    Account status, membership length, and key milestones all help to provide insights around the user and their success with the software.

Contextual Tooltips

The company tags with tooltips on hover were one way we attempted to provide contextual information for our newer representatives. White labels are companies that use our software with their own branding. When a user calls in, it’s important to know if they are using the software via Realeflow or a white label so we can redirect their call to the white label’s support team if needed.

 
 
Products Page (click for larger view)

Products Page (click for larger view)

 

Products Page

Every plan, product, and subscription associated with the account can be found on this page.

4. Products, Subscriptions, and Courses
All the important information regarding a user’s plan and the features within it is shown at the top while making it easy to upgrade/downgrade the plan. All major subscriptions, products, and credits are given their own section with full editing capabilities.
5. Quick Actions
The actions offered here dynamically change based on the account, but the most important features are the ability to quickly add LPP (one of the most popular products) and change the account status from active to suspended, on hold, or canceled.
6. Account Features
Account features and limits can be quickly edited
7. Product History
Very much a “nice-to-have” feature that gives our representatives insights into the account’s product journey

Changing Account Status

One of the top 5 requests for this project was shortening the account suspension/cancellation flow, which we were able to reduce from 5 steps to just 2. We provided clarification around the different statuses (keeping our newer representatives in mind), introduced a hold offer to improve customer retention, and included a section to capture the reasons are the status change.

 
 
Billing Page (click for larger view)

Billing Page (click for larger view)

 

Billing Page

8. Upcoming Payments
A look at all upcoming charges while showing the billing card and billing frequency (including installment payments). Ability to filter by product type and frequency.
9. Billing History
All previous charges with the ability to view invoices/receipts and export invoices in bulk.
10. Payment Methods
A new payment method view that makes it easy to see active and expired cards, now with the ability to delete expired cards.

 
 
Users Page (click for larger view)

Users Page (click for larger view)

 

Users Page

Previously, the account users and power linked users could be found in two different places. Now, they could all be viewed and managed on a single page.

11. Account Users
View who the primary and regular users on the account are, as well as their level of access.
12. Power Linked Users
Users who have been invited by someone on the account to view properties. We can see who the invitation was sent by, as well as the status of the invitation. Since this list can get pretty long, a search function was added.

 
 
 

 
 

Outcome

This was a challenging but rewarding project that became quite complex very quickly. Throughout our process, we discovered many inconsistencies in the way our products and plans were being grouped over the years. We were forced to take a step back, start from scratch, and create a new product system and organization that worked well with our past and future product plans. In the end, we were able to create a product for our team that we were very proud of. We successfully met our Stripe migration deadline, fulfilled the top 5 requests from the Customer Happiness team, and significantly reduced workflows across teams. It could have not been accomplished without the efforts of everyone involved.