The Coordinated Interagency Transmission Authorizations and Permits (CITAP) Portal
-
Challenge
Project applicants need a streamlined process to submit and track their transmission authorization requests in coordination with the National Environmental Policy Act, while the Department of Energy requires an efficient system to review submissions and monitor progress effectively.
-
Process
As the UX Design and Research lead, my role in this project has been to balance the interests of the stakeholders and users to establish the requirements of the tool, write the content, and design the UX/UI, lead a UXR study, and collaborate with developers to deploy.
-
Outcome
Successfully delivered an interactive portal on time, meeting and exceeding project goals. The portal serves as both a data repository and a streamlined platform for users to review, manage, and submit data for transmission authorizations and permits. Visit the live site at citap.gov
UX Research & Analysis
During the UX research phase, I collaborated closely with stakeholders to review program rules and define functional and feature requirements, ensuring alignment with both regulatory guidelines and user needs. This process involved building comprehensive journey maps to visualize end-to-end user interactions, developing user personas to represent key audience segments, and creating a user flow diagram to outline primary tasks and workflows. These research outputs provided a solid foundation for user-centered design decisions, guiding the development of an intuitive and efficient portal experience.
UX Design
During the prototyping phase, I translated research insights into low- and high-fidelity wireframes, ensuring a clear and intuitive user experience. Developing an interactive Figma prototype allowed stakeholders to fully navigate the site, providing a tangible representation of the product’s look and functionality. This hands-on approach facilitated meaningful feedback, ensuring alignment with user needs and project goals before development. The prototype served as a critical tool for refining interactions, optimizing workflows, and validating design decisions through iterative stakeholder reviews.
UI Design
Once the user flow was solidified, I moved on to develop the UI of the portal. I used Figma to develop consistent styles, including color schemes, typography, and layout elements, ensuring a cohesive visual language throughout the interface. To facilitate a smooth transition from design to development, I built a comprehensive component library in Figma, utilizing the MUI (Material-UI) library of React components. This approach ensured that design elements aligned with development standards, enabling efficient collaboration between design and development teams. By leveraging MUI, we streamlined the process, ensuring consistency, scalability, and responsiveness across the platform.
Deployment
In the deployment phase, I collaborated closely with developers to ensure the functionality was both feasible and effective. Working within an agile framework, I participated in daily scrums, tracked developer notes, and leveraged the MUI design system for consistency. I continuously collaborated with the development team to ensure seamless integration, ensuring the database aligned with the interface and all features functioned as intended. This iterative process allowed us to quickly address any issues and ensure a smooth transition from design to live deployment.