This is the ⚡️ fastest ⚡️ way to create prototypes for user testing!
As a front-end UX developer, I’ve seen every tool imaginable, and in my opinion, this is the fastest way to create working prototypes…
When building prototypes the most important thing is not building the prototype but getting validation from your target audience. With that validation, you can start expanding and pivoting towards the best solution possible. If you have a rapid method of building prototypes you can find your market validation in no time.
If at any point you have a question about a use case in one of these methods, don’t hesitate to contact me 🙋🏻♂️ via LinkedIn. I am eager to let you know more about my ways of working.
Let’s cut to the chase!!
This is what I do when I need…
A. ASAP validation (⏱ 4 hours)
When I only have half a day, I use a landing page generator (e.g. Instapage) to build a website. It’s a useful tool for creating websites which contain the essence of the solution I’m providing. I include the landing page with a call-to-action to a subscription list. Based on the conversion rate of the website, I can see how interested people are in the solution. Thus giving the validation I need to continue, improve or abort the project.
These landing page generators often provide great templates. Which leave me with little to no work left for making sure a website looks good (which often takes up most of the work). As a developer, I can still manipulate some elements of the page if necessary, giving me almost full control via raw scripting and minimal work.
B. Create advanced prototypes (⏱ 1 day)
Coding designed end products can be a cumbersome process. Therefore, when I need to move fast, I start by choosing a format in which I want to validate (For example webpages with an iPhone 8 dimension). I then use a graphics editor (Sketch) to design mockups. Most of the time, I find inspiration in online resources which I then use as a baseline for my own projects e.g. button styles, list styles,…
The combination of plugins and templates will allow you to create mockups in no time. Having done this several times already for 0smosis ventures I have a bunch of resources and templates I have both gathered and created over time. This lets me prototype even faster as I know where to find previously used resources.
Now for the interesting part…
What if you want to integrate interactive elements, such as sliders, input fields, variable data, …?
As both a designer and a developer, the next trick is very useful to me, and can perfectly be done by a team of designers and developers.
Again, I’ve begun by creating mockups in a predefined format, giving me a perfect representation of what I want the interface to look like. But still leaving everything static. After thinking about which elements should be dynamic. I export the parts which are static as vector graphic paths, leaving out the dynamic parts.
I then import the graphics code paths into a newly created code project. The good thing about using graphic code paths is that exported text will still be treated as text and can be manipulated in anyway I want. Between these parts of vector graphic code paths I insert the coded input forms, input fields, etc….
Because I’ve predefined a format (being iPhone 8 in this example) I can code everything in a fixed way (no screen adjustments). Letting me work even faster.
If you combine these dynamic coded parts with fixed design, you can easily create a working prototype, which is ready to be validated, in no time.
Some handy tips;
- Use mockup libraries of the UI library you’re using in your code. This helps to create the same style throughout your project containing both the code as the design
- If you don’t only want to test in iPhone 8 format you can code your view in a way that your app itself is centered in a small box inside your window. This way your project can be shown even on desktop screens.
C. Create fully working applications as fast as possible (⏱ 2–3 days)
This one will take some time as it purely involves coding, but the thing I’ve noticed developing front-end applications for some time now, is that there are a lot of things that keep coming back, no matter the project I’m working on.
I’ve thus created a boilerplate containing a framework (Angular) inserted it with a theme containing variables for easy adjustment, and a UI library (Material) so I don’t have to create every element from the ground up.
Every time an advanced prototype has to be created, I call upon this boilerplate. Which saves me at least an hour of work.
As for the rest, I am still looking for ways to increase my efficiency but I guess it mostly depends on best practices.
What now?
💁🏻♂️ If you’ve learned anything or have anything to add about your own ways of working, please comment on my LinkedIn post.
Thanks for reading!
