http://invis.io/YJ28W0YDV

Visit these links & follow the instructions to install a

Rapid Interactive Protoype

Twitter: @mikecostanzo

Add to homescreen on Andriod

No Code Required

Rapid Interactive Prototyping

http://uxisnotui.com

We are uncovering better ways of developing software by doing it and helping others do it. Through this work we have come to value:

  1. Individuals and interactions over Processes and tools
  2. Working software over Comprehensive documentation
  3. Customer collaboration over Contract negotiation
  4. Responding to change over Following a plan

That is, while there is value in the items on the right, we value the items on the left more.

source: agilemanifesto.org

Manifesto for Agile Software Development

The Agile Manifesto states a preference for “Working software over comprehensive documentation”.

 

So how can designers minimize waste?

By ditching static deliverables and moving quickly to a working prototype. 

But I don't write code.

No coding skills required.

Paper Prototypes

You need this guy.

High Fidelity Prototypes

You need this guy.

There must be a better way!

Why RIP?

2. Less time managing documentation

1. Increase communication and clarity

3. Easily manage distribution

4. Create a feedback loop

5. Speed up development

6. More time designing

Communication & Clarity

Enter the Functional Spec.

Concrete

A designers job is to reduce abstraction

as quickly as possible. This is accomplished by:

  1. Understanding the business

  2. Understanding the system

  3. Visualizing the system

  4. Visualizing the interface

  5. Validating your solution

What I use to think a low fidelity mockup looked like.

Mid-fidelity?

Text

Lot's of hands

I soon realized that adding more fidelity was not increase clarity.

Design that doesn’t fulfill objectives—inspite of how beautiful it is—fails. However, ugly but functional pieces will still find use. The best design works as intended and is presented appropriately.

 

The Design Method, Eric Karjaluoto

 

This user flow changed my mind about a lot of things.

But why?

  1. It was fast
  2. It was clear
  3. It was easy to understand
  4. It prevented over designing/wasting time
  5. It was a first step to visualizing the app

Fast forward a few projects and...

Try to capture the entire system at a high level.

...this is what the starting point for design looks like.

Now that we understand the system we can start iterative design.

There is no substitute for interacting with a design on a touch device.

The ergonomics of the UI must be touched, tapped and swiped on the device to be fully understood.

Summary - Communication and Clarity

  1. Our goal is to move away from abstraction as quickly as possible.
     
  2. A Rapid Interactive Prototype is so close to a functional piece of software that the level of abstraction is almost non-existent.
     
  3. This creates a high level of clarity for everyone involved. Allowing for less incidents of communication breakdown.

Managing Documentation & Distribution

The Designers Equivalent of Version Control Hell

RIP allows for a single file source for the entire team

Spend your time design not managing files or documentation

Updating one set of files in a cloud storage system pushes changes to the entire team.

Summary - Managing Documentation

  1. Any time spent managing documentation is design time that has been lost.
     
  2. Giving files version numbers for static deliverables quickly becomes painful to manage.
     
  3. Use a version control system that works best for you. Dropbox, Google Drive, Layer Vault ect.

Workflow & Platform Agnostic

Claudia: Do I have to learn a new design program!

Me: No. Choose your weapon. Speed wins.

Claudia Reinoza  - Designer/Front-End Dev

What is your weapon of choice?

The particular prototyping tools I like are workflow & platform agnostic. 

Wait. What?

Photoshop is not dead

Illustrator is not the best

Sketch is not the perfect solution

Even the lowly Pencil gains super powers

Balsamiq is not the fastest

Choose your weapon

Whatever allows YOU to design fastest wins.

Summary - Workflow & Platform Agnostic

  1. These programs can integrate very easily with almost any design workflow.
     
  2. Choose your preferred design application. Speed wins.
     
  3. If it exports to PNG, JPG or GIF files you're good to go.
     
  4. Pencil + Rapid Interactive Prototype can be a lot of fun.

Time to for some RIP

From Pencil Sketch to Prototype

Design Feedback Loop

Design Feedback Loop

InVision let's you collect client/team feedback.

  1. The RIP becomes the documentation for development.

  2. Constant communication keeps the team laser focused

  3. The design changes can be measured through testing

Summary - Design Feedback Loop

Faster Development

Create a very convincing prototype

that would fool most users with

ZERO DEVELOPMENT TIME

  1. The RIP becomes the documentation for development. A picture is worth a thousand words. An interactive prototype is worth at least a few painful meetings.
     

  2. Everyone is viewing the same source file and has a deeper understanding of the system being designed.
     

  3. It can be augmented by the functional spec, broken out into stories for an agile team, and used as traditional static deliverables when needed.

Summary - Faster Development

Dean: Yeah but can you export code?

Mike: Nothing yet Dean...

Dean Gossi - COO

@mikecostanzo

Made with Slides.com