Overview
The Permit Management Application is a role-based system designed to manage the end-to-end lifecycle of permit issuance. Users can apply for, review, approve, and manage multiple permit types while access is controlled by user roles and permissions. Originally built as an internal-only tool, the platform needed to be redesigned and re-architected to support both internal staff and external applicants, requiring a scalable UX foundation, modern design system, and clear workflows that could adapt to varying user needs and permissions.
Year
2025
Client
Department of Environmental Quality
Services
UI/UX Design
/
HTML/CSS
/
Prototyping
/
UX Research
Problem Statement:
The existing application presented several critical usability and scalability challenges that limited its effectiveness and future growth:
- Inconsistent UI and Interaction Patterns
The absence of a design system resulted in fragmented components, visual inconsistencies, and unpredictable interactions across screens. - Complex Role-Based Access With Poor Clarity
Users struggled to understand what actions were available to them based on their role, leading to errors, confusion, and increased support requests. - Internal-Only Architecture Not Scalable for External Users
The experience assumed institutional knowledge, making it unsuitable for public users unfamiliar with permit processes. - Inefficient Design-to-Development Handoffs
Lack of standardized workflows and documentation caused misalignment between design and engineering, slowing delivery and increasing rework.
Goals & Predictions:
Goals
- Establish a scalable design system to ensure consistency and reusability.
- Simplify complex permit workflows while maintaining role-based security.
- Redesign the experience to support both internal and external users.
- Improve collaboration and velocity between design and development teams.
Predictions
- Reduced development time due to reusable, documented components.
- Increased task completion rates and fewer user errors.
- Faster onboarding for new users and new permit types.
- Improved stakeholder confidence and design adoption across teams.
Wireframes
.png)
Designs
.png)
.png)
The
design process
1. Design System Foundation
- Designed a modular design system from the ground up to support long-term scalability.
- Created reusable components (inputs, tables, modals, alerts, permission states).
- Established clear usage guidelines to support both internal and external experiences.
2. Component Modernization
- Refactored legacy UI elements into accessible, responsive components.
- Introduced consistent spacing, typography, and interaction patterns.
- Designed components with permission-aware states (view-only, editable, restricted).
3. Cross-Functional Alignment
- Led recurring design review sessions with stakeholders, users, product, and engineering.
- Facilitated conversations to align business goals, technical constraints, and user needs.
- Used feedback loops to gain buy-in and reduce downstream design churn.
4. Design-to-Dev Workflow Optimization
- Implemented structured Figma workflows, including:
- Component libraries
- Versioned designs
- “Ready for Dev” handoff states
- Provided annotated designs and interaction notes to ensure clarity and efficiency.
Key outcomes
- Higher Task Success Improved clarity and usability. ~68% → ~90% success rate
- Faster Development Velocity Enabled quicker builds with standardized components. ~30% faster UI delivery
- Externally Scalable Platform Successfully transitioned from internal-only to public-ready architecture.
- Stronger Cross-Team Alignment Earlier approvals and fewer late-stage changes.
Key solutions
- Improved Design-to-Dev Handoff Implemented Figma “Ready for Dev” workflows. ~40% fewer clarification cycles
- Scalable Design System Created reusable, documented components to support internal and external users. ~70% component reuse
- Role-Based UI & Permissions Designed permission-aware states to reduce user errors. ~35% fewer permission errors
- Streamlined Permit Workflows Simplified multi-step flows using guided, task-based design. ~25% faster submissions
