Pros and Cons of Rapid Prototyping with HTML 5 & Bootstrap

We are currently redesigning a large education website, and after conducting an extensive user research and auditing phase, we're at the point of the Sketching/Wire-framing and Prototyping.

Our challenge was to find a way to iterate on the design quickly and be able to user test on multiple devices without creating massive amounts of rework. We decided that Axure wasn’t going to be the right fit for this project and that we’d need a new approach that has the flexibility to scale to the size of this project.

For the TLDR’s: The pros and cons summary

Pros

• HTML = more flexible to make changes than Axure for this context
• Responsive using bootstrap classes
• Faster to change content
• Don’t get tempted by styling
• A real webpage that could be A/B tested

Cons

• It’s hard to “go off the plan” and try new ideas
• It can be a time-sink when styling bugs appear
• Repetitive work writing code is slower than drawing a box in Axure

Our Approach for this project

1. Writing real content first. List everything that is needed from an Information Architecture point-of-view.
2. Rapid sketching
3. Writing HTML and applying bootstrap styling
4. Get feedback from the team and iterate the ideas.

1. Writing real content

With all of our projects we avoid dummy text, because design is communication and if your design doesn’t have real content it cannot solve problems. Always use real content whenever possible.

Starting with content first ensures that you answer all of the questions a user has. It helps you avoid missing crucial things.

Start with the basics, when writing or establishing content:

• What's in it for me (as the user/consumer)
• What is it, Who is it for, Why should I buy it, Where can I use it, When can I use it, How much, etc.
• Address potential user questions and concerns “I don’t want to commit to purchasing another subscription..."

2. Rapid Sketching

So we decided to put more detail into our sketches.

Why: This makes it much quicker to evaluate your designs and decide the appropriate direction. We ran time-boxed sketches to generate different ideas quickly.

• 4 sketches in 5 minutes
• 2 sketches in 5 minutes
• 1 sketch in 5 minutes

At the end of the session, we had 14 different sketches that had converged our ideas down two solid ideas that we critiqued by both of us.

3. HTML Prototyping

I tried a few online applications such as http://brix.io/ which looked promising but I ended up using Sublime (HTML/Text editor) and the bootstrap spec-sheet for all styling. Because the sketches were so detailed, I was able to build them to the responsive grid and move really fast to build out the pages. But as I’ve put in the cons, it’s difficult to try complex ideas on the fly.

4. Feedback often, Feedback Fast

This best piece of advice I can give is one which was most helpful to me: get feedback early, and get feedback often.

We can all get too close to a project or idea, pitching your design to the team has helped me identify the areas that need to be worked on.

A few questions you can ask your team:

• What works and what doesn’t work?
• Does the content make sense, is anything missing?
• What needs to be improved?
  
  

So how did it go?

This project has definitely benefited from Rapid HTML prototyping but I think it's important not to get stuck on small details. Try to think about the big picture, and I really recommend trying this approach on a project that is appropriate.

***

Want to try using different available rapid prototyping tools? Check out our updated list of recommendations.

Want help with your next web or software project? Get in touch.