Enterprise Customer Portal

An end-to-end solution to give users access to account data in real time

Background

Before having a portal this Fire & Life Safety company relied on fielding customer data requests via phone, email, and even fax. In addition to causing mass frustration for customers, this was also taxing on employees, created overhead costs, and was not a scalable solution for a growing company. In order to modernize the process, and attract new clients, the company needed to think about a digital destination for customers.

My Involvement

  • Lead UX Designer

Tools Used

  • Figma

Timeline

  • 7 Months (2021)

Problem

How might we give customers access to their data in real time and improve self-service in order to reduce frustration and reduce company overhead?

Questions I Had

  • How often do customers need to access their data?
  • How do we best serve the different types of customers – ie Regional Manager vs Facility Manager
  • How does a customer define “transparency?”

Challenges

Some of challenges faced in this project were limited timeline until MVP needed to be delivered, research done by another vendor, and key stakeholder turnover.

Our Users

Regional Manager —

I need quick access to high-level data, I want to understand the business at large.

Facilities Manager —

I need transparency into work orders to be in the know, and to hold the vendor accountable.

Process

UX Methods

  • Wireframes
  • High fidelity mockups
  • Data visualization
  • Prototype
  • User Feedback Sessions

Discovery + Definition

We inherited user research from an outside vendor, and were able to quickly define our customer profiles and their initial needs. This drove our feature sets and information was compiled into a site map to help define the design needs.

Design

Starting from the user insights, I began iterations on wireframes to help plot out features we knew customers needed. I established a design pattern that could be implemented across the portal for consistency. Designs were presented to stakeholders and users for feedback, and consistently iterated to satisfy business requirements and users’ needs.

Development

Our team of engineers started building out features. I worked cross-functionally with our UI engineers to further define and develop the portal interface and functionality, as well as the QA team to ensure the portal was functioning as intended.

Delivery

I tested the portal’s features with users via moderated user feedback sessions. I built out a clickable prototype, wrote out the script and interview questions, and partnered with an additional UX designer to help moderate so that the questions came across without any bias. All findings were synthesized and I used the insights from these sessions to help further define and validate our design decisions before delivery to the client.

Wireframes + Iteration

I started with sketches on paper to rapidly create some rough wireframes. These sketches were eventually turned into lo-fi wireframes which I used to get feedback on from our internal team as well as the client.

Sitemap

I led an effort to create a site map to help plot out and validate features and navigation architecture for the portal. Doing this allowed us to define the most important features, and create an architecture pattern we could use across the entire portal.

Solution

In the end I helped build a customer portal from end-to-end. This solution allowed our team to access and serve data from existing databases, and present that information in an easy-to-access and digestible way.

The data was visualized to allow for quick understanding for regional managers who wanted a high-level snapshot, and also gave more tactical users access to more detailed information. The portal increased self-service for customers, and significantly reduced overhead for the client.

Dashboard

I created a user-centric Dashboard that features multiple widgets. This view helps a user see important high-level insights in which they can click-through to see details.

Data Visualization

To help users see high level information quickly and in an easy-to-understand way, I created data visualization widgets that serve users the information the need to see the most. This need for high-level information was validated by research and interviews.

Modules

Every module I designed is broken out into its own page. The top features a high-level data rollup, followed by a sortable table with more detailed information. The entire can to be filtered, helping a user get the information they need.

Mobile Design

With all designs I had to make considerations for mobile-use and design mobile layouts. For some pages this meant converting tables into cards, for example. This allows users who are on-the-go to be able to access information at any job site.

Testing

I conducted several rounds of usability testing and feedback sessions using a clickable prototype. These were structured and moderated sessions in order for us to test and validate the designs and help drive the overall team towards decisions.

Impact

25

Decrease in Account Manager Workload

1

Major Accounts Won