AvidBeam Component Redesign
2024 - Present
During my internship at AvidBeam, I led the redesign of critical components in their AI video analytics platform. This case study focuses on the comprehensive overhaul of the Roles & Permissions Management system, which was essential for admin workflows but suffered from significant usability issues.
Component 1 – Roles & Permissions Management
Problem
The original Roles & Permissions screen was difficult for admins to use:
- Cluttered layout: Multiple role panels were displayed at once, overwhelming users with redundant information.
- No clear hierarchy: Permissions were listed in long, flat lists without logical grouping.
- Not responsive: The layout did not adapt for tablet or mobile, despite many admins needing access on the go.
- Poor scalability: Adding more roles or permissions would quickly make the interface unmanageable.
Before — Multiple role panels with flat lists and no responsiveness
Solution
I redesigned the screen with an emphasis on clarity, hierarchy, and scalability:
- Introduced a sidebar for switching between roles instead of showing all roles at once.
- Added search functionality for both roles and permissions.
- Grouped permissions into expandable categories to reduce visual noise.
- Applied a consistent toggle interaction across all permissions.
- Designed with responsiveness in mind to ensure the interface works across different screen sizes.
After — Sidebar navigation, grouped permissions, search, consistent toggles
Implementation
I worked with other interns and the dev team to begin implementing the redesign into the live app. My process included:
- Delivering detailed Figma mockups with notes and documentation.
- Providing responsive breakpoints and interaction specs.
- Iterating based on technical feasibility and feedback from developers.
Impact (In Progress)
While full rollout is ongoing, this redesign is expected to:
- Simplify workflows by focusing the view on one role at a time.
- Scale effectively as more roles and permissions are added.
- Improve accessibility for admins working on tablets and mobile devices.
Component 2 – Retention Features Tab
Problem
The original Retention → Features tab used cards to display retention settings. While visually simple, this design created several challenges:
- Hard to scan: Users had to open and read each card individually to compare lists.
- Limited space: Important details like “status” or “time left” were either hidden or not visible without extra clicks.
- Not scalable: As more lists were added, the card layout became cluttered and inefficient for quick management.
Before — Retention lists shown in separate cards, difficult to compare at scale
Solution
I redesigned the Features tab to use a table-based layout instead of cards, optimizing it for quick scanning and bulk management:
- Converted cards into a single sortable table view.
- Added clear columns for Date Created, Retention Duration, Time Left, Delete On, and Status.
- Applied color-coded status labels (Active, Expiring Soon, Expired) for quick recognition.
- Added filter controls (Retention Duration, Delete On, Status) for easier navigation in large datasets.
- Preserved consistency with AvidBeam’s overall UI style while making the design scalable.
After — Table view with sortable columns and color-coded statuses for quick scanning
After — Filters allow users to narrow down results for faster management
Implementation
I delivered this redesign in Figma with:
- Interaction notes for sorting, filtering, and color states.
- Guidance on responsive table behavior for different breakpoints.
- Collaboration with developers to align on feasibility and data handling in real-time.
Impact (In Progress)
Once implemented, this redesign is expected to:
- Save time for admins by making retention lists scannable at a glance.
- Improve accuracy by surfacing expiring/expired items clearly with status labels.
- Scale better as more lists are added, avoiding the clutter of a card-based UI.
Component 3 – Disks Tab
Problem
The original Disks tab presented information in a way that was functional but difficult to parse at a glance:
- Crowded layout: Each disk card contained multiple text labels (used memory, total memory, mount path) without strong hierarchy.
- Threshold controls: Threshold percentage inputs and toggles were placed inconsistently, making them harder to use quickly.
- Limited readability: The design emphasized raw numbers rather than usage percentage, slowing down decision-making.
- Scalability issues: As more disks were added, the visual density became harder to manage.
Before — Disk usage shown with dense text blocks and inconsistent threshold controls
Solution
I simplified the design and emphasized clarity for system admins:
- Created a cleaner card layout with consistent formatting for each disk.
- Highlighted usage percentage and progress bars as the primary visual indicators.
- Standardized threshold controls across all disks for predictability.
- Added a Retain Data toggle directly in each card to streamline decision-making.
- Improved spacing and visual hierarchy, so the most critical information (usage % and status) stands out immediately.
After — Cleaner disk cards with consistent threshold controls, usage emphasized as primary visual
Implementation
I handed off the redesign with:
- Updated Figma components for disk cards.
- Documentation on usage bar scaling, toggle states, and responsive behavior.
- Developer collaboration to ensure accurate reflection of live system values in the UI.
Impact (In Progress)
When implemented, this redesign is expected to:
- Reduce cognitive load by making usage % instantly visible.
- Improve usability through consistent control placement.
- Scale more effectively as multiple disks are added without overwhelming the interface.
Component 4 – Delete Data
Problem
The original Delete Data screen had several UX issues:
- Unclear labeling: The purpose of the screen wasn’t immediately obvious — “9605 records” was shown without context.
- Weak hierarchy: Critical actions like deleting records were placed next to less important elements, making them easy to miss.
- Low affordance: The delete action was represented by a small trash icon, which did not communicate the severity of the action.
- Crowded layout: Key elements (record count, refresh, date pickers, and delete action) lacked spacing and separation.
Before — Minimal context, unclear labeling, and low visibility of destructive action
Solution
I redesigned the screen to make destructive actions clear, intentional, and safe:
- Added a clear title (“Delete Data”) so users understand the screen’s purpose.
- Changed the record count to a more readable format: “9,605 records found”.
- Introduced a dedicated red “Delete Records” button with clear labeling to signal destructive action.
- Reorganized layout: record count and refresh controls grouped together, date range inputs aligned consistently.
- Improved spacing and alignment to make the flow easier to follow.
After — Clear title, readable record count, and dedicated red button for destructive action
Implementation
I provided developers with:
- Figma documentation outlining button states (default, hover, confirmation).
- Notes on confirmation flows to prevent accidental deletions.
- Layout spacing rules to maintain consistency with the rest of the AvidBeam UI.
Impact (In Progress)
Once implemented, this redesign will:
- Reduce user error by making the destructive action highly visible and intentional.
- Improve clarity with better labeling and hierarchy.
- Increase confidence by aligning the design with common UX conventions for data deletion.
Design Process & Key Learnings
Design Process
- User research and problem identification
- Competitive analysis and design patterns review
- Wireframing and information architecture
- High-fidelity mockups and prototyping
- Developer handoff and implementation support
Key Learnings
- Importance of mobile-first design for admin tools
- Value of progressive disclosure in complex interfaces
- Need for consistent interaction patterns
- Collaboration between design and development teams