The Importance of Wireframing

One thing I learned very early on in my design education (not too long ago!) is the importance of wireframing. While working on an app design for a fictional yoga studio, I was assigned to create a user flow of a basic task. I decided on one of the most essential tasks that the app would provide: the ability for members to book upcoming classes.

In my first attempt, I inadvertently skipped ahead a few steps and turned in a series of mid-fidelity screens - they included basically everything except for images. I was proud of my work, as the designs were, in my humble opinion, visually appealing. Plus they clearly displayed the breakdown of how a user would complete the task, and I assumed that was the whole point of the assignment.

Much to my surprise, my instructor gave me a failing grade. When I questioned him, he explained that I should start with a set of wireframes, a series of screens that vaguely laid out the features without any details such as colors, icons, or typography.

So I set out to recreate the user flow using strictly wireframes. I somewhat inexplicably found the second iteration harder than the first, even though it was a much more simplified version. But it allowed me to focus on what I should have been from the beginning: the user flow, without getting distracted by all the design elements. I knew that this would be a valuable tool for me to use going forward.