User Experience Document Examples & Prototypes
12305
110
4
Published:
  • Add to Collection
  • Tools Used

    Tools

  • About

    About

    Here are a few samples from various UX and design documents I've created over the years. Whether it's communicating to engineers, designers, or n… Read More
    Here are a few samples from various UX and design documents I've created over the years. Whether it's communicating to engineers, designers, or non-technical stakeholders, I can write, organize, and illustrate any sort of design documentation needed to ensure a smooth project. Read Less
    Published:
While I think it's important to note that UX is not itself defined by deliverables, in order to communicate the results of UX activities, we need visuals to express these concepts. Here's a few I've made over the years. I've expanded many of these into their own posts. 
Corporate Website Flow Diagram
 
This is a "combo diagram" for a redesign of healthsparq.com (view Behance project). It shows user paths, site hierarchy/flow, basic page template designs, and calls-to-action. We print it out on a large-format printer to keep everyone clear on where we're headed.
 
You can read more details about the redesign I wrote up on our UX team Tumblr.
Healthsparq Product Design Process diagram. 
 
"To help all our various internal teams visualize our design process and where they fit within it, we sketched this out the other day in a meeting that included our director of product, some front-end guys, our user researcher, and the design/UX teams." Read the full post on the Healthsparq Design Team Blog.
Proposed online auto store ecommerce business system map. This was generated over a multi-day stakeholder interview. View full-size PDF.
Homepage prototype, done using the Foundation CSS framework. The production site leveraged the new, semantic Section module, which transforms the tabbed area at bottom to an accordion design pattern in mobile widths. View the full CityServe project here.
Wireframes, created with MockFlow.

While it did slow things down a bit, the speed at which I was able to gain client consensus on features made it worthwhile. While I don't like the Flash-app basis, I do like MockFlow's ability to export nicely formatted spec documents and multiple formats. The callout features were a good way to clarify and get client feedback, which isn't easy with HTML prototypes [alone].

When possible, I prefer to build with HTML for web apps, as it speeds the transition (or transformation) into live web code.
Explanatory illustrations for the tech team; back in the days before Flash video was native to Flash (via FLV), there were various methods for controlling QuickTime videos via Flash. View the full proposal here.
Pelton-Crane dental equipment configurator design document examples. This and the following diagram represent user flows through the application.
 
This spec document was built in InDesign. View the full PDF here.
Configurator UI.
Quote builder for reps.
This wireframe shows a Flash banner at the top area of a company website.
Wireframe for interactive parallax-scrolling Flash banner.