Animated Prototypes

This stop-motion method has it’s roots in film making and can be a powerful tool for communicating interactivity without using annotations.

This nice thing about stop-motion is that you can use your existing tools whether that’s software in the video above or pencil & paper in the next example.

Paper Sketching

Pencil to paper is the quickest and most ubiquitous design tool I use. It’s rare that I don’t start with a rough sketch. In this video I’ve taken a refined itteration of an earlier sketch and then used a combination of physical cutting & virtual copy & paste to create a walk through of a design.

Lofi prototyping

This is where the concept rubber meets the development road. Each and every project is different, I tailor my output in this design bucket to meet the specific needs of the project – just enough to communicate the design intent of various proposals and allow the team to go deep on suitable candidate solutions.

Click the image above to launch a prototype for Follow The Money, an open source project I run.

Hifi prototyping

It’s my belief that hifi prototypes (ones which are only used for presentation, not production) are not the best use of a designers time. I prefer to communicate the design intent using quicker methods. On the other hand if the prototype is to be used for production, having the designer write the code increases the risk of quality issues. With that all said, I have produced html mockups of designs, this one was used to communicate the solution to this workflow to a remote team.

These models become essential when there are interdependent projects or teams addressing similar user needs, a UX model can highlight whitespace and/or overlap by giving senior management and other teams quick insight to the project’s intent, helping to align teams and avoiding friction before it happens.

The big picture

One of the drawbacks with traditional research gathering is that important information is disseminated over pages or even different documents. While a single map that introduces the use cases, personas, product vision, functional relationships, etc is inherently too high level to contain actionable details, it has two major advantages. First, it’s a good way to present vision to senior stakeholders, in a single diagram you can present intent and strategy in a short time frame. Secondly, once the team has moved on to requirements gathering and beyond this is a nice reference point to keep focus and avoid feature creep.
I usually print the map above on a plotter as well as produce a paginated version to aid readability on smaller screens.

Experience Prototypes

Asking your users what they want is not always the best way to understand what they need. Sometimes it’s better to envision the solution first. When a project needs both storyboards to explain the context of use and mockups to demonstrate interaction I combine them both in to a single narrative. These artifacts work best on long term large scale projects, I’ve only recently started to employ them and as such do not have work available for the public domain. However, here’s a quick demonstration of how I take storyboard sketches and animated them, it’s the same process for animating mockups and the two are edited together in to a single video the tells the story of user needs and then shows the viewer a conceptual solution, in under 5 minutes.

Brainstorming

When working on application specific designs I start by talking to domain experts and/or end users to generate draft concepts. Those initial designs are then presented to ever increasing circles for review and feedback rolled in to the design.

This is a video I produced to explain to other teams the process we employed to initially generate and then refine visual aspects of the application.

UI Components

Information

Iconography

From 2002-2008 I was responsible for design of the Command Line and GUI of 3Com’s products. I took the three user interfaces to the product; Command Line, Web and Hardware and designed them around a single mental model of the product. My design intention was to create an experience where a user could switch between each context of use and be presented with a level of familiarity that met their mental model of the system.

Front panel interface

In collaboration with the Mechanical engineer I incorporated aspects of the CLI & GUI in to the front panel decal. So, when the user moves between the electronic and physical UIs they are presented with a consistent nomenclature & data reference.

Web interface

The previous web ui was a very literal representation of the device, almost photo realistic. I took a more pragmatic approach to the functional interactions required for the redesign, removed unnecessary visual artifacts and added progressive disclosure of details to lighten the data density from the summary page.

Result

The design intention is that the user has a unified mental model of the interface across the two contexts; virtual & in the wiring closet. They also see a consistent use of nomenclature and interaction as they grow in expertise from Web to Command line interfaces.
.

Analogue feedback of network utilisation

I grew up in and around boats making wiring looms and control panels, and have a collection of gauges & dials normally found connected to small marine engines. I like re-using the old analogue gauges to display information in a more human readable analogue form. Tying my past to the present to some degree. I used a 3″ rev counter, simple clean design, that came of one of the boats my dad owned when I was a kid and wired it in to a wireless router I had lying around at work. The rev counter is a rough approximation of the traffic utilisation between my home network and the internet.



http://www.engadget.com/2007/03/28/classy-wooden-router-literally-gauges-network-utilization/
http://www.instructables.com/id/Wireless-home-router-with-analogue-utilisation-met/

Touch desk

As a user interface designer, my job involves understanding people’s goals and then creating a design that meets those needs. In practice I aim to create interfaces that allow people to focus less on their software tools and more on their work. I’ve taken this thinking and applied directly to my own workflow as a UI designer by creating a peripheral which reduces the barriers between the concepts in my head and results on screen.
Published in Make Magazine Issue 27. Read the PDF.

Case Study: Sim Mechanics

Shorty after joining MathWorks I was fortunate to work with a small but very talented team who were given a blank slate to redesign a 3D modeling product. Within a spiral development process I supported the team by first baselining everyone’s understanding of the users and their needs/tasks using the CARD method (collaborative analysis of requirements & design), synthesizing personas from that data and mapping brainstorming sessions about user tasks on to workflows. This clickable PDF captures this collaborative activity. Once we had looked at requirements from the user’s perspective I worked closely with individual developers to mockup design intent before they spent cycles on code. The evolution of the requirements and UI can be seen in this time lapse video;

Communication

I started my career as an engineer working with some really talented people on ASICs (microchips to you and me). As my career grew and I transitioned on to a path that leveraged my core traits more effectively I found my foundation in engineering to be invaluable. As a designer, being able to speak the language of developers is critical when advocating for the user withing the system’s constraints . What you lose in compromise, you gain by collaboration.

Open Source Software (OSS)

I’m a fan of OSS, the content of this portfolio is wrapped in a WordPress theme. With that said I’ve worked on a number of OSS projects and it is a hit or miss affair. At the start of 2010 decided to try a novel approach to coupling Design Thinking with Open Source collaboration and started the Follow The Money project. It’s a multifaceted endeavor that pairs designers & developers together so that they can better understand their partner’s domain. It hopes to meet the growing need within both communities to build a better world and address the desire for young designers to get practical experience. Finally, it’s an exercise in collaboration that puts user considerations at the front of the process.  It has been a thoroughly enjoyable challenge managing the project so far.

Remote teams

I was at 3Com for 12 years, from 1996 to 2008. During the latter half of that period the company transitioned to an offshored business model. I got to visit China and experience the amazing culture there, being able to put a face to a name was vitally important when working across such large distances. Distributed development is certainly a challenge but not insurmountable once you understand where problems can arise and how to avoid them. Here’s the slidedeck for a presentation I gave to the Usability Professionals Assoication on the topic.

Web specifications

When not embedded in the development team or working with remote sites I’ve found the devil is in the details. Being explicit in these scenarios ensures quality, however, the amount of information must be tempered with clarity. Enough high level information to communicate intent without containing too much superfluous content from UCD processes. Mid level functional directives that allow for leeway in implementation constraints. Finally low-level details that act as a reference as an when needed.

Hardware control flow diagram

This is a specific flavour of the traditional workflow diagram which I use for devices. It’s a combination of the user’s workflow, the hardware functionality they interact with and system responses.

Storyboards

As a visual thinker I often lead in to my documentation with a storyboard capturing the context of use and personas for a design. This image is was created for an application that would enable end users to create software within the vee model

Knowledge Organisation

Archiving assets for the purposes of sharing and reuse is an important aspect of user interface design. The challenge is doing so in a way that makes the visual nature of the content easily searchable and browsable. When I couldn’t find a suitable tool that met my needs I designed my own. I took the popular wordpress theme and modified it in to a pattern library.  Download

Resources

Standing on the shoulders of giants, here are some stencils based on the work of others (apart from sketching, I did that one myself)

Wireframe Sketch	Storyboard characters	Interactive Sketch notation