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.

Cloud Elements

Design Process

  • Role: UX Designer (Generalist)

  • Skills Applied: Research, heuristic analysis, user interviews, wireframing, prototyping, usability tests, and visual design

  • Scope: 3 week internship



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.

Cloud Elements

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
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
Based on data collected during interviews, we determined these features would add the most value in the first iteration


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
Cloud Elements


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.


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


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. 

Cloud Elements

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.


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.


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
Cloud Elements


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.

Cloud Elements

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.

Cloud Elements

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."

Cloud Elements

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.

Next Steps
  • Create a client facing portal

  • Add more features for Delivery Managers

  • Track use cases

  • Continue to iterate on mapping

  • Create what exportable and report data would look like once exported/downloaded

  • Ensure key metrics have been met

Get in Touch

Contact me below so I can help increase your company's productivity