Converting an idea to a working prototype
It was a nice relaxing evening on a cold winter Sunday in London. I was listening to a lecture about Human-Centered Design on Coursera by Scott Klemmer, Associate Professor, Cognitive Science & Computer Science, University of California, San Diego. He mentioned about different tools and strategies that one can use and it’s impact while creating prototypes (see diagram below).
And that is when the light bulb in my head went off!
Having been a big fan of building quick prototypes and having created more than two dozen of prototypes in the last couple of years, I decided to take his teachings and overlay that with my thoughts and understanding based on my learnings.
Here is the synopsis of what I think are the 10 steps one takes to go from an idea to a working prototype:
1. Describe your idea in two sentences
Being able to explain an idea in short is the key to being able to communicate and share this across different stakeholders.
Expert-tip: Try to explain your entire idea in less than 30 seconds as if you are doing a pitch to someone in an elevator.
2. Storyboard your idea
An idea can be very abstract and story-boarding the idea helps to ensure the obvious weeds are cleaned out to decide if the idea is worth pursuing or, in some cases, it is worth actually dropping the idea.
Expert-tip: This is the perfect time to find your “ideal user”. Give that user a personality and ensure that you define him/ her as much as you can. This helps with the next step of drawing this user’s journey with your product.
3. Draw the user-journey
There is no easier way of describing something than being able to draw it out quickly on paper.
Expert-tip: Paper is your best friend! Scribble your way to world domination and DO NOT use fancy drawing tools.
4. Wireframe the user-journey (Optional)
At times, having wireframes help to communicate with different stakeholders and start getting first set of informal feedback from the users.
Expert-tip: Do this only if absolutely necessary. There are multiple different softwares available to help you out with this. https://balsamiq.com/ and http://wireframesketcher.com/ are couple of examples that can help with this.
5. Mock-up the user-interface
Wireframes help understand screen layouts while mockups transform those layouts into real-life assets. Having a good mock-up helps set expectations for the front-end development phase.
Expert-tip: There are couple of good (and FREE) tools that can take the mock-ups created and convert them into a mock-up user-story with clicks and user-interactions. http://www.invisionapp.com/ and https://marvelapp.com are couple of examples that can help with this. https://webflow.com/ can help to create mock-ups and also hosts it for you (Thanks to Dhilip Buddha and Yogesh for sharing)
6. Web-app Builders (Optional)
If you lack a front-end developer in your team, web-app builders can help get you started quickly. These are usually build on top of twitter bootstrap and you can use drag-n-drop and in the background, they create state HTML code which can be used to kick off development.
Expert-tip: Most of the free tools for this are sketchy while the paid ones are not worth the cost (in my humble opinion). http://www.layoutit.com/(FREE) and https://www.boottheme.com/ are couple of examples that can help with this.
7. Create a static webpage
This is the crux of the development which most of your users will see. No amount of design and back-end optimisations will be helpful if your user-interface is not easy for users to use.
Expert-tip: You can host your static webpage initially on free sites like heroku, GitHub pages, BitBucket cloud
8. Create a dynamic Webpage
In this step, you are moving away from putting all logic on front-end code and building a back-end infrastructure which will help scale this app horizontally. Think client-server.
Expert-tip: Do some research of what back-end technology you want to use do build it. Java, Scala, NodeJS, Python are some of the examples that you might want to consider
9. Get database connectivity
Databases help reduce chances of data-loss when back-end servers face outages. Also, the rate of access of data is much quicker in databases so, it’s always a good idea to move to using databases when you are dealing with big amounts of data.
Expert-tip: There are multiple options to consider when contemplating about databases. Think SQL v/s NoSQL to get started off. At times, you need neither and can get started off with something like https://www.firebase.com/
10. Containers/ Virtualise everything
To ensure that your product is always up and running, you can either create multiple containers and run them across different data-centres or everything on the back-end is virtualised to ensure that based on system resources, automated back-end servers are spun up to ensure highest availability.
Expert-tip: Dockers and OpenStack are some of the example technologies that can help to do containerisation and virtualisation respectively.
