On Premise Redesign
|
2024
Redis’s on-premises application was built on the Ember.js front-end legacy framework.
In mid-2021, a Scrum team was established to migrate the interface to React and modernize the system’s UI. The project evolved into a comprehensive redesign of the entire application, introducing a new information architecture and navigation structure, fundamental changes to workflows and interactions, new configuration capabilities, and improved consistency with other company applications.
Bottom-Up Design Strategy
Given the complexity of Redis On-Premises, we adopted a bottom-up design approach, starting at the feature level and gradually building a comprehensive picture of the system from its core building blocks.
This approach helped me understand the relationships between features and components, enabling more informed decisions about page hierarchy, navigation structure, and component placement.
Redesign Highlights
Solving The New Navigation Challenge
The new On-Premises interface required a second-level navigation to support deeper information hierarchies. Since this component didn't exist in other Redis products, we needed to define its structure and behavior from scratch.
I mapped all possible navigation items and actions onto a canvas at the minimum supported screen width of 1280 px to test content density and space constraints.
The exercise revealed limited space and inconsistent placement of Edit, Save, and Cancel actions across tabs. The solution was to move these actions out of the navigation and onto the main content board, ensuring consistent placement across the interface.
Card Configuration Summary
We introduced a new configuration summary that exposes each feature’s current state directly on the collapsed card.
This allows users to scan the entire page configuration at a glance, minimizing scrolling and reducing the need to open individual cards.
New Design System tokens
Design system updates + alignments with other company products