Solidify

Sit back, we want to tell you a true story about how we had to scramble in the middle of a technological crisis.

It was an average day at ZURB, designers and engineers were hacking away. On this day, we were conducting user testing for a client project. No big deal, we do them all the time. We were well-prepared, our static designs were all uploaded in Keynote. Nothing could go wrong.

Minutes before our tester showed up, Keynote crashed. Nothing we did could bring it back up to life. We were boned, so we took a chance and slammed all of our images into Solidify, a web app for creating clickable prototypes from mockups or sketches. But we were in the middle of development and it really wasn't finished. "What the hell?" we thought, and did the user test anyway.

Best of all, it worked so well that it fooled Matt, our lead engineer, who was driving Solidify's development. He took the test and didn't realize he was using our app. It was the Aha moment when we realized Solidify was pretty hot. Suddenly, everyone at ZURB saw the value in Solidify and it sparked a fire for us to get it done as fast as possible.

The Mysteries of Prototypes

Prototyping is a very big deal for us at ZURB. We build them so we can test drive our designs, seeing what works and what doesn't. But static visual designs aren't the best way to see how people will actually interact with them.

For years, designers used paper prototyping to get around that. We've even done it ourselves, bringing our designs to life by simply flipping through pages. While paper prototyping is fun, it's not a clickable prototype — the next best thing to coding up a product.

Creating a clickable prototype, however, is a pain in the ass. Coding up a prototype in static code takes a lot of time and effort while hacking one in Keynote isn't any better. What we needed was an effortless way to create a clickable prototype from nothing more than a few images. So we decided to build it ourselves.

Even in the early sketches, we were trying to figure out how people would upload their mockups or sketches. Solidify had to be deadly simple to upload images and link them together. We used sketching to figure out the core pieces of Solidify — how to drag and drop images, setting up the prototype, and collecting the data from the user tests. Once we did one set of sketches, we did even more sketching.

After cranking out dozens of sketches, we jumped right into the front-end development like we did with Verify , skipping the hi-fi wireframes all together. After all, the majority of the leg work had already been done with Solidify's predecessors.

The Designer's Analytics Union

Creating clickable prototypes wasn't the only thing we wanted to do with Solidify. We also wanted people to gather analytics. By analyzing quantitative data on prototypes, people can send them onto a larger audience and quickly see the overall trends.

This was a problem we ran into ourselves when revamping Notable. We wanted to test if people would understand how to add a new teammate to their account. We didn't spend too much time creating a clickable prototype, instead all we had were static wireframes. Like we said, not the best way to figure out if your flows work.

Once users created a prototype, they had to have the choice to specify a directive or task for test takers to complete. They also had to monitor the analytics behind the results as they occurred in real time.

As results come in, the report page summarizes all the test information collected from users. An overall score shows the percentage of people that were able to accomplish the directive. It also shows the average number of clicks it took for testers to accomplish the directive, as well as the average time it took everyone to fulfill the task. Check out this example:

We also had to make it possible to drill down into each respondent and see the specific click flow they took to accomplish the task.

Solidify City

The day we released Solidify The Next Web and Read Write Web didn't waste anytime and did a write up. While Solidify isn't available yet for widespread release, we're looking forward to getting feedback from the early adopters we've let in.