My goal with these selections was to put together a cross-section of different documentation formats and types from over the years. Each one of these styles was meant or a different purpose and audience. Some examples are meant for Engineering use as production documentation. Some are meant for more an executive audience and meant to drive interest and/or support. And still others are meant more for Product to more fully grasp overall solutions or proposals.

Generally speaking, however, my goal is do the least amount of documentation required to fully or adequately communicate whatever concept needs to be communicated. Documentation is great but it requires constant upkeep and attention. And if you don’t keep up with it as faithfully as possible it can become far more of a hindrance than an aid. In fact, you’ll see down below an example of what is possible using new technology designed to work with React components that allowed the UX team to design and prototype using real code and abandoning images and drawings.

Combination Workflow/Wires/Journey

(Fig. 01-03) This multipurpose format was intended to sell the business on a new, high-level, far more simplified and more programatic version of a full workflow. The idea was to provide just enough information to demonstrate that some of the technical aspects had be thought through while also helping people visualize te basic interface in their minds. All of it was really designed to create confidence enough to allow investment into the next stages of work.

Flow & Concept Mapping

(Fig. 04 & 05) Below are two examples of concept maps but the first (#04) has a bit more flow built into it. Done while I was at Yahoo!, the first drawing describes the flow a user would walk through when deciding on a video player page template, and the second I did when I was reworking - or re-envisioning the workflow for all editors at all Yahoo! properties would be moving to for web site publishing. Both of these exercises were extremely useful and the groundwork for each was pulled from many, many interviews and ideation sessions with the global Y! editorial staff.

Personas and Journeys

(Fig. 06) VideoAmp has a standardized way of explaining it’s most basic experience as “Tell me: where did my money go, how did it perform; what do i do next”. It’s an incredibly concise and drastically (purposefully) oversimplified representation of the broadest user goals in the platform. In reality getting that done and communicating all of those data points requires working across up to 30 different personas when you start talking about Buy side vs. Sell side vs. Brands. etc. The drawing below was the beginnings of an attempt to start mapping workflows and objects along a forced linear path across the highest level personas. There were many diagrams that fell out of this exercise, and many more that realistically needed to be created.

(Fig. 07 & 08) VideoAmp is also incredibly special because it commingled linear data and campaign buying/measurement. That meant needing to understand the process, the touch points, and the internal customer handoffs of data and responsibility of what’s referred to as “upfronts”. If you know linear TV media buying, you’re already well-aware of what this process looks like. However, knowing what it really means at a very tactical level and understanding all of the inflection points over a 9 month process - and more importantly, understanding how someone might want to programmatically automate or condense that process - that is an entirely different thing. Fig. 07 is the highest level view of what that process looks like across the entire cycle, from January to August. This diagram was just the very tip of the iceberg and the weeks of interviewing and data gathering it took to generate it were critical. Apologies for having to obfuscate some of these notes and details.

Production Wires

(Fig. 09) Below are images from a pretty old set of wireframes from a template builder application for Yahoo, but they are still a fine representation of a low-fit set of production, functional wireframes. Note that this example does not contain visual design and style specifications because they were useing a standard set of custom components. Basically I had put in place a procedure where if an engineer needed to use any CSS or make any visual changes, they needed written authorization to do so. So those cues weren’t needed at this level of documentation.

Hi-Fi Comps

Sometimes you need to go a bit heavier into potential visual design work to effectively communicate a concept or idea. In fact, sometimes that’s really the whole point. When you’ve got to start testing ideas that will heavily rely on the visuals to show personality or push some emotional response you sometimes have to get into “high-fidelity comps” (hi-fi). These two images are examples from my VideoAmp time in which we were exploring adding more personality and more humanistic tones into the overall experience.

(Fig. 10) Was a hi-fi illustration of a potential new dashboard screen for our measurement application. We were exploring using more easily accessible language and conversational tone to try and effect visual priority and user guidance through the screen

(Fig. 11) I was leading the charge to ‘humanize’ our brand across all materials. This not only meant changing the tone of marketing materials and video in order to make them feel more accessible, thoughtful, and empathetic, but it also meant potentially moving to more earth tones and natural hues in our platform experience. We becan taking cues from biophilic design principles and this image was part of that testing package

No More Flat Images

(Vid. 01) The video below represents a many decades long personal dream for the future. No more wireframes - no more drawing - no more tedious documentation updates - and a prototyping environment that the UX team can use (mostly) independently from Engineering. At VideoAmp we had started building and testing an implementation of UX Pin and Merge leveraging our custom react components. That work had just started allowing our UX team to stop using Sketch and Figma and start prototyping in code. Below is a walkthrough of an older instance of our UI. But it’s real a code based prototype of our production UI - using the in-production components - but it was built by the design team using a custom WYSIWG interface independent of the engineering team.

Motion Graphics and Micro-Interactions

(Vid. 02) Wires are great, but it’s very difficult to convey micro-interactions in the form of animations and other motion based elements on screen. These pieces are critical in that those are the things that can give the interface a massive dose of personality and can also critical to reinforcing brand tenets. When I owned product design for Factual, Inc. I created this high-fi prototype using Principle just so I could demonstrate to engineering the nuances within the click actions, hovers, and screen refreshes that I was looking for. In the end this actually proved to be a pretty useful testing prototype as well.