Hack your design sprint: wireframes to prototype in under 5 minutes
TL;DR: show me the tutorial video.
Today, in 2019, sketching by hand is still the most common method for brainstorming and ideation when working on a new website or a mobile app. Even Google advocates for paper prototyping to quickly visualize ideas.

This ideation process is often referred to as design sprint or product discovery depending on the organization. Google Ventures (GV), the venture capital arm of Alphabet has laid down the process as a 5 days sprint that is today implemented in various types of companies including startups, web design agencies, and large enterprises. Design sprints come in different flavors as teams around the world have adapted GV’s recommendations but the general principles remain the same and can be summarized in the figure below.

The design sprint is a fantastic tool to ensure that one is building a solution to a genuine problem for the right audience. One of the most important goal of this process is the delivery of a high-fidelity interactive prototype ready to present to an end user. The following quote from IDEO emphasize extremely well how important a prototype is to the rest of the workflow:
“If a picture is worth a thousand words, a prototype is worth a thousand meetings”
However, a 5 days design sprint is not a lot of time to truly explore the space of possible solutions and here is the crazy thing:
“By Wednesday morning, you and your team will have a stack of solutions. That’s great, but it’s also a problem. You can’t prototype and test them all.”
That’s insane! Right?! Why don’t we have any way to quickly test and validate not only 1 idea, but 5, 10, or even 20 ideas. How are we certain that the solution we decide to prototype is actually the best one? At that point in the workflow, we are unlikely to have enough data points to make an informed decision. We basically have to pick one idea that we will present to a target customer and the rest is thrown in the trash.
The problem is that it takes way too much time to transform low-fidelity sketches to a high-fidelity prototype (i.e. high-fidelity: realistic, looks like a real app). Even with the current best available options in the market, the transition from hand-drawn wireframes to a high-fidelity prototype will consist of manually recreating user interfaces in a design editor by drag-and-dropping components. This means that we have to interrupt our brainstorming session, someone would need to go back to their laptop to do this manual work, and then gather the entire team again for a follow-up meeting to discuss the result. There is currently no way for teams to interactively test and validate their ideas in real time. Or at least there wasn’t! 😉
We actually built Uizard to solve exactly that problem!
Our technology uses computer vision and machine learning to transform wireframe images to high-fidelity mockups automatically. It has a built-in style guide system to customize components and a prototype engine to build interactive multi-screens user flows. It can export to Sketch files containing ready-to-use symbols, and to front-end code such as HTML/CSS.

In order to quantify exactly how much time Uizard can save, we decided to conduct the following study. We hired online freelancers (on freelancer.com and fiverr.com) to build a high-fidelity prototype from the 3 wireframes below.

The requirements were:
• The prototype should be high-fidelity
• The content images could be anything
• The style could be anything
• The textual content could be anything
• They could use any tool / method they want
The freelancers were asked to record the time it took to create the prototype for reporting purposes only; it didn’t affect their compensation as they were paid on a project basis.

We were interested in two things. First, to measure how long it would take a designer to re-create a “fake” high-fidelity prototype in a design tool using the components of their choice. Second, to measure how long it would take a front-end developer to implement a “real” high-fidelity prototype with front-end code.
As shown in the result tables below, we needed to remove outliers to get a better picture of the time windows. If we discard outliers, it would take a UI/UX designer an average of 1 hour and 8 minutes to create a high-fidelity prototype, and it would take a front-end developer 1 hour and 54 minutes. Using Uizard, it would only take 2 minutes and 50 seconds to get both a “fake” high-fidelity prototype and “real” front-end code. That’s a 24 times speed increase on average! 😍
This was a very simple 3 screens prototype, imagine how much time can be saved for a prototype made of 10 or even 20 different screens.

Uizard is currently in private Beta and our amazing early adopters have been able to significantly boost their design sprints by either containing the process in a couple of days or by keeping the 5 days format with the possibility to go through far more tests and iterations. Let’s hack the design sprint! 🚀
Here is a tutorial video demonstrating the magic of Uizard in action.
As nicely stated by Ben Wilkins, Design Lead at Airbnb:
“The time required to test an idea should be zero”