Design Process Best Practices: Documentation for Driving Design Forward — Part 4

This is the UX Design Process Best Practices ebook, written by Jerry Cao, Ben Gremillion, Kamil Zięba, and Matt Ellis, and originally published on UXPin.com.

UXPin ebook

Design as Documentation

During the actual design process, documentation becomes more than just pieces of paper to pass around — they become the design itself.

1. Sketches

There’s no simpler way to document an idea than to simply draw it. In fact, this was how UXPin CEO Marcin Treder jump-started the (re)design process of the Yelp site as part of an exercise, which you can read in its entirety in our free User Testing and Design: Improving Yelp’s website.

UXPin ebook
UXPin ebook

2. User Flows

User flows chart the actions a user takes with your product. While user scenarios focus on the context of use (e.g. the user’s situation, mindset, etc.), user flows focus on how that user actually progresses through the design to complete tasks.

  1. Types “toasters” in the top search bar.
  2. Scrolls through results until finding “Cuisinart 2-Slice Toaster” and clicks on it.
  3. Clicks on “Add to Cart.”
  • Enters Amazon.com.
  • Uses search bar to find a listing of toasters
  • Clicks on “Cuisinart 2-Slice Toaster” to read review.
  • Returns to search listing
  • Clicks on “Hamilton Beach 2-Slice Toaster” to read review.
  • Returns to the Cuisinart product page
  • Buys Cuisinart toaster.
UXPin ebook — design process
UXPin ebook — design process

3. Site Maps

While sitemaps and user flows are related, the two are not interchangeable. As Dan Brown explains in Communicating Design, the differentiating factor is user behavior: site maps represent your content structure, while user flows show different ways of navigating through it to accomplish various tasks.

The purpose of sitemaps — UXPin ebook
The purpose of sitemaps — UXPin ebook
  • For each item in the primary navigation, create a new page
  • On each page, draw boxes to represent all the clickable links. It’s best to arrange them in a visual hierarchy that makes sense.
  • For each link (like “Programs and Events” or “Advocacy Efforts” in the above screenshot), create a shell page.

4. Paper Prototyping

In the same vein as sketches, paper prototypes allow for quick validation and iteration. Paper prototyping has been around since long before digital products even existed, but their practicality makes them still useful today, though with some modern tweaks.

Paper prototyping — UXPin ebook
Paper prototyping — UXPin ebook

5. Interactive Wireframe

In the past, wireframes acted as a bare-bones structure for content. They were traditionally static, with no interactivity or use beyond the basics. Some designers even treated them as specs documents, annotating details in the margins.

Wireframe — UXPin ebook
Wireframe — UXPin ebook

6. Mockup

Mockups are a visual document that showcases what the product will look like. They are static documents for fine-tuning the visual design.

  • Use a grid system — Grids maintain structure, enable pixel-perfect designs, and prevent needless tweaking.
  • Keep backup typefaces in mind — Since typography is a large part of mockups and visuals in general, keep an eye-out for web-safe backups in case your first choice is rejected by developers.
  • Responsive design is mandatory — Design separate mockups for different screen sizes to make everything crystal clear. We suggest a new mockup for every breakpoint.

7. High-fidelity Prototype

The next best thing to final product itself, high-fidelity prototypes are the ultimate design document. As documents you can interact with, hi-fi prototypes (along with interactive wireframes, which are really just lo-fi prototypes) do more than just document, they allow testing and analysis on a level like no others.

Takeaway

Each of the above documents offers a unique perspective not just for the design process, but for the designer as well. Different designers with different strategies and ways of thinking will find some documents more helpful than others. They feed on certain strengths, but come with their own drawbacks. With the exception of wireframing and prototyping, not all are necessary for every project.

Sign up for uxpin
Sign up for uxpin

The design tool for teams and professionals. From UI design and prototyping to collaboration and handoff. Speed it up with UXPin. • www.uxpin.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store