IFB Solutions needed a user‑friendly admin portal that would let non‑technical staff seamlessly manage their production‑efficiency data. The new design had to clearly surface the relationships between companies, locations, and employees while enabling add, edit, and delete operations without developer intervention.
Because the portal must work across desktop and mobile, it also needed a layout that presents all essential functions on larger screens but simplifies down to the core tasks on smaller devices. By using Bootstrap‑compatible components and a clear visual hierarchy, the aim was to boost admin productivity and reduce errors in day‑to‑day data management.
Research & Analysis
Stakeholder Interviews
Met with IFB product lead to map database relationships and define user roles/permissions.
User Flows
Documented common tasks: onboarding a new location, editing employee details, generating efficiency reports.
Competitive Audit
Reviewed admin panels of similar data‑driven SaaS tools (e.g., Airtable, Forest Admin) for navigation patterns.
Key Insights
A hierarchical sidebar with collapsible menus simplifies table navigation.
Dashboard cards should be widget‑based so users only see the reports they need.
Role & Responsibilities
UI & Interaction Design: Wireframes and high‑fidelity screens in Figma
Component Library: Defined Bootstrap‑compatible components (sidebar, tables, forms, modals)
Prototyping: Clickable desktop + mobile prototypes for user testing
Developer Handoff: Delivered annotated specs and SCSS snippets for rapid front‑end build
Design Process
1. Ideation & Wireframing
Sketched core pages: Login, Dashboard, Record Management (Add/Edit/Delete)
Mapped sidebar hierarchy:
Company
Location
Employee
2. Visual Design & Prototyping
Applied dark green (#009933) for primary actions, with neutral grays for backgrounds
Desktop: multi‑column dashboard with drag‑and‑drop report widgets
Mobile: simplified single‑column view showing only key widgets and a slide‑out menu
3. Developer Handoff
Organized Figma file with a Bootstrap‑ready component library
Provided CSS variables for colors, typography, and spacing
Annotated breakpoints for responsive behavior
4. Testing & Iteration
Usability testing with 5 IFB admins performing CRUD tasks
Gathered feedback on menu discoverability and form validation
Refined error states, inline help text, and keyboard navigation support over two cycles
Solution Highlights
Hierarchical Sidebar — Collapsible menus reflect table relationships for quick navigation
Customizable Dashboard — Widget‑based cards let users add/remove efficiency reports
CRUD Interface — Searchable, paginated tables with inline edit/delete actions and modal forms for adding records
Responsive Layout — Full‑featured desktop and streamlined mobile views built with Bootstrap
Outcomes & Metrics
150% Productivity Gain: Admins completed data‑management tasks in 40% of the previous time
Reduced Developer Dependency: Day‑to‑day data updates no longer required developer support
High Adoption: 100% of pilot‑test admins migrated to the new portal within one week
Positive Feedback: “This portal feels tailor‑made for our needs—so much faster and clearer.” — IFB Admin Lead
Lessons Learned
Clear Hierarchy Is Critical: Representing database relationships in the navigation improves task flow.
Component‑First Approach: Building a Bootstrap‑compatible library upfront accelerated development.
Responsive Simplification: Stripping non‑essential elements on mobile keeps users focused on core tasks.
Next Steps
Role‑Based Dashboards: Personalize widgets based on user permissions (e.g., location manager vs. super‑admin).
Advanced Reporting: Add charting components for trend analysis and exportable reports.
Accessibility Audit: Ensure full WCAG compliance for blind and low‑vision users.
