15 March 2024
With the current state of Large Language Models (LLMs) and its subcategory dedicated to code generation it is the perfect time to step up the game and enhance your role by utilizing the technology around you. I feel like this article targets a very specific yet somehow common situation in a life of a designer. Working on a project with a tight budget, with a little time to truly study and improve the initial design based on a data collected from the end users.
In this article you will learn why choosing the new method of prototyping has a huge benefit for the project as well as your career.
Measuring the success of a design has always been the most exciting part of my job. In a profession where some people still believe it is all about making it look beautiful the reality is that bringing the science and statistics behind design decisions is the only way to secure the success of a project. This is even more true when we are fixing user experience of an existing products.
For as long as I remember the industry standard is creating the layout in your favorite tool and asking a few people around if they understand the flow and or how do they feel about the experience. This approach called corridor testing is by far the cheapest and sometimes the only way designers are able to test their decisions. Obviously this method has flaws and apart from spotting obvious errors it will always end up generating polluted data. It is not a designer choice, it is life and the world we live in. We need to go fast and deliver on time. However there are ways to utilize the available time for testing in a more efficient way.
To get truly valuable feedback from users, we need to go beyond low-fidelity prototypes. Why? Because when we create something closer to the final product, we eliminate the cognitive load and the need to constantly explain that it's 'just a prototype' or make excuses for its rough edges. This way, users can focus on the experience itself!
Opening a text editor right after you are done with your work in Figma is probably the worst nightmare for designers. At the same time they desire to turn their work into working prototype as soon as possible. The difference between few years ago and now is that you don't have to learn a JavaScript framework or coding at all. The new digital coworker - code generator is here to do it for you. Learning how to talk (prompt) takes some time before you get the result you need. Getting used to reading code and finally modifying it to achieve the desired outcome is also time consuming. But the models evolve rapidly and the results are more accurate with each version released. Take a look at current state of Code Models Leaderboard to see which models will be best for your technology: Can be found on Hugging Face Space by bigcode. If it's the first time you going to try LLM just use Gemini or Chat-GPT.
Ok let's talk about the elephant in the room..how long will it take to convert my design into a working prototype? Well obviously it depends if you want to build one flow or a complex ERP system with multiple user-roles. So scoping your prototype should reflect your current understanding of web development as well. Your first prototype will take much longer than the second and so on. Pick a flow that has the most amount of risk associated with users interacting with. And try to build it using Figma dev mode, your LLM of choice and consult with developers at work. It is difficult to answer how quickly you will learn but I can say with confidence that at one point it will get easier and the efficiency of building it this way will be similar to using other advanced prototyping tools like Axure, Origami Studio, Framer etc.
I think it is best to use something your colleagues at work knows well and could help if needed but I picked the most dominant and popular technologies (the more code written in a technology, the better the code-generation will be since it was trained on that data). So my go to is React for the frontend, NodeJS for the backend, data structure based on the native JavaScript Map stored in SQLite format. If you are completely new to this just throw those tech names in your chat input and add that you want to build a prototype using this stack.
By building this type of prototypes you can inject analytics, make it scalable and gather data remotely and simultaneously. You are creating an interactive experience that is going to be used on multiple different platforms and screen-sizes. So you are improving your interaction design and responsive layout skills. Developing the prototype yourself ultimately gets you a solid understanding of the whole process and what happens after design hand-off. It enables new and better discussions with the frontend and backend engineers while building the actual product later on. Another benefit is the higher value of your deliverables so you can stand out from the crowd.
This transition might feel challenging at first, but remember - you can still add immense value to projects with your design expertise! And if you've always loved the puzzle of prototyping, embracing code-based prototyping opens a whole new world of possibilities.
Personally, I've always been passionate about development, and using LLMs has taken that passion to a whole new level. Now, I'm constantly learning even more about algorithms and programming patterns. I hope you'll find the same excitement and satisfaction in expanding your skillset!