Prototype Collection

      
     
    
      

I like playing with tangible ideas, transforming "Wouldn't it be cool if..." into something real. These prototypes were crafted from a wide range of tools, including Axure, Processing.js, Jekyll and more.

Click any image below to zoom in and view full screen.

For those of you unfamiliar with prototyping, imagine the set in a stage play. Enough elements are there for the audience to understand where the play takes place and for the actors to interact with but little else exists behind the scenes. It is all a fascade that serves to tell the story. Prototypes are the same thing with digital (my area of expertise) or physical products. Build enough that you can react to it, interact with parts of it, and get a sense of if this is something worth investing effort in. For more about my thinking on building prototypes and some examples, check out my 2016 talk "Beyond High or Low: Multi-Fidelity Prototyping."

Call Center Resources

I was contracted to work with User Researcher to pilot a user-centered process in a call center. She did extensive ethnographic research around their existing systems. I put together design recommendations and a prototype to demonstrate the process improvements in an integrated system. This prototype's objective was to get high level stakeholders excited about what the kinds of improvements that were possible.

This happy path, high-fidelity prototype demonstrated the workflow if a high profile customer called to make a payment to a loan. Currently, the call center employees have to jump between two command line database interfaces and usually also have a notepad up to take notes on the call.

High-fidelity prototype showing how a customer service representative could confirm the identity of the person on the phone, see account status, make a payment on a loan and save the notes of the call.

High-fidelity prototype showing how a customer service representative could confirm the identity of the person on the phone, see account status, make a payment on a loan and save the notes of the call.

 

DETAILS: 2015 Contractor Project

SKILLS USED: Bootstrap, Jekyll, SASS

Axure7 Feature Concepts

As I spend a large portion of my day making stuff in Axure, I have mused a lot about making the creation and management of interactions easier. This is a demo of how two new features might help the process:
Interaction Recording - build interactions by adjusting properties and moving elements around
Interaction Masters - create reusable groups of actions that will all be updated when you change the master (kind of like functions in programing).

I do not work for Axure and these features are NOT actual features, just ideas that I decided to prototype. Some of these ideas worked their way into Axure 8 with the addition of calling any event on any object dynamically.

 

Proposal in Axure Forums 

DETAILS: 2014 Side Project

SKILLS USED: Axure

Minimal UI Chrome

Playing with the mobile Chrome browser, it struck me how elegantly they handle hiding and showing the URL bar. I wondered if that interaction would work on desktop, so I built a quick webapp with an iframe to imitate a browser. The main features I wanted to test out were combining the URL bar and the tabs, automatically hiding that bar when scrolling down, and the right menu animation.

Prototype of mobile Chrome interactions adapted to desktop

Prototype of mobile Chrome interactions adapted to desktop.

 

Try It Live! 

Source Code on Github 

DETAILS: 2015 Side Project

SKILLS USED: HTML, CSS, JQuery

Flight Heat Map

Sometimes you know you want to travel somewhere, but you're not sure exactly where you want to go. Most flight search engines require starting point and a destination to find flights. What if you could input simply your starting location and your travel dates and see which locations would be most affordable? This prototype pulled in flight data and prices from the Google QPX Express API  to generate a Processing  visualization. Because of limits on the free API and the number of calls required to generate this map, I only ran it a few times. My goal with this was not to create the most beautiful or accessible visualization (sorry people with deuteranopia!), but to see if I could transform live data into this graphic.

Final Login

This map represents the cost to fly to various airports from Des Moines in March 2015, green signifying least expensive, red signifying most.

 

Source Code on Github 

DETAILS: 2015 Side Project

SKILLS USED: Data Visualization, Processing, Google QPX API, bash script

Twitter Bubbles

The Twitter firehose inundates users with a constant stream of the latest Tweets from the people they follow. This web app experimented in cutting through the noise of Twitter and emphasizing the lesser heard voices. The philosophy here followed a Abigail Van Buren quote, "The less you talk, the more you're listened to."

Final High-Fidelity Prototype

Final Login

Users could sign into their own Twitter Account using Oauth 2.0

Final Intro

Introducing the concept of how bubbles are sized and shaded.

Final Main Bubble Stream

Live feed of the latest hundred tweets. Darker bubbles are older, larger bubbles are the less frequent tweeters.

Final Alternate Bubble Stream

User preference could determine if they wanted to show profile pictures in the bubble or not.

Final Friends Page

Alternate friends page that listed accounts the user follows in order of most recent tweet, but limiting to only one per user.

Project Process Book

 

Source Code on Github 

DETAILS: 2013 / Coursework in Human-Computer Interaction Master's Program at Iowa Sta te University

SKILLS USED: Twitter API, PHP / HTML / CSS, Processing JS, Wireframing, Visual/UI Design

Process

Concept Wireframe Sketches

Concept Wireframe Sketches

Early Processing Exploration

Early Processing Exploration: Getting data from Twitter API and charting it.

Early UI Exploration

Early UI Exploration

Variant Color Explorations

Variant Color Explorations