Web Application Design

Upsuite

Redefining the way Uplight’s customer care team handle daily customer tickets

The end-to-end design journey for Upsuite OMS (Order Management System), an internal tool to increase ease and efficiency for customer care agents.

Project Team

  • Design

    • Product Designer

    • UI Product Designer

  • Product

    • 2 Product Managers

  • Engineering

    • 2 Front-end engineers

    • 1 Back-end engineer

  • Customer Care

    • Customer Care Manager

Status

Completed/Successfully launched

Designs were reviewed with stakeholders and MVP was launched in November 2020, followed by the implementation of post-MVP features throughout 2021 and 2022.

My Role & Contribution

Lead Designer

Research, Ideating, Hi-Fidelity Designs, Usability Testing, & QA

Timeline

3 months for MPV launch (November 2020)

Ongoing feature development and user testing into Q2 of 2022

The Overview

Uplight offers a number of products to 80+ energy utility providers serving millions of homes and businesses.

Their white-label utility Marketplace is an e-commerce platform where customers can shop for energy-efficient products with bundled product rebates and program enrollments.

A dedicated customer care team is available to assist customers with their Marketplace orders.

The Challenge

Since the inception of Uplight’s Marketplace solution, the customer care team has been using a multitude of tools to resolve order requests, which is error-prone and inefficient, resulting in an average resolution time of 20-30 minutes per customer ticket. Additionally, during the Black Friday and Cyber Monday season, the number of Marketplace customer order requests nearly triples.

“How might we standardize and streamline the resolution process for customer tickets, ensuring efficiency for agents and reducing operational costs?”

The Approach

 

Research

Design conducted user interview with Uplight’s Customer Care Team to observe their customer ticket handling workflows. Based on the observations, a service blueprint map was created to showcase the agents’ journey from ticket request to resolution across various workflows.

 

User Interviews

Design interviewed Uplight customer care stakeholders over two 1-hour Zoom calls.

  • Goal: Understand how customer care agents work, what’s confusing, and what’s helpful.

During these interviews, we learned there are two primary customer care agent groups:

 

Service Blueprint Map

We took our learnings from the agent interviews into a service blueprint map documenting an agent’s journey from ticket request to resolution across each type of workflow they were regularly performing (9 workflows), and we could see that all workflows are consistently escalated through messaging and CRM tools due to confusing data and usability errors.

Design Opportunities

Research revealed many design opportunities:

  • Reducing the overall number of escalations through the use of hierarchy, improved interactions, and access to critical data.

  • Surfacing order status information earlier and more often throughout the experience

  • Elevating critical information through design tactics like size, color, font, iconography, etc.

  • Closely couple connected interactions

  • Redesign task workflows to eliminate unnecessary manual deletion and record duplication

Build Shared Alignment

The team collaborated and landed on a phased feature/workflow approach. This would:

  1. Help us prioritize solving for customer care tasks that happen the most frequently and ultimately would have the most impact for peak and non-peak seasons (i.e. will drive the most value for Black Friday/Cyber Monday).

  2. Allow capacity for user testing and quick iterating for any major pain points and/or technical bugs before production launch.

 

Design

Now that we had an aligned vision of which workflows we were moving forward with for MVP, it was time to dive into wireframes and then quickly into the visual design.

Wireframes

Wireframes were developed to facilitate order search functionality across the home screen, search results, and sales order details. They also encompassed essential elements on the 'Sales Order' page, including features enabling agents to cancel orders, edit customer information, and replace items within an order.

High-Fidelity/Visual Design

We leveraged Uplight’s Design System and internal tools to translate wireframes into a vibrant user experience. Through meticulous color branding, consistent coding, and strategic highlighting of key information, we ensured coherence across the interface. Our design prioritized intuitive navigation for agents while infusing elements of delight through visual treatments. By emphasizing reusable components within the Design System, we aimed to enhance recognition and accessibility for agents.

Validation

Once the visual design was finalized, it was time to evaluate the tool's performance with customer care agents.

With assistance from Uplight’s Customer Care Manager, the Design team recruited and scheduled moderated usability tests with five customer care agents — two internal and three external.

During 45-minute sessions, agents were asked to complete a series of tasks to provide feedback and impressions.

At a high level, agents logged into UpSuite, searched for and selected an order, viewed order details, replaced items, updated customer information, and canceled orders.

 

💡Insight

Usability tests revealed that agents found UpSuite easier to use than other tools. However, most struggled to locate the Order Status, suggesting it needs better visibility. Additionally:

  • Few agents used the bulk select feature, indicating it may be unnecessary.

  • One agent noted the 'Replace' modal lacks a field for specifying replacement reasons, crucial for back-end reporting.

Refinement/Improvements

Conclusion

The goal of Upsuite, since the project kick-off meeting, was to create an internally housed web application that would allow internal/external customer care teams to handle order requests consistently and efficiently. In doing so, we should be able to see reduced operational costs and improved CSAT.

Within a three-month timeframe, Upsuite was designed, built, and launched, encompassing the MVP workflow/features of Login, Search, Order View/Details, and actions where agents could replace order items, cancel an order, and/or update customer information. Post-Black Friday/Cyber Monday Upsuite analytics showed the average ticket handling time reduced by 50% (10+ minutes) .

The successful launch of Upsuite’s phase 1 features validated the need for design and engineering capacity in the upcoming quarter to design, build, and launch phase 2 features.

Since the launch of Upsuite in November of 2020, and its expanded feature offering, Uplight’s internal and external customer care agents have experienced a 23% reduction in overall customer support time across all features, equating to an annual savings of over $600k for Uplight.

Beyond the MVP

Uplight leadership was thrilled with the positive feedback and impact of Upsuite’s MVP launch, leading the company to agree to continue expanding the web application with quarterly capacity.

The Design, Product, and Engineering teams worked collaboratively to prioritize features in phases, focusing on the highest impact for both the agents and the business’s bottom line.

Taking a similar approach to the MVP, Design thoroughly researched, designed, validated (user tested), and refined the workflows for Refund, Price Match, Flagged Orders, Order History, Chargeback, and Email Proofs.

By the end of 2022, all planned features had been launched. As a result, Uplight's customer care team experienced increased efficiency in managing orders, and internal customer care agents no longer had to handle escalated issues from external Blackhawk agents. Blackhawk agents were fully equipped to handle customer tickets related to order status checks, item replacements, and order cancellations. The addition of History Record and Email Proof features enabled Blackhawk agents to provide customers with real-time updates and more detailed information.