Different users, custom permissions, one cohesive product experience.
Verily 2023-24, UX Lead, Web design
Crafting a framework-driven, dynamically adaptive UI that is —
Consistent and predictable
This ensures that even though the UI adapts to different roles, the underlying look and feel remain consistent. Users can easily predict how elements will behave, regardless of their permissions.
Efficient to develop
A framework streamlines development by providing pre-built UI elements and reusable code. This reduces the need to create custom solutions for each role, saving time and resources.
Scalable and future proof
This framework can easily accommodate new features, user roles, and permissions. This allows the UI to scale gracefully without sacrificing consistency.
_gif.gif)
How the framework scales
Role-based card visibility
The system intelligently determined which cards were relevant to each user and displayed only those.
User-specific card ordering
Cards were ordered according to a priority assigned to each user role, ensuring that the most important information was always at the top.
Dynamic card height & width adjustment
Card heights and widths automatically adjusted to accommodate content, maintaining a visually balanced layout.
TL;DR
With the need to support newer company initiatives and bring diverse user groups onto the console, this console lacked the foundations to scale. The diversity of user roles demanded a versatile framework capable of delivering a consistent UX while allowing for role-specific customizations.
Business need to support role-based access control, need for a scalable, modular UI framework.
The original design of the console was limited to supporting only one user group. This restricted how quickly we could onboard new customers. Our team accepted the challenge and developed a modular console framework that incorporated role-based access control and embraced a scalable approach.
I designed a dynamic console experience that scales across 4 users and 50+ permissions.
Despite constraints like existing console elements and the high cost of a total redesign, I explored six potential frameworks focused on UI behavior, feature visibility, adaptability to different screens.
Speedy launch, happy customers.
This revamped console experience caters to the diversity of user roles and permissions. It is capable of delivering a consistent UX while facilitating role-specific customizations.
Putting it all together
The new UI framework featuring a card-based layout. Each feature is encapsulated in a card, and cards are dynamically shown or hidden based on the user's role and permissions.
Exploring different frameworks, navigating tradeoffs & negotiations with cross-functional teams.
Despite constraints like existing console elements and the high cost of total redesign, we explored six potential frameworks. These concepts focused on critical questions about UI behavior, feature visibility, adaptability to different screens, and how to communicate restricted access to users effectively.
Through creative problem solving, weighing trade offs and strategic negotiations with PM and engineering, the selected solution optimally balanced the user needs and practical constraints. This resulted in significantly enhancing our ability to onboard new user groups and streamline the introduction of new features.
