Apteligent UI Redesign

The platform needed to improve accessibility, usability and flexibility across screen sizes, so we redesigned the UI.

Background

Apteligent (previously known as Crittercism) was a SaaS tool for monitoring mobile application performance and analytics. It provided developers and product owners with reports on crashes, network performance and custom user-defined application flows. 

My role was to create a new design system, and contribute to product development. To better understand our users, I introduced UX research to the organization (user interviews, usability testing). 

Problem

Usability 
Apteligent’s old interface suffered from a number of usability issues that created an unsatisfactory end-user experience. Some of the areas we identified were around inconsistency of color use, language and iconography as well as navigation, error messages and site responsiveness.

Accessibility
The app suffered from low contrast, lack of keyboard accessibility and issues around color use. I introduced minimum color ratio of 3.5:1 or higher and establishing minimum text size to be 13px.

Responsiveness to device size
One of the biggest pain points of the UI was the lack of responsiveness—we wanted to start supporting wider range of screen sizes (760px wide and up). Due to the nature of the product and the audience, we decided that in order to support mobile displays we would need to invest in a mobile app.

Process

Research 
I kicked the project off by gaining an understanding of our audience via user and stakeholder interviews. I paired up with the engineering lead to better understand the requirements and constrains. Additionally, I enrolled in an online dashboard design course, researched our competitors, and studied well-established design systems like Material Design in order to ground my work in common practices and better plan the components that needed to be created.

Visual Design
I developed new visual language in collaboration with engineers and design lead. I started by introducing a sample dashboard, and gathered feedback. Based on the comments, I iterated on the visual direction. I focused on developing an accessible color palette and cross platform interactivity. I worked on developing a design library of reusable components and establishing design patterns.

Challenges

Lack of documented user personas
In order to build appropriate solutions, I needed to invest time to understand the audience. Lack of persona documentation meant that I had to sift through all the available information and research the audience in order to build common understanding across teams. Looking back, I would have liked to spend more time interviewing and observing users to further develop our primary (and later secondary) persona.

Lessons

Collaborate early and often
By pairing with engineering early I gained a better understanding of a front end development best practices. As a result we were able to build more scalable system and move faster. I really enjoyed our collaboration and learnings—it was my favorite aspect of this project.

Results

After we released the new UI, we received positive feedback from the users we spoke to. With time, we saw increased engagement, especially related to new features—with an average adoption rate of 30% . The new design system enabled the development team to reduce implementation time and iterate faster.

Gif of the Release Console; the first feature built using the new style.

Before and after of the App Management