HOME    EXPERIENCE    ABOUT ME    CONTACT
02. Prototyping design and development
Goal
Initial prototyping involves building quickly and setting up the build for future scaling, particularly using clearly defined documentation and component libraries

Process
It is possible to test everything with a simple pen and paper analogue prototype, but I find the true validation of an idea comes form having a higher fidelity prototype.

Building a prototype ultimately depends on the problem, what the solution requires, and experience to anticipate what a ‘good’ prototype looks like. Specifically, in our age of AI where the use of AI itself is the product, often times I find that more time is required to refine the AI output as the solution itself (via system prompts, API setup, finding the right model) and to build the environment around it (functions like save, buttons, text edit, user flows).

Learnings
  • Being clear and defining what is a ‘sufficient enough’ MVP to ship to market
  • It is a good idea to define a library of core components early. This allows future scalability to be easier – just re-use and run with the AI


1) Basic brand kit and components library to be re-used in Figma and to be a reference point for developers
2) Creating screens with annotations and generating ASCII wireframes using HTML/CSS specific prompts for testing purposes and minimise guesswork between myself and the developer
3) Early working version of the app – not fancy, but certainly MVP ready!  



ℹ️ Pro Tip: want to ensure early UI consistency without burning tokens?
Ask it to generate a ASCII wireframe of the UI based on your prompt so you can make edits easily before it builds. I’d recommend learning basic CSS to produce more guided UI prompting, particularly: containers, margins, paddings, divs and flexboxes.