Sprinting Like a Designer

So you know how the Olympics has a bunch of different sports? Sports where individuals are competing for time? We can all agree that there are different kinds of sprinters — runners, cyclists, swimmers, oh my! What if there were also other kinds agile sprint other than software development?

Let’s talk definitions: in agile delivery, work is done in iterative cycles known as sprints. Each sprint lasts a certain amount of time and has shippable increments of work associated with it. This is in contrast to waterfall methods where nothing is shipped until the final product at the end of the entire project’s timeline.

Going agile has been a hot trend in the development world, but when I started working within the creative space, I made a discovery. Honestly, I was surprised that it surprised me, but our design process works in sprints too. Our delivery process follows work cycles where we incrementally ship what we’ve created and then build onto it. So what I’m saying is that we designers are sprinters too.

Agile Design Sprints: Sketch, Mockup, Wireframe, Prototype, Design Comps

Design Sprints

Design sprints are less like the artistic process of outlining shapes and then adding color and contouring, and more akin to a multi-step problem solving process. Think of it like a blurry camera lens bringing a solution into sharper focus after each sprint.

1. Sketches

It starts with a sketch sprint to understand a general direction for the project. Like a developer needs requirements before writing code, we need content (the stuff that will go on a website or app — copy, images, all of it) and an understanding of what sort of character this design will take (will it be lighthearted or will it be adventurous). With that, we output sketches to make sure the approach we are taking is in alignment from the get-go.

2. Mockups

Next, we go for mockups. These are realistic representations of what the final product will look like, but are not perfect. They may have placeholders for content, and may be presented as multiple variants so we can decide on visual aspects like layout or color choices. Mockups are visual design drafts, and they sometimes span multiple sprints as we iterate through shipping a mockup, having a conversation around feedback, and making changes.

3. Design Comps

The last design sprint results in a design comp which is a final, pixel perfect representation of the end product. It is a full specification with t’s crossed and i’s dotted (and all content in the right place with the right visual treatment). Thanks to previous sprints, we deliver what our clients want with no surprises and no need to go back to the drawing board. This sprint-based approach actually makes the final leg of the project the simplest, since adjustments and big-picture discussions are fleshed out early in the project.

UX Sprints

As someone with “user experience” in my job title, I’m a little biased, but I think everyone can relate to using a product that wasn’t centered around designing for humans. Incorporating user feedback and testing into your design and development early on as things are being created means better insights delivered faster, and less time wasted on useless or unusable features.

As a note, these sprints do not come after all the design sprints are complete; they are done in tandem with design since each sprint complements and informs the other.

1. Wireframes

The end-to-end picture starts with creating wireframes of pages and different view states. A lot of sites go wrong by ignoring information architecture and forgetting that sites should be easy to use — not just easy on the eyes. These grayscale boxes on a page allow us to ignore the aesthetics for a bit and focus on making sure the layout and content placement/groupings make sense.

2. Prototyping

Once we have the general what and where decided on with wireframes, we move on to prototyping. Prototypes are built on top of the rough layouts decided upon in the wireframe stage (meaning they are low fidelity) and have added interactivity and are responsive in order to simulate how a user will interact with the interface. These can be tested with users and are great for validating that the concept works before investing time into development.

3. High Fidelity Prototypes

High fidelity prototypes take what we have made one step further. These should be almost identical to the final product in terms of both visuals (hello there, color and content from design comps) and interactions. By this point, the prototype should be fully vetted for any friction points for users and all usability catastrophes avoided. One more bonus: this level of fidelity prototype is an excellent artifact to handoff when starting the development phase to make the all-around UX of building the product better as well.

Invitation to Iterate

So don’t be surprised when you work with our design A-team and we start talking about iterations, and never expect us to work in a silo and hand you a final product you haven’t had a chance to give feedback on. We’re trained sprinters, and we’d love for you to be a sprinter too.