Prototyping

Paper Prototyping

Sometimes the best place to start a new design is with plain old paper and pencil. Here are a few screens from a paper prototype I created for a fictional ice cream delivery service. All of the mockup screens were drawn on paper, then scanned and uploaded to the InVision prototyping tool. Once uploaded, button interactions and other dynamic responses were added to the design. This is a great way to test the prototype's information architecture with users and spot shortcomings before they make it into the final design. 

Annotated Wireframes

Moving on from the basic ideation phase of a paper prototype, we advance to low-fidelity mockups. This is the stage at which a design might be presented to the customer to see if the designer's vision for the application is in general alignment with the customer's. If we're not ready to present to the customer, it's also a good point at which to discuss things internally with other team members like developers. In this video, I walk through a wireframe that's been marked up with annotations that allow others to understand how the design is expected to work. It's very expensive to fix a problem in development. Revealing pitfalls at the wireframe stage costs almost nothing.

Interactive Prototypes

When you're ready to move on from the wireframing phase, you'll probably want to simulate the interaction design of your website before handing the design documents off to a developer. Testing the user's response to the interface can highlight points of confusion between what happens and what the user expects to happen when clicking screen elements. Here are a few screenshots from a prototype mobile site I developed to refresh a university website.