Loading

0

End to End SaaS Design

FluxOps: Internal Dashboard

FluxOps Internal Dashboard Hero

Project Context

Visit Dashboard

Fluxergy's internal teams relied on fragmented systems like MS Teams, Outlook, and shared spreadsheets to manage purchasing, approvals, project tracking, and communication. What started as a quick fix for a purchasing bottleneck evolved into a full-scale internal dashboard.

I designed and engineered this system to replace siloed tools with a central, role-aware platform that saved time, reduced error, and scaled cross-functional efficiency. The challenge was to create one system that worked for everyone without becoming bloated or generic, unifying workflows across R&D, legal, sales, labs, IT, and executive leadership.

Role
UI/UX Designer
Timeline
January 2024 – April 2024
Skills
UI/UX Design
User Testing
Workflow Mapping
Design Systems
Product Strategy
Tools
Figma
Miro
Jira
FigJam
Notion
Team
1 COO + 8 Department Heads
(Legal, Biology, R&D, Sales + Marketing, IT, Quality, Finance, Administration)

The Problem & Approach

Manual processes and disconnected tools made routine tasks like purchase approvals or contract signoffs painfully slow. Employees had to pass around spreadsheets, legal and labs used email for task routing, managers lacked visibility, and sales bounced between Dynamics and Salesforce.

I started with a PowerApps MVP for purchasing, but quickly hit limitations in UI flexibility and data clarity. I rebuilt the experience from the ground up, mapping real processes, interviewing department heads, and working cross-functionally to design flows that reflected how each team actually operated. I treated each tool as a module in a larger system, focusing heavily on creating a consistent interaction model across departments.

Pain Points

  • Disconnected tools (MS Teams, Outlook, Excel) caused delays and miscommunication
  • Purchasing approvals stalled in email threads with no centralized tracking
  • Legal, R&D, and Labs lacked a shared workflow for routing documents and tasks
  • Sales and marketing used overlapping SaaS tools (e.g., Salesforce, Dynamics) with no unified data view
  • Executives had no real-time visibility into cross-department activity
  • PowerApps MVP had poor UX, rigid UI, and clunky PowerAutomate logic
  • Processes varied by department, leading to inconsistent execution and fragmented accountability

Before

Before State - Original PowerApp Interface

A clunky patchwork of PowerApps and PowerAutomate created more confusion than clarity. The UI was rigid, visually unrefined, and forced users through indirect workflows spread across emails, spreadsheets, and approvals hidden in Outlook threads, with no single source of truth or usable system for cross-department collaboration.

After

After State - Redesigned Order Detail Interface

The new dashboard replaced scattered tools with a centralized, role-aware system tailored to each department's needs. Purchasing, legal, biology, and executive teams now operate within unified workflows, which meant no more chasing emails or switching platforms. The interface is streamlined, the logic intuitive, and the entire organization finally has a real-time view of what's happening, where, and by whom.

Intentional Design

FluxOps Dashboard Interface
Home/Dashboard
  1. Sidebar Navigation Structure
    Designed with persistent left-aligned navigation to reflect the frequency and priority of daily tasks. Grouped logically to support operational workflows and reduce cognitive load for users switching between roles.
  2. Metrics Overview Cards
    Used compact, glanceable summary cards with iconography and trend indicators to highlight KPIs. Color-coded deltas subtly guide the user's attention to what's improving or declining without overwhelming.
  3. Revenue Trend & Analytics Panel
    Built around executive visibility. The timeline chart is placed prominently to offer quick insight into business performance, with dual-line comparison across years for contextual grounding.
  4. Utility Panel
    Placed global actions (notifications, messages, settings) in the top-right for universal access without disrupting the visual hierarchy. Icons were prioritized over text to save space and encourage recognition.
  5. Customer Feedback Preview
    Added a real-time feedback component to make customer sentiment accessible within the dashboard, keeping the voice of the customer close to decision-makers without switching tools.
Project Management
  1. Editable Project Toolset
    Enabled modular tool access (e.g. assay builder, validation tracker) based on phase and category. This lets scientific teams customize their workspace while preserving structure.
  2. Context-Rich Project Description
    Structured with "Details," "Objectives," and "Project Category" sections to help cross-functional teams (e.g., Bio, R&D, Legal) align without needing separate onboarding.
  3. Team Collaboration Panel
    Included roles and real-time timestamps to give transparency into who's contributing what and when. mirroring async workflows and lab schedule variability to help managers and team members.
  4. Flexible Member Management
    "Add Member" CTA placed top-right for quick administrative access while preserving space. Clean separation from search and content keeps it lightweight and clear.
  5. Revenue Overlay Chart
    Paired project-specific revenue data with active timeline tools (monthly, weekly, daily). The vertical highlight aids users in understanding peaks and revenue shifts relative to milestones.
FluxOps Project Detail Interface
FluxOps Wallet Interface
Purchasing Workflow

Workflow Modules Overview

Workflow showcase for different departments and users.

Purchasing Flow

Streamlined approval process for procurement requests across departments.

Legal Sign-Off

Digital contract review and approval workflow for legal team.

Sales Request/Demo Tracker

Centralized pipeline for demo requests and client engagement tracking.

Access Permissions (IT)

Role-based access control and permission management system.

Executive Overview

High-level dashboard for leadership visibility across all operations.

Lab/R&D Logs

Research documentation and experiment tracking for lab teams.

Finance COGS Dashboard

Cost tracking and financial analysis for operational efficiency.

Quality NCR Tracker

Non-conformance reporting and quality assurance management.

Purchasing Flow Workflow

Request Submission
Amount
> $2000?
YES
Manager Review
Finance Approval
NO
Auto-Approval
Procurement
Order Fulfillment
Working with my best design team

Working with my best designers

My furry co-designers helped me through every iteration, providing moral support and the occasional paw-spective on user experience.

Fuel for the design process

Fuel for the design process

Essential office sustenance that kept the creative juices flowing during overtime design sessions and sprints. Also... yum!

More food...

More food...?

Designers have to eat... don't worry. Company card... >_<

Solutions Reached

We replaced fragmented tools like MS Teams, Outlook threads, and spreadsheets with structured, purpose-built workflows inside a centralized internal dashboard. Each department now operates within dedicated modules tailored to their specific needs, while maintaining a consistent interaction model across the platform. Users can also customize their dashboard to their liking.

This system improved data traceability, reduced approval cycle times, and gave executives real-time visibility into company-wide operations. Most importantly, it was designed for scalability: new workflows can be added without disrupting the core UX or creating silos. Departments get autonomy; leadership gets oversight. The result is a single, coherent tool that adapts to the way teams actually work.

Skills & Tools

This project began as a quick solution using Microsoft PowerApps to address purchasing delays. While functional, the tool quickly revealed its limitations: rigid UI constraints, clunky navigation, and poor visibility across departments. These early constraints sparked the need for a more intentional and scalable design solution.

I led the redesign process from the ground up, beginning with direct interviews and collaborative sessions with department heads, operational managers, and end-users across Legal, R&D, Labs, Sales, IT, Finance, and Quality. These conversations surfaced dozens of hidden pain points from misrouted approvals to duplicated workflows. This shaped the architecture of the new system.

Tools used included:
• Figma for interface design, component libraries, and iteration
• Miro and FigJam for workflow mapping, system architecture, and cross-department alignment
• PowerApps as the initial prototype environment (used for identifying workflow bottlenecks)
• Jira for managing feature priorities and stakeholder feedback cycles

This was a deeply systems-driven and user-centered design effort, requiring careful attention to role-specific needs while building a unified experience that felt intuitive, flexible, and future-proof.

Impacts

Approval turnaround time dropped from three days to under 12 hours, with over 200 users across 8+ departments now operating within a single, unified system. The platform achieved an estimated 93% efficiency gain in workflows spanning purchasing, legal, and lab operations.

Used daily by the COO, department heads, and frontline staff, the dashboard replaced scattered tools with a centralized source of data, streamlining communication, accelerating approvals, and giving leadership real-time visibility into cross-departmental operations.

Stakeholders, managers, and employees all rejoiced at the disappearance of a user experience headache.

Metrics

3 Days → 12 Hours
Approval Turnaround Time
93%
Workflow Efficiency Improvement
12
Legacy Tools Replaced (Outlook, Teams, Excel, etc.)
200+
Active Daily Users

Reflection & Learnings

This project pushed me to focus on operational scale rather than just aesthetics. The complexity wasn't only in the interface; it was about aligning workflows across departments that had different needs, priorities, and expectations. This required making choices that favored speed, clarity, and maintainability over flashy visuals.

Working with legal, labs, R&D, and executive teams taught me how to deal with uncertainty, gather real requirements from informal processes, and turn them into systems that people could actually use. I developed a better understanding of how to design for high-context, real-world environments, where inefficiency has tangible costs and users only adopt a product if it earns their trust quickly.

What I'd Do Differently

Lessons for future internal tool design

Me resetting my corneas

Me resetting my corneas after having the Figma interface burned into them.

Next time, I would...

Build a comprehensive design system first. Originally built without a full design system, which led to inconsistencies as we scaled across 8 departments. Reusable components would've saved time and improved consistency during scaling.

Implement progressive disclosure earlier. The initial dashboard tried to show everything at once. A layered information architecture would have reduced cognitive load for department heads managing multiple workflows.

Plan for mobile responsiveness from day one. Many managers wanted to approve requests on mobile devices, but we had to retrofit responsive design later in the process.

Team Feedback

What the fluxergy team said about the new dashboard

"The dashboard didn't just look better—it actually changed how our teams work. We're seeing cross-department collaboration that never existed before."

Jonathon Tu
COO, FluxOps

"Finally, I can see what's happening across all departments without having to send 10 different emails. The workflow automation saved us hours every week."

Riaz Tootla
Finance Director

"The purchasing workflow went from a nightmare to completely streamlined. Our team can focus on strategic work instead of chasing approvals."

Nick Cuong
QA Manager

Final UI Showcase

Polished dashboard screens across different departments

Previous

Synca+, CGM Mobile Companion