Design as a Journey
Product Reincarnation Via Papers Prototypes
by Adi Hillel
Like any other startup with an uncompromising mission to gain product/market fit, Hubitus was — and still is — subjected to endless changes and transformations. We always knew what we wanted to do — help people (and ourselves) to be more productive and creative, but how to do it, that’s a totally different question.
Much to our surprise, it was our non-techie artistic background that helped us visualize our ideas with minimum resources. We started seeing design not only as an aesthetic actualization of a future product or a tangible user interface on which we can run tests, but also as a method to free our minds, construct our thoughts and communicate our perceptions to other team members, and later to our users. Design with a capital D.
Since we have no knowledge in Photoshop or any other design software for that matter, my partner Ella and I were forced to use pen and paper to draw all our prototypes. While we are not great artists, sketching out our thoughts on blank paper helped us draw quick conclusions and iterate if necessary, long before we hired designers.
Looking back on those hand-made prototypes we can easily tell the story of our product development, from a roughly bad idea into a running beta. We work in cycles: first we paper-prototype our obscure concepts, then we move on to UX/UI wireframes and only then we turn to creating a designed version of the product. Of course it doesn’t take long before we find ourselves sketching once again, a little wiser than we were the last time around.
When we first started, long before Hubitus got its name, we wanted to create a web-based editor for writers, that would put an end to the pain of procrastination. Following this concept we drew a distraction-free editor that interacts with the writer to fight back the well-known paralysis evoked by the empty page.
This is what we drew:
We presented this prototype to a group of people and created an effect of automation by sliding transparent sheets one over the other. The reactions were encouraging, so we moved forward and created a wireframe with the fastest-thinking UX/UI designer in the world — Ben Tytonovich, during a 48 hour hackathon. This was the result:
The blue and red lines, by the way, were not an aesthetic choice but rather a UX one. Once a writer chose the number of words she wanted to write, the app would present her with a finite number of lines and adjust the length of the page according to her chosen goal. The red margin was our spin-off on a timer, it crawled down the lines as time passed by.
It didn’t take us long to realize that although creating a writing wizard was kind of nice, it wasn’t what we actually intended to do. We wanted to develop a social word-processor that would turn one’s writing into a daily habit by providing social incentives given by other writers who were using the app.
Before moving forward, we had to check our hypothesis and discover if the virtual presence of the writer opposite you could indeed affect one’s productivity. To find this out, we built the simplest MVP we could think of, without one line of code; we used Microsoft Word and Skype, and recruited five writers to test it.
The experiment proved itself. The writers who wrote opposite us in live video reported a surprising rise in their self-discipline brought on by the knowledge that someone else was watching them and writing beside them.
With this insight, we listed the core features of our desired product and conducted the “6-up” exercise, in which we came up with six different user interfaces, each one emphasizing a different feature and thus, a different key value. But this time we decided to use ready-made objects to represent the various functions of our future website, so that we could easily move them across the screen, or to be more accurate, across our living room floor.
It looked like this:
Next, we went back to the wireframes. This time we sat down with the super-creative UX/UI designer Shantal Vazanza, and created wireframes using PowerPoint.
… and cardboard boxes we found on the street.
Only when all the elements made sense and sat in the right place we moved on to the graphic design…
For the first time, we could not only picture the product in our minds, we could actually see it and show it to others. Hubitus, which until this very moment could have been anything, became something. It was a symbol of what we chose not to do, rather than what we chose to actually do. It felt good and bad at the same time. It was probably me, growing as an entrepreneur, realizing that the construction of this dream was the deconstruction of all the others.
Three months later, we had a live alpha of the product (coming soon: a blog post about the effects of sleep deprivation on CTO’s). It was time to test the product and we were extremely excited to see how it worked. We chose 30 writers (published and aspiring authors, MA students, scriptwriters and bloggers), and ran a usability test on each and every one of them. The results were depressing, but we learned a lot. To keep a long story short — none of our alpha testers wanted to use our editor, they all preferred using their own writing software!
I remember that hot summer night. Three co-founders, sitting in the dark on the roof of our accelerator building, ready to give up. Until Ella grabbed a pen and a notebook, and re-designed the product, getting rid of the editor and leaving the social feature as a stand alone feature. We looked at what was left of our “grand product”, then ran back inside, screaming in the empty corridors of the 4th floor.
With no editor at all, Hubitus was transformed into a narrow pop up window that occupied one third of the screen and allowed users to work on their native writing surface while surrounded by silent live streaming of the people opposite them. It felt obscurely funny, after all Hubitus was meant to be a work-oriented framework, and now it had suddenly become an actual frame, one that co-exists on the borders of your work.
But… traumatized by our recent usability tests (or by the fact that we waited so long until we ran them), we decided that this time we’d start with our users, and only then move to UX and design. So we created the ugliest and most unfriendly version of what we thought was our unique value proposition, and asked our 30 alpha testers to try it for a period of two weeks. We called it The Hubitus Summer Camp.
This time, it went extremely well. We learned that some of our users (those who could deal with the poor user experience) felt less isolated and more productive when working in Hubitus, thanks to the human framework and the community they were now part of. Stripping our product down to its leanest version, helped us focus. We knew what problems we wanted to solve and understood the challenges ahead of us thanks to the feedback we got. Now it was time to return to the sketch board, and develop a product from scratch.
So I flew to New-York, to join our amazingly talented UX/UI & designer, Alizarin Waissberg, for a three week marathon that ended with more than fifty slides of our product UX.
And boy, was it intense. We talked for hours, trying to put the exact experience we were looking for into words, and visually forecast our future vision. Every breakthrough Alizarin made, was then sent to my partners back home for their insights and approval. I had never been to NYC, this was my first visit to the USA, everything was foreign and new, but the only thing that interested me was working with Alizarin, who also hosted me in her home for the whole period (what an obsessive guest I probably was!).
After this hard work, when all we could see were pop ups, popping up in our dreams (or nightmares), we were ready to start with the GUI. No more grey scale for us, it’s graphic design time now. At last!
But frankly, it was only the beginning.
Alizarin asked us to give her inspirational references to work with. So we sent her more than 60 pictures and websites with graphic elements that literally contradicted each other. We knew that we would recognize it when we saw it, but we didn’t know how to imagine it, before we saw something concrete in front of our eyes. So what Alizarin did was to show us three raw variations, only to understand from our immediate reaction what worked for us, and what didn’t. It was a great lesson indeed — when you’re stuck, produce something that can be your reference for what to do and what to avoid.
At this point in time I’d already returned to Tel-Aviv, so the entire process was long distance, through Gmail, Skype and Google Drive. Step by step, with a big blue ocean between us, we invented our own language — the visual vocabulary and interface grammar. Gradually the product gained texture, color, font and look & feel. With this syntax, Alizarin refined the mock-ups, until it came to life.
Here are three variations of the same concept. The third one is what the actual beta looks like (as you can see here), with real users and all. They seem happy don’t they?(Coming soon: a blog post about the delusional CEO).
Only then, after we had refined our product, we went back to our landing page, and rebuilt it. Down below is the landing page that we released during the year we were searching and experimenting with what was later to become our product. Its whole purpose was to validate the need we wanted to answer by collecting emails of potential users who identified with the pain. There was no solution proposition, because we didn’t know what it was yet.
This is what it looked like:
But now, our new landing page had a different objective - conversion.
Here’s the wireframe for the new landing page:
When we reached the design stage we knew we needed to depict the solitude of creative life in the digital age. These were Alizarin’s initial interpretations:
It was a good start! Once again Alizarin the Great helped us focus and gave some great copywriting concepts too, but we wanted to take it one step further. Ella and I realized we weren’t focused enough in our thoughts to give a clear picture of what we were looking for, so once again we pulled out our stationary suitcase, and started paper-prototyping on the kitchen floor.
This is where we got:
The idea was to scroll down and see the backgrounds change while remaining with the illustrated back of the anonymous writer. Every background was meant to symbolize a different mindset, value proposition and call to action. So that’s what Alizarin got, and this is what we got in return:
This is where we stand today. In its third round, Hubitus has successfully evolved from a vague concept into a breathing product, one that you can touch and play with. As such, it still has many flaws and glitches (for example: our landing page is still not responsive to all devices or screen sizes), and we encounter plenty of UX/UI lapses on a daily basis. New users from Chicago, Beijing, Cape Town and Paris enter the hub, and still don’t fully understand what it is that we’re trying to do, and what their role is in this game.
Their questions and feedback, together with an analysis of their flow and activation process, help us understand what needs to be fixed or changed.
If you wish to take a look and share your insights with us, you are more than welcome :)
Strange, but even though we have traveled so long and far, it still feels like the beginning of the journey. And I can only wish we will never see the end.