Coded Prototypes and Utilising localStorage for Increased Versatility

The belief that “Designers should learn to code” isn’t one I necessarily subscribe to, but I do feel that my background as a Frontend Developer has helped me with my design process - especially prototyping. Here I’ll talk about how I find coding prototypes often more efficient than using tools like Figma and how using localStorage can make them more dynamic.

Why coded prototypes?

When usability testing our designs, we introduce the task and explain that it’s a prototype and that “some links may not work”. We can find ourselves essentially nudging users down a set, linear path - let’s be honest, the happy path. But what happens in a scenario where it’s vital that you can test multiple options and display accurate details?

For example, if there’s a form as part of the journey, we might have to create 2 screens, one with empty fields and one with pre-filled content - “Just tap anywhere and it’ll fill in the form”. If the form makes up a core part of the experience, this can mean that the usability testing is almost redundant.

Whilst I don’t think coded prototypes should be the first prototype, I do feel they can be incredibly valuable, particularly when the understanding of their choices is crucial. I personally find coded prototypes quicker to iterate on - but part of that is because I have a Web Development background. It can also help if you have a Design System to work from, but coded prototypes don’t need to inherit your company’s look and feel, they can still be low fidelity.

I’m aware that tools like Figma have a come a long way with new features like variables and there are tools that cater for interactive form inputs, but I found the idea of localStorage intriguing so decided to explore the option - and it was fun!

Why localStorage?

Essentially what localStorage allows us to do is set and get data that is stored on the users device locally, a bit like a Cookie. We can set default values and also update them through various different ways, such as a click, submit or page load. Whilst Figma Variables allows us to do similar to this - in my experience, prototypes in Figma have become incredibly slow when it starts having to store this data. When we have the ability to allows users in usability testing to choose options rather than force them down a linear journey, we are able to learn a lot more from their behaviours.

A demonstration

Coming soon.

Resources

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage