Using Bootstrap for rapid prototyping

This winter, my team and I took on a project where the thing that made the most sense for us to do was build a new application. As the UX Analyst on the project, it was my job to facilitate conversations around how we would implement the capabilities that our stakeholders needed us to deliver. I'd be lying if I said that this process was painless—there was some early flailing on my part as I tried different ways to share and test my early ideas.

My go-to tool when I have an idea that I want to talk with folks about is a white board #clicheUXnerd. Standing and drawing on a wall-like thing and talking is a good outlet for my excitement. So, when it was time to envision the new app in January, I took to the board!

When I met around this board with the technical leads on the project, I was disappointed to learn that what felt like an explosion of ideas to me came across as an overblown, too-big, unfeasible mess of scrawl. It was deeply frustrating to me to be shot down when I was so excited.

One of the things I thought I was conveying to my teammates by using the whiteboard was that these ideas were unfinished, pliable, and imperfect. I thought I was inviting their collaboration. Instead, they reacted in a way that indicated they were struggling to connect with my ideas and maybe felt alienated by my excitement.

I had an idea. Maybe the whiteboard wasn't the best way for me to collaborate with these team members.

That whiteboard meeting helped me see that I needed to bring my ideas down to earth so that I could collaborate with the tech leads on my team. I decided to try some rapid prototyping with Bootstrap, a HTML and CSS framework built and maintained by Twitter.

Twitter says this: "Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web." Honestly, I think they're being pretty down to earth. I would argue that Bootstrap, with its unoffensive aesthetic and semantic, class-based structure, did something significant for web development (I'll save the dissertation, tho). Bootstrap is easy to use because it's a well-documented and maintained framework. There are tons of third-party resources available for it, to boot. It's easy to make something from nothing fast with Bootstrap.

So, I took an afternoon and hunkered down with jsfiddle, some source documents that I collected from users in my research, and made some prototypes.

A screenshot of a prototype illustrating one way that Course Information and Assessment Comments could be displayed

Making rapid prototypes with Bootstrap to show how some views of the interface might look helped me focus my ideas during subsequent conversations with my teammates. By making some initial design assets that were concrete enough I could communicate ideas in a manner that others could connect with and respond to with their own ideas. Likewise, Bootstrap comes with just enough out-of-the-box polish that we can talk without being distracted by the stark absence of visual styling.

The act of prototyping with actual HTML artifacts helped me get focused actually delivering an application and think about how we'd actually do the work. My whiteboard drawings were super conceptual. The work of assembling the code made me stay in the world of what is possible right now rather than the rose-colored world of possibilities (which is also known as "Version 3.0").

Rapid prototyping in Bootstrap also had benefits to the project that I hadn't anticipated. I was able to use these in meetings with users to solicit feedback on the form and layout of information. Seeing their own documents interpreted for the web, helped our users give pointed, specific feedback. Finally, they were heartened to see some early design work which in turn helped me keep them engaged while the team was doing a lot of back-end API development needed before they could implement the UI.

These prototypes seem simple, but they added a lot of value to my team's work. As a designer I valued the ability to use Bootstrap early on to build examples of data displays for the application we were creating. At a time when the pain users were feeling was well-understood, but the plan for implementation was murky, making HTML prototypes helped me build shared understanding with my teammates, get feedback from users, and solidify my own thinking on the overall vision for the application.