top of page

API Analytics

Roles: UX designer, UX researcher & UI designer

Figma file
Cover - API analytics.png
Setting the scene

Ascenda, as a loyalty SaaS provider, offers its customers a comprehensive suite of APIs that enable seamless integration with their loyalty platform. Recognising that these integration points are critical to their clients' business operations, Ascenda understood the importance of providing complete transparency regarding API performance and reliability. This commitment to accountability drove the development of the API analytics feature, giving clients valuable insights into critical metrics.

🎯 Objective

The API Analytics feature was developed with the strategic objective of empowering Ascenda's clients with comprehensive, real-time visibility into API performance metrics. By implementing this monitoring solution, Ascenda demonstrated its commitment to transparency and accountability regarding the quality and reliability of their loyalty SaaS integration points.

Wireframing

After understanding the requirements, I started on the first version of the API analytics feature.

old 1.png
old.png
Insights gathering

Following the initial design iteration, I conducted a feedback session with both the product and technology teams, yielding valuable insights for refinement:

1. Percentage over numeric values

The development team expressed a preference for percentage values in the method distribution and response code distribution graphs, enhancing their ability to quickly assess proportional data.

 

2. Over-reliance on bar graph lengths

Stakeholders noted difficulty in comparing values within the API service breakdown graph without explicit numeric indicators, highlighting a need for increased data clarity.

3. Disproportionate size-to-value ratio

A potential misalignment in the size-to-value ratio of the response code distribution graph was identified. The significantly higher frequency of 200 status codes compared to 400 and 500 errors could lead to disproportionate visual representation when numeric values are embedded within smaller bar segments.

 

Additionally, a subsequent contrast test revealed that the initial colour palette did not meet accessibility standards for visually impaired users. This finding underscored the necessity for a more inclusive design approach to ensure equal access to critical data for all users.

✨ Final solution

Therefore with the insights we gathered, we came up with the current launched product.

Section 2.png
Section 3.png
Recommended projects
Portfolio thumbnails2.png
Billing
Portfolio thumbnails3.png
Content Management System
Portfolio thumbnails4.png
Recommendations
bottom of page