In this progress report I want to tell you about the approach we’ve taken to design the prototype we’re working on:
We are about 50% done with the first prototype of Keeping.com. We had to take a decision on how we were going to go about building it. We initially wanted to follow the generally accepted process of:
A) creating a set of low fidelity mockups
B) refining these to create medium fidelity mockups
C) then creating the user interface
D) and finally creating a prototype in HTML/CSS.
What we realised was that the process of going from step B to step D was going to take us between 50 and 100 hours of work before we could show anything tangible.
So instead we decided to take the approach mentioned in this article: Ditch Traditional Wireframe and we ‘ditched’ steps B and C and jumped directly to step D. So far, I have been extremely satisfied by this approach:
- We are saving time: once we validate the use of a specific element we can code it and use it in the final deliverable.
- People’s feedback is more accurate when your prototype actually looks like the real thing: my experience is that when you purposely show a black and white mockup to a group of people, at least one person will suggest adding colour.
- You save money: there’s no need to use any proprietary software.
If you find yourself in a similar situation, I’d suggest you discuss this approach with your team. Directly prototyping in HTML/CSS has the potential to save you time and money.