Web App Design Tool

Table of Contents

• Context
• The final product
• Outcomes
• The how we got to this result

Design Solution

The result was a UI that seamlessly matched the visual style of the other products, despite being built with different technologies. Achieving a modern, refined look and ensuring smooth user flows for key actions—such as space creation and object uploads—were top priorities. The outcome exceeded the 15% increase initial goal, with unique space creation increasing by 19% and unique users uploading files by 22%. The inclusion of additional supported formats, such as MP3, MP4, and WAV, also contributed to the rise in unique users uploading files.

Key Metrics

After the release, the Dashboard became usable on both desktop and mobile devices. The number of imported assets increased by 30%, and there was a 10% weekly increase in retention for mobile users. On the other hand, as a team, we experienced increased efficiency. The design system, in alignment with the code, enabled us to work faster by utilizing existing components rather than creating them from scratch every time a new feature needed implementation

Design Process

The strategy began with a comprehensive analysis of existing pain points and broken user flows, resulting in a complete restructuring of the information architecture and navigation. This process led to the creation of a new design system featuring consistent navigation patterns, layouts, and a unified UI kit. Key functionalities such as space creation, project setup, and file management were closely monitored to ensure engagement remained stable or improved. The objective was to achieve a 15% increase in unique space creation and unique file uploads while maintaining steady usage across other core features—ultimately leading to more users successfully completing key tasks. The results exceeded the initial goal, with unique space creation rising by 19% and unique users uploading files increasing by 22%. The approach involved a full inventory of existing pages, followed by the development of a refined information architecture. A heuristic evaluation was conducted in collaboration with the team to identify and prioritize usability issues. On the visual side, the project included a complete overhaul of all UI components, resulting in a newly developed design system aligned with the XR design framework. To ensure governance and consistency, an internal website was implemented as the single source of truth—listing validated components ready for use and serving as a bridge between design and development. After establishing the design system, all new screens were designed and validated through user testing, particularly focusing on the file upload experience. In parallel, a fully responsive mobile version of the app was designed and developed. The process concluded with a detailed developer handoff covering all user flows, interactions, and UI specifications.

Product before the redesign

Thank you for reading! 💙