Elisabeth Pefanis

UX Designer

Cloud Elements

Company Overview

Cloud Elements is a cloud API integration platform that enables developers to publish, integrate, aggregate, and manage all of their APIs through a unified platform.

The company is growing rapidly, creating the need for a centralized system where everyone that touches the client can access information and data to make informed and strategic business decisions.

Design Challenge

Cloud Elements Client Success Team utilizes 8 different cloud applications to access client information and data. On average 5-10 hrs. a week are spent on tracking down customer data. This leads to a decrease in productivity and time away from customers, which translates into loss of revenue.

Proposed Solution

Two other UX Designers and I designed a dashboard that centralizes client information. We designed an easy to use interface that encompasses all of Customer Success' needs in an organized fashion.

Design Process

Role: UX Designer (Generalist)
Skills Applied: Research, heuristic analysis, user interviews, wireframing, prototyping, usability tests, and visual design
Scope: 3 week internship

Discovery

Process

We interviewed Customer Success Managers, Technical Account Managers, Delivery Managers, and people from the Product Team. Each group has contact with the client at different stages of their onboarding process.

Key Takeaways

Multiple tools are used to aggregate data and information
Each department has a different system they use
No easy tracking capabilities

Journey Map

The interviews helped us piece together the process that is undergone when a new client is signed on. We found there were dips in efficiency caused by non-automated systems, use of multiple tools between departments, and inability to track a client once they've been onboarded.

We found multiple opportunities to improve data collection and aggregation and present it in a digestible format

Dashboard Features

After interviewing the various teams it became clear that they needed a dashboard focusing on metrics, information, and other miscellaneous features --

Based on data collected during interviews, we determined these features would add the most value in the first iteration

Goals

The goals of the dashboard include -

Saving the internal users time, so they can work more strategically
Improve customer satisfaction
Increase efficiency
Use easily accessible data for business opportunities
Enhance mapping to improve accuracy

Key Performance Metrics

Decrease time spent aggregating client data by 10% within the first month of launch
Increase time spent with client by 10% within the first month of launch

Wireframes & Prototyping

Homepage

The 5 boxes at the top represent metrics that are important to the internal user. "New Users" and "New Clients" set processes in motion, so having that information accessible upfront is helpful for the user.

The graph is a representational idea of customer data. We used this as a placeholder so we could solicit feedback during our usability interviews.

The table at the bottom represents individual account information that can be sorted or filtered.

Feedback

In the initial round of user feedback we learned which metrics were helpful and considered most important by each team.

Iteration

To address this feedback in the next draft we made the boxes and graph customizable. The user can decide what information is most important to them.

Customer Accounts Page

We designed a tab navigation to allow the user the ability to quickly switch among the different categories.

The graph represents the number of instances broken down by element within a particular time frame. The line is the agreed upon usage for that time frame.

The card to the right of the graph shows helpful information that highlights useful stats for the Client Success Team.

The remaining cards below provide a client summary and highlight the terms of the contract.

Feedback

The biggest piece of feedback was that although we showed instances broken down by element, there was no graph that indicated the usage of the instances. We also received feedback around reorganizing text and adding more content to the different cards.

Iteration

To address the main concern around API traffic, we added a fifth graph that represents API calls broken down by instance within a particular time frame.

Visual Design and
Usability Testing

Homepage

In the transition from wireframes to high fidelity mockups, the main changes based on feedback included adding more metric options to the top five cards, flushing out the graph, and customization.

Customizable Options

We designed a mechanism that allows the user to customize which cards are visible. We included metrics that were important to the Delivery Managers that were not previously there.

Client Accounts Page

In the first round of wireframes we started with three graphs. Upon conducting usability tests we determined we needed to add "API Calls" and "Users."

Activity Page

We designed a change log to keep track of changes made to accounts. This gives internal users insight into user changes made by the organization. This was a request after usability testing.