Design Engineering

Overview

The project was long-term, greenfield web and native application build that was designed for users working through complex operational workflows. The web app was used primarily for admin based functions, while the native application was focused for users that were in the field. To see success, my team and I explored how the software could better support users as they moved through time-sensitive tasks in a demanding physical environment.

I worked across product design and implementation, translating operational needs into a focused interface while also considering the technical realities of building the experience.

The project was developed from the ground up using a spec-driven AI development workflow, with research and feedback informing the product as it evolved. By utilizing BMAD as the spec driven library, and Lovable (originally before we hit its accuracy limits, I was able to bring success to the clients with the support of a fantastic development team.

In the modern, changing world of AI, how can we work backwards from using a UI prototype to define our data models and functionality? 

My role as a Design Engineer

I owned the product design from early exploration through detailed interface design and contributed directly to implementation.

Rather than treating design and engineering as separate items, I used the constraints and capabilities of the implementation environment to inform the design itself. This project started at the precipice of AI-assisted development (before Windsurf even became Devin), so there were large growing-pains. Not only did I need to explore how to design an interface that served a complex problem, I also needed to learn how to use spec-driven development while keeping my knowledge of React and React Native grounded. My standard flow for this project (and most others) follow five steps.

Based on research with the appropriate stakeholders and users from the ultimate client, I worked alongside a fellow UX Designer (only at the start) to create a mockup in Lovable. With many AI mockup softwares, we immediately hit a ceiling. First, Lovable only exports code in a tailwind-style format (it may have changed since then). Second, the context that Lovable holds is not the same as humans. When I spend time creating design systems for clients, that becomes the universe in which the application is made of. For AI-assisted softwares like Lovable, the context changed often which led to frequent regression.

Because the product was being developed through a spec-driven AI workflow, the design process also involved translating visual and interaction decisions into increasingly precise specifications that could be implemented and evaluated quickly.

From idea to interface

Early exploration focused on reducing the amount of interpretation required from users while preserving the information necessary to make decisions. By utilizing the created prototype as the blueprint for the application, the team and I started to plot out how the system should work around the created product.

If you would like to explore this project in full, please navigate to the password-protected case study in the call to action below.

NOTE: The trust and discretion of the clients listed are of utmost importance to my practice so there are many things I cannot share publicly through this portfolio, which is why the image provided is blurred.