Check out my new project, Practical Service Design!

Shoelace.io Visual Interface Builder

My Roles and Involvement

User research, Interface design, interaction design, Visual design

Bootstrap is a CSS front end framework, the most popular available. It is estimated that around 1% of all websites are built with Bootstrap. It is incredibly powerful and is leading the movement on mobile first design and development, mobile first meaning, you build for the mobile experience first, and then enhance and modify for the desktop experience.

Shoelace.io began as a personal tool to solve a specific problem – building Bootstrap 3 CSS layout grids easily without having to type and re-type HTML over and over, and without having to do the mobile first responsive designs “in your head” before trying to code them.

As the code progressed, it became clear that Shoelace could be a great public tool for designing and learning how the Bootstrap responsive framework functions. And if I was going to push it out publicly, it needed to be foolproof and not contribute to the confusion instead of reducing it.

This project is best viewed live at shoelace.io where you can try it out, get the feel for it, and envision the process as you read!

Primary Problem

Through promoting and writing about Bootstrap 3 on my blog, something became very clear – despite the apparent ease of use of the framework, a lot of people who need to leverage the capabilities just don’t “get it.” Through Twitter, IRC, and my own blog, I found out that there was a huge population of people eager to use Bootstrap, but didn’t really know how or why it worked, and how to best utilize its fantastic responsive, mobile first properties.

As of the writing of this page, my blog gets about 1000 visitors a day looking for “bootstrap 3 tutorial” or some variant of that phrase. And as I hang out in the IRC channel, I get question after question about how exactly you use the framework. I decided to contribute to the community by creating a resource that simultaneously acts as a design tool and a learning tool.

Challenges

The main challenge was creating something so intuitive that it didn’t compound the problem by polluting the interaction with more noise and not less. Understanding how to use the Bootstrap grid framework to design for 4 different responsive sizes was confusing enough. I wanted to abstract away from being a literal “page design” tool and be more of a “what you think is what you get” heuristic tool.

The other significant challenge was building something useful and powerful, but not venturing into building a kitchensink design tool that tried to do too many things, and end up doing most of them badly. This involved a lot of design sacrifices to stay focused only on the intended purpose.

shoelace-1

Early stage development wireframe

shoelace-2

Early stage development wireframe

Another challenge was getting user feedback on the usability, and general usefulness, of the tool. Being as this was a free, public project, it didn’t necessarily have a focused user base. Anyone who wanted to use Bootstrap’s responsive properties was a potential user, and that could be anyone from a designer to a developer.

As it turns out, it was not very difficult to get rapid feedback from people who were trying to build projects using bootstrap. The article I wrote on using the grid is stuck in the top 3 google search results for “Bootstrap 3 Grid” (out of around 2.3 million), so finding people to test with was as easy as opening my email and looking at the 1-3 emails I get each day on people looking for help. These people are self-selecting obviously, but in a sense that helped me get specific feedback from people who would benefit most.

Solutions

There was a great deal of user testing that went on in an informal “beta test” of the project. I gathered people through Twitter, IRC, and my own website who wanted to try it out, find flaws, and rate the overall “a-ha” aspects of the tool. It was critical that Shoelace was a fun and educational experience.

A tremendous amount of work went into making the Shoelace interface and interactions “unbreakable”, meaning the UI won’t let you create something that is invalid. It’s not a page builder that just lets you code visually, it’s an abstraction. It serves as a way to see how everything will work, then adjust the design and see it change and adapt in real time at all 4 of the responsive layouts. As people began to use the tool, I quickly took their feedback and rolled it back into the development plans.

shoelace-animation2

Mobile first and responsive visualization in action

Outcome

The response to the first version of Shoelace.io has been great. I see it referenced around now as a way to learn and experiment with grid layouts without having to spend a great deal of time “trial and error” coding in HTML beforehand. In that sense, it’s very efficient at what it does.

More than being an HTML generator though, Shoelace acts as a learning tool, and in doing so the UX must be very well thought out and tested. A learning tool that did things poorly or wrong would be a terrible experience and a huge turn off to both Shoelace and Bootstrap itself. I put a lot of effort into researching and testing the experience and intuitiveness of Shoelace, and I hope as more and more people use it that will pay off.

shoelace-4

Main interface featuring copiable HTML and Less mixins

shoelace-3

Fully interactive live preview