After all, a product is more than a collection of functional requirements and UI components. Humans don’t interact with individual requirements – they interact with the product as a whole.

My job is to understand the technology and the users, to visualize the product the way they will experience it, and to create project artifacts which enable creative and technical teams to build it.

Let’s look at an example:

Ignite “Stealth Mode” Event App

This small project encapsulates my overall approach to good product design, whether it’s a phone app or an enterprise website.

I conceived, designed, and built a new kind of event app for Ignite Minneapolis, a bi-annual speaker event series, using the following process:

1. Capture and interpret personas, user stories, and requirements.

2. Iterate many solution ideas quickly, on paper.

3. Create detailed, annotated wireframes and/or prototypes for testing, and to serve as project artifacts for design and development teams, and product owners.

4. Design clean, on-brand, final solutions against a carefully delineated style guide.

There’s a reason we have processes in this business. Whether you’re working in some flavor of agile, or stuck in the muddy waters of waterfall, gathering data – user research, product requirements, user stories – is nearly always your first step.

I proved that lesson to myself during this project. Because I was the executive producer of this event as well as the designer creating the product, I initially thought I could skips some steps. Nope. That didn’t work. So I self-imposed the same process I would ask a client to follow. The following was the result of the initial project definition phase:

• The app needed to serve as an event program, enabling attendees to follow along, as well as interact with speakers via Twitter.

• Same goes for the sponsors.

• The design needed to be dark (stealth mode) so audience members wouldn’t be distracted (or have their faces illuminated by their devices)

• The design also needed to convey the energy of the Ignite brand.

• I baked in features for workshop registration and video archives of past events so the app would remain useful long after the event was over.

• I worked with a 3rd party app development team to build the final solution.

Rapid analog iteration

I’m a big believer in using the right tools at the right time. Brainstorming doesn’t require pixel-perfection. I want to capture a lot of ideas quickly.

I can refine them later. For now, I just need to get it out of my brain and into the world. A bar napkin is as good as graph paper for this phase.

Once I’ve culled the cream from my many doodles and sketches – and validated them with the other key players on the project – I begin to create the enduring project artifacts: wireframes and prototypes.

Wireframes and prototypes

The main artifacts I produce while wearing my UX Designer hat are wireframes and prototypes.

Annotated wireframes capture the functionality and hierarchy of each screen, and are usually accompanied by enumerated annotations to provide critical direction to design and development teams.

Navigable prototypes are ideal for usability testing. They are also an immersive way to explore novel or detailed component interactions, including animations. Finally, prototypes provide a means to demonstrate progress and direction for the executives funding the project.

Annotations

Whenever necessary – which is most of the time – I annotate my wireframes and prototypes with specifics pertaining to functionality, component behavior, and user requirements. These annotations are eminently useful to the designers and developers who will work on each component during their respective sprints.

Design & Art Direction

Since each of the 100+ Ignite events throughout the world is independently organized, the unique brand aesthetics for Ignite Minneapolis had evolved their own flavor over the first eight years the event was held.

It was edgy. It was unexpected. The event created a rollercoaster feeling in the gut of tension and release, every five minutes. Other marketing materials created previously such as email marketing campaigns, signage, Keynote slides, web pages, and even free drink tickets had laid the groundwork for the brand.

This project took it a step further by defining an animation style, as well as the prevailing “stealth mode” aesthetic to minimize the impact of light pollution created by 1,000 users interacting with their devices in a darkened theatre.

I created about a dozen style tiles and a couple screens of animated, high-fidelity prototypes to figure out how the pieces would look and how gestures would control the components.

I partnered with an app development firm - in exchange for event sponsorship – to bring the app to life.

The app was built for longevity, and we were able to use the same code base for several subsequent events by repopulating with new content.

› Wireframes

› Analog Iteration

› Research & Personas

› User & Task Flows

› UI Design & Art Direction