The platform needed to improve accessibility, usability and flexibility across screen sizes, so we redesigned the UI.
Why Did We Build It? Who Did We Help?
Apteligent helped mobile developers monitor app performance and analytics. Over time the product had accumulated a lot of technical and experience debt. We had a big initiative to fix the platform and my role was to work on the UI redesign to improve the following:
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 the minimum color ratio of 3.5:1 or higher and established the 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.
Timeline
December 2015—April 2017
Team
UX Designer, UI Engineering Lead
Research
I kicked the project off by gaining an understanding of our audience via user and stakeholder interviews. I identified internal users and leveraged their knowledge and experience to quickly gain insights and feedback. In terms of technical knowledge, I paired up with the engineering lead to better understand the requirements and constraints.
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.
Old UI—Transaction page, later renamed toTrends
There were many variations of the color scheme—finding the right, harmonious and accessible palette for charts took me many ideations.
Trends page
.png)
Tables were an important part of the user interface. This is an early version of the table. We relied too heavily on the icons and our users mentioned that stacktrace needed more prominence.
.png)
The version we settled on was designed around the most important information, such as stacktrace details and clearly indicating user impact.
Initial ideations were lacking some visual hierarchy.
Later we introduced more colors & panes.
Crash detail page—stacktrace tab
Crash detail page—breadcrumbs tab
We wanted to improve onboarding and adding new apps, so we introduced in-app 'Add app flow'. Since we were trying to appeal to non-developers we added an option for KPI owners to send a message with instructions to the developers. App developers didn't need to be Apteligent users in order to set the SDK up.
Crash summary page was one of the most popular pages.
Business 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.
Crash summary and detail were one of the most used features in the app.
Lessons and Challenges
Challenges—Lack of documented 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.
Lesson—Collaborate early and often
By pairing with engineering early I gained a better understanding of the 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.