(First published on Medium. Follow me there @mhannus)
We are knee deep in development of the core platform for Bound, my new company focused on reimagining the user experience for prose fiction. I thought I would share how we went from concept to the first line of code. Bound has not raised any capital so over the last year I needed to get the most out of limited resources and tools before I could justify investing real money into development.
During my time in gaming, I too often saw costs grow as the team expanded to try to get an increasingly higher fidelity prototype without maximizing what could be done with simple tools. A very expensive prototyping process naturally leads to a desire to cut the prototyping process short before some basic design questions have really been answered.
It can be difficult for someone that is not a designer or developer to keep the cost of design and prototyping as low over multiple iterations.
So how did I do this for Bound?
Black Screen Prototyping
When I first started thinking about Bound, I borrowed the idea of “black screen prototyping” from a game studio I had worked with in the early days of IOS mobile game development. We called it black screen prototyping because, well, the screen remains off. The idea is to try to nail down how the experience of using the appshould feel as you go about your day and encounter times in which you’d imagine using the app. This helps define some easy use cases (and thus design principles) for the app very early on before you devout expensive resources. I was basically trying to answer the important questions like: What I am I designing? For whom? Why? This was incredibly useful to me and cost me zero.
How does black screen prototyping work? You basically pretend the app exists. Then throughout the day and weeks that follow, you keep track of when you thought about using the app (e.g. arrived early to a meeting and have to kill 10 minutes) and the user stories that are associated with the moment. Pretty quickly you’ll discover how you want it to feel and discover when you might actually be using the app in real life.
Sketching the First Screens
Once I had an a good idea of how I wanted the experience to feel, I was ready to sketch a few screens on paper. In fact, it was very easy since I had a mental model in my head of exactly how I had been using the yet-to-be-designed app. I started with paper and pencil, and just a couple of key screens. It was actually very useful to focus in on just the core screen and not all the extra features I had brewing in my head. My focus became trying to design something that could repeatably produce a ‘strongly positive feeling at a specific moment.’ Again the concept of ‘desiging moments’ was something I had learned from some great game designers. The benefit of having simple paper-and-pencil sketches was that I could now start to share my thoughts with others and have some visual aides for them as I narrated a vision for the experience. Plus it is easy to annotate and make changes on the fly.
(Note: I kept it simple and cheap. I chose graph paper and loose leaf paper over notebooks or apps. I think it makes it more disposable. That let my mind experiment more freely.)
Keeping Track of Reference Apps
After I was pretty excited and fairly sure I was onto something interesting enough to pursue, I wanted to get a sense of similar things others had tried. I began my hunt for similar apps. Besides getting a good idea of the competitive landscape for Bound, I was able to get into the heads of talented designers. I enjoyed discovering what they had tried. I started taking screenshots of elements from various apps that I thought could serve in the design of Bound. I quickly got to know the top apps in my target categories and keywords. A simple Google doc helped keep track of it all.
Full Paper Prototype
Armed with a clear vision, some paper sketches, and guerilla market intelligence, it was time to start to put together a full wireframe of the app. I had used a number of software tools for this in the past, but I chose to still stick to paper. It was working for me. There was still not a lot of thought being given to visual design. I was really trying to map out some basic workflows at this point. I wanted speed with little to no cost.
Getting Early Feedback
With some basic wireframes complete, I could actually start to pitch the concept — complete with ugly workflows to key people that I thought represented Bound’s audience. There is really nothing better (for design or confidence) than getting feedback from people that you respect AND that represent your potential customers, partners, and investors. Getting valuable feedback early (still no code or designs locked in) helped answer some pretty specific questions before any hard money had been spent.
A Proper Prototype
It started to get a little less exciting running around with a stack of hand-drawn screens and wireframes. I can pitch an idea pretty well and people now wanted a demo! It was finally time to build a proper first prototype that could be demoed on my phone. I spent a lot of time (maybe too much) trying out various prototyping tools. I really felt I needed to be the one building the prototype. Tons of options exist out there. I ended up going with Proto.io (Proto.io) and I am very happy with that decision. It’s powerful and easy to use. Pretty quickly I had a great looking prototype.
Getting Some Design Help
With a skeleton of a prototype, it was time to make it look good. I was fortunate to have a friend, Jon Nowinski, jump in to lead the effort. We worked with a terrific team at Sidebench in Los Angeles to help flush out the design further, build out complete workflows, and do some early user testing.
We ended up with a process that allowed us the necessary time to get a killer high fidelity prototype with very little cost. We learned you can do a lot with a little these days. So if you are building anything, keep your costs low and get as much feedback as early as you can!
**Early Access Coming**
We now have a very talented team based in San Francisco working on development. Keeping our prototyping low-tech and low-cost allowed for a very small team to iterate efficiently as we got meaningful feedback from real users along the way. We are planning our early access for May 2016, and would love you to join the next leg of our journey.