Appspector is a web application that provides a set of tools for mobile developers to remotely monitor, analyze and troubleshoot issues in realtime.
Problem
The absence of consistent components made it hard to design and develop new features that would seamlessly integrate into the existing platform.
The application presented an array of different components for executing similar actions, causing confusion among users and making it difficult for users to navigate and utilize the platform effectively. This inconsistency not only impeded the usability of the application but also complicated the development process because of back-and-forth communication between designers and devs.
My Role
I collaborated closely with the CTO to implement a comprehensive design system that seamlessly integrated with our development workflows. This involved crafting a flexible, scalable system that could evolve alongside the product, ensuring consistency across all platforms while reducing design debt and accelerating product delivery
Introduce a clear navigation and feature separation. Create a dedicated header for profile settings and help.
Introduce a new feature with session information in realtime. App performance and issues can be detected from any page without a need to go back and force
Sidebar now has a clear purpose – monitor navigation. The hide sidebar button is now obvious and clear
Reworked action panels and made them consistant across the board
Drawer is now consistent across the board
Created a design system with components, sizes and color to create a system for developers and make life of designers easier.
Outcome
By implementing the design system, we saw a good reduction in design iteration time, as we could rely on pre-built components rather than starting from scratch for each new feature.
This also led to a increase in development speed, as developers had a clear and consistent set of design guidelines and assets to work from, reducing back-and-forth communication and minimizing errors.
Moreover, the alignment between design and engineering improved overall team efficiency, decreasing product delivery timelines. The design system also increased design consistency, which significantly reduced the need for post-launch fixes and design corrections