SmartComplAi
Date
January - February 2025
Role
UX/UI Designer
Project Type
Product and UX/UI Design
Tools
Figma
This project focused on designing a cohesive, user-centered UX/UI for SmartComplAi, a digital platform aimed at streamlining stormwater compliance processes within the construction industry. The platform enhances regulatory adherence by providing automated inspection scheduling, compliance tracking, reporting, and documentation management tools. The primary goal was to create a professional, intuitive, and aesthetically pleasing interface tailored to construction companies, stormwater compliance inspectors, and regulatory bodies. Key design priorities included functionality, ease of use, and accessibility across both desktop and mobile platforms.
For this project, I served as the UX Designer, leading the full design process with a user-centered approach. I began by empathizing with users through research, analyzing target user needs, and understanding key compliance processes and application features. From there, I moved through the complete design process—starting with rough sketches and low-fidelity wireframes to establish structure and functionality. I then refined the design by incorporating branding elements into a high-fidelity prototype, delivering a cohesive and intuitive user experience.
RESEARCH
User and Feature Research
To ensure an effective and user-friendly design, we began with thorough research:
-
We identified target users, analyzed their roles, and assessed how they would interact with the application in their daily workflows.
-
We studied core features of stormwater compliance applications, focusing on inspection scheduling, compliance tracking, reporting, and document management.
-
We reviewed employer-provided documentation to gain deeper insights into user needs and existing pain points within compliance management.
-
Based on our findings, we defined key features that would best support the needs of our users.
DESIGN
Sketches and Low-Fidelity Wireframes
Following our research, we transitioned into the design phase.​
Sketches (paper and digital)
We created rough sketches and paper wireframes to rapidly iterate through different ideas and layouts. My teammate focused on the mobile interface, while I concentrated on the desktop version. We collaborated to refine our concepts before developing low-fidelity wireframes in Figma, an industry-standard tool for digital wireframing and prototyping.
Mobile
Desktop
Wireframes (digital on Figma)
We established the basic structure and information architecture of the application.Our wireframes prioritized clear structure, informational organization, and an intuitive user flow.We reviewed and shared our designs with each other before presenting them to our supervisor for feedback.
Mobile
Desktop
FORMATIVE RESEARCH
Competitive Audit
To further refine our designs, I conducted a competitive audit of ComplianceGo, a similar stormwater compliance platform. By analyzing available demo and tutorial materials, I identified both strong design elements to incorporate and areas for improvement. This research informed our next design iteration.
DESIGN
Revised Wireframes and Branding
Revised Wireframes
Before moving into high-fidelity wireframes, I revised the structure using another round of low-fidelity wireframes based on the feedback from our supervisor and my competitive research.
Branding Guide
I developed a branding and typography guide to ensure visual consistency across the platform. The color scheme was derived from SmartComplAi’s existing logo, complemented by neutral grays for structural elements. I established button styles, ensuring clear differentiation between primary and secondary actions.
DESIGN
High-Fidelity Prototype
With an improved structure and branding elements in place, I created high-fidelity wireframes. I developed an interactive prototype in Figma, focusing on the Inspector user flow. This prototype provides a more detailed representation of the user experience, including some interaction elements and allows for navigational flow.
RESULTS
Reflection and Next Steps
To continue refining and expanding SmartComplAi’s UX/UI design, I would propose the following next steps:
-
Expand the prototype to include additional user views, such as construction companies, contractors, and administrators, as well as more features and interaction abilities.
-
Conduct usability testing with a representative group of users to evaluate design effectiveness and gather feedback.
-
Iterate on the design based on usability testing insights, improving interactions and user flow as needed.