GEMS: User & roles management

    Unlocking efficiencies for Sales Ops users

    My Role: Lead product designer

    Team: Front-end developers, Product Owner, Backend developers, myself as the Product Designer

    Time: June-July 2023

    About the project


    In the world of business tools, GEMS (event management system), was the backbone of Bowlero, originally housed within Dynamics 365. But within this digital landscape, challenges lurked. Managing user roles and permissions was like navigating a complex maze, leading to inefficiencies and user frustration.

    This case study is your backstage pass to the transformation of the user and roles management piece of the product (from Dynamics 365 to this new web application), where the core foundations of the new product were established, that has been driving the rest of the new GEMS product. Discover how we listened to our users, devised practical solutions, and streamlined the design process, resulting in a significant improvement for our Sales Ops users.

    Ready to dive in?

    The challenges tackled

    • Business process change: Necessity to change existing business processes, such as enabling HR to update roles directly in Active Directory instead of sending emails to Sales Ops.
    • Integration complexity: Integrating with external systems like Active Directory to automate user role updates and ensure synchronization.
    • Establishing core UI/UX patterns: Setting the foundation for UI and UX patterns, navigation systems, overall product aesthetics, and functionality while addressing user role and permissions challenges.
    • Balancing simplicity and functionality: Streamlining complex user and roles management in a large organization while maintaining a balance between simplicity and comprehensive functionality.

    Chapter 1:Morning clarity

    It was the onset of a new month and a new project. Sitting in my home office, coffee in hand, I opened up my laptop and dove into the GEMS project. With every sip of my morning brew, I became more immersed in the feedback from the Sales Ops users of the old GEMS that was built in Dynamics 365. They felt lost in a system they should have easily navigated, struggling to manage user roles and permissions effectively.

    I thought, “This isn’t just about tweaking a few buttons. This is about rethinking the whole user experience.” The GEMS system was ripe for change.

    The central question emerged:
    How might we implement a user roles and permissions system in the new GEMS product to let Sales Ops users efficiently manage user creation, record handling, role assignment, and permissions, all while keeping the experience intuitive?
    The objectives became clear:
    • Streamline user creation, record management, role assignment, and permissions.
    • Ensure that users have role-based access to screens, enhancing security and efficiency.
    To measure the success, I needed to keep in mind these two main metrics:
    • A boost in user satisfaction, particularly in their interactions with the user and role management features.
    • A significant increase in the percentage of users with the correct system access.

    Chapter 2:Brewing solutions & crafting user flows

    Another morning, another challenge. In my cozy home office, where inspiration thrives, I wrapped myself in the warmth of a soft blanket as our team embarked on another virtual journey. Through the lens of Zoom, Miro, and FigJam, I dove headfirst into a whiteboarding exercise with the Product Owner. Thanks to her great experience with UX Stategy, this collaboration session once again felt like a breeze.

    Our discussion sparked a flood of potential solutions, all aimed at enhancing the user experience within GEMS. Despite the physical distance, the collaborative energy of our remote session made my home office feel like a hub of creativity, a place where innovation thrives, and challenges are met with enthusiasm.

    User management interface plans

    • User creation workflow: Aimed to design a user-friendly workflow so Sales Ops users could effortlessly add new user records to the system, capturing information like name, email, role, and contact without a hitch.
    • User editing interface: We envisioned an interface that not only allows editing of user records but would do so with simplicity and speed. Any modification, from basic details to role reassignment, should be a few clicks away.
    • User activation/deactivation: Implement a feature that allows Sales Ops users to activate or deactivate user accounts. Deactivation should disable access while preserving historical data.
    • User listing, search and filtering: Sales Ops users should be armed with a user list that was not static but dynamic, offering sorting and filtering options to quickly pinpoint users based on various attributes, such as location (sales region, sales territories, regions, district, center)
    • Roles assignment on user profile: Develop a feature for assigning roles to a given user. With a clear list of available roles and a quick overview of assigned roles, Sales Ops users could save time, reduce errors, enhance control, improve the user experience, and boost overall productivity.

    Roles and permissions management interface plans

    • Role creation: Envisioned not just a process, but an intuitive, clear, and straightforward interface for Sales Ops users to create and define new roles, embedded with descriptive details to aid clarity and purpose.
    • Role editing and deletion: Needed an interface that not only facilitated the editing of role details but also ensured the deletion process was secure, calling to user's attention the consquences of it.
    • Permission assignment: Design an interface that enables a precise and clear mapping of permissions to specific roles, assuring users were granted access tailored to their specific needs and no more. This should include a clear list of available permissions and an overview of assigned ones.
    • Permission deletion: Enable Sales Ops users to remove permissions from roles if they are no longer needed, ensuring role definitions remained relevant and apt.
    • Roles listing, filtering & search: Develop a roles list view with sorting, searching and filtering options based on permission attributes (service, action, scope, perspective). This should assist Sales Ops users in quickly finding and managing roles.

    Automation plans

    • Automated user record population from Active Directory: Create an interface that allows the user to be able to enter a username in a search field and initiate a "search" action. Upon doing so, the system should retrieve and populate user information from Active Directory for the user's review and editing. Once reviewed, the user should have the option to add the user to the system. Automating user record population from Active Directory would benefit Sales Ops users by saving time and ensuring data accuracy.
    • Role synchronization: Through automating the synchronization of user roles with the changes occurring in JDE, GEMS would automatically update user roles whenever there were promotions, demotions, or exits, maintaining a reliable reflection of the actual organizational structure and user statuses.
    • Role-based user lists: Create a feature that displays a list of all users associated with a specific role, making it easy for Sales Ops users to review and manage user-role assignments.

    Setting the path: User flows unveiled

    As I settled into my workspace as per usual, I took off on the task of crafting more detailed user flows. These digital pathways, born from our brainstorming and ideation sessions, held the promise of offering our Sales Ops users a more seamless and intuitive journey through the complex landscape of GEMS.

    These user flows enabled me and my team to spot potential roadblocks and bottlenecks early in the design process, ultimately saving us valuable time and resources in development.

    Chapter 3:From concept to Figma canvas

    During the design phase, my primary focus was on the "craft" of transforming imaginative solutions into user-friendly interfaces that not only appealed visually but also seamlessly supported users in accomplishing their tasks. I shouldered the responsibility of ensuring that the final design didn't merely check functional boxes but seamlessly melded with the product's established design identity and brand essence. This comprehensive approach formed the cornerstone of my mission to craft a visually cohesive and user-centric journey within GEMS.

    Perfecting the blueprint: High-fidelity wireframing and iteration

    Relying on the user flows as my guiding framework, I dived into designing the high-fidelity wireframes in Figma. Each wireframe felt like an idea coming to life, a significant step closer to our final product.

    I initiated design reviews with our Product Owner (PO) to ensure the designs aligned with our goals and met user needs. Her insights were invaluable, helping me refine the wireframes further.

    Following that, I facilitated design reviews with our dedicated development team to ensure the designs were not only visually compelling but also feasible and efficient to implement.

    Throughout this iterative journey, I engaged in constant feedback sessions, actively listening to suggestions and making necessary adjustments and enhancements. This collaborative approach allowed me to fine-tune our design dynamically in response to real-world considerations.

    "Coloring in": UI design & filling the gaps with component creation

    When addressing the user interface aspect of the wireframes, my primary focus was on maintaining consistency, meeting accessibility standards while enhancing its visual appeal and user-friendliness. Drawing from our design system was key to achieving this goal.

    If you're curious to learn more about the design system that shapes GEMS, I invite you to explore the design system case study. It's a valuable resource that reveals how I built a design system from the ground up and integrated it into the GEMS project. It shows how this framework brings consistency and purpose to GEMS, offering a behind-the-scenes look at its visual identity and consistency. Check the design system case study related to GEMS.

    By adhering to the principles and patterns set within this phase, I established design standards that would serve as a blueprint for the rest of the product. This consistency in design ensured that as GEMS expanded and evolved, it would continue to provide users with a familiar and intuitive experience, setting the stage for a successful and user-centric product journey.

    Hearing from the Users

    With the designs nearly finalized, it was time to hear from our primary audience: the Sales Ops users. We organized walkthrough sessions, and the feedback was encouraging. All users appreciated the clean and straightforward layout, with only a few minor adjustments suggested.

    The journey to design the new GEMS was challenging yet fulfilling. Each step, from the initial concepts to user feedback, ensured GEMS was going to be a reliable and efficient tool for its users.

    Chapter 4:Design deCODEd; the hand-off

    The design phase had come to a close, and a sense of eager anticipation filled the room. It was now time to ensure that my designs seamlessly made their way into the hands of the developers, ready to be transformed into a functional product.

    Before this hand-off could take place, a critical step had been accomplished: the design had undergone a thorough sign-off process. This sign-off was similar to giving a green light, indicating that the design was well-prepared, thoroughly reviewed, aligned with our project's goals and user needs.

    To ensure a smooth transition from design to development, I created a separate development file. This file, once handed over, was meant to remain unchanged, preserving the original design. If changes were needed, I implemented a changelog section within the development file to document and communicate modifications effectively.

    Technical documentation & dev notes

    The pros of integrating documentation, notes to devs, or specs were notable. These resources offered an in-depth understanding of how specific design elements should be translated into functional features. Whether detailing user interactions, addressing behavioral nuances, considering design aesthetics, or laying out technical prerequisites, these sections made sure that when developers began working on the handed-off designs, they had all the important info they needed to understand it well.

    • These little notes acted as concise guides that offered insights into how a particular design element should be implemented. They might contain details about functionality, behavior, design considerations, or even technical requirements.
    • This quick-reference approach helped developers grasp the details in context without searching around. It's like leaving little helpful messages that guided them as they work.
    • The core idea was simple: Make the bridge between design and development as seamless as possible by attaching relevant, concise information right where it's needed.

    User flows integrated into wireframes

    The fusion of user flows and wireframes brought forth a host of advantages. First and foremost, it enhanced the clarity of design intent for both developers and stakeholders. By visually mapping user interactions, developers could more readily grasp intended functionalities, leading to a final product that closely aligns with the envisioned user experience.

    • For developers and stakeholders alike, this fusion clarified the purpose behind each design decision. By illustrating the user's journey step-by-step, it became simpler for the developers to understand the desired outcomes and functionalities.
    • During presentations or after hand-off, the combined visuals spoke volumes. Stakeholders could trace a user's path, feeling more involved in the design story, leading to fewer questions and more productive discussions.
    • This combination also served as my safety net. By reviewing the user flows within the design context, I could spot potential usability problems before they became real issues during development.
    • And if there was ever a need for an interactive prototype? Well, these integrated wireframes made the transition a breeze.

    Chapter 5:Numbers don't lie

    As we wrapped up our journey, GEMS' story unfolded. It used to be a confusing maze, but now it's a clear and inviting path. The numbers we looked at, like the stars in the night sky, showed us we not only met our goals but also made GEMS a shining example in user-friendly design.

    Enhanced user satisfaction

    User satisfaction scores showed a notable boost, increasing by 75%. This was measured through post-implementation surveys and user feedback, highlighting the system's improved usability and efficiency, translating into happier users.

    Improved access-control

    The percentage of users with the correct system access increased significantly by 30%, measured through a before-and-after comparison of user permissions and access logs. This reflected the successful implementation of role-based access control, as users now had access only to what they needed, enhancing security.


    As I look back at the journey of transforming GEMS, I'm reminded of the power of empathy, innovation, and collaboration. It all began with a simple cup of morning coffee and a challenge: How can we make GEMS more intuitive and user-friendly for Sales Ops users, shifting it from its legacy Dynamics 365 experience into a completely new and refreshing product?

    Throughout this adventure, each chapter unfolded like a new day, revealing fresh insights and solutions. From ideation to wireframing, and from user flows to high-fidelity design, my team and I shaped GEMS to align seamlessly with the needs of our users.

Copyright © 2016-2023
Website Design & Development by Szani Lee.