Prototyping and Wireframing

Axure Wireframing, prototyping

Wireframing is all about flow...

Huh?  On one end of the spectrum your have powerful programming. On the other, beautiful design. And in the middle? A great idea to create something new, that's never been done before. Or a bunch of ideas that will improve an existing product or service. UX (User Experience) work focuses on bridging the gap between design and programming by creating a working wireframe or prototype.

You have a great idea to create an app that will let you pay for parking using your smartphone. You set up a basic account with the City of Portland Public Works somehow... then you need some kind of bluetooth connection to the meter so it can identify your car being in parking space "x" and deduct the actual amount you owe for parking–this is the great idea.  It's convenient, and no more paying for 3 hours when you only need 2 hours and 11 minutes. 

We'll also need a way for the City of Portland to scan your vehicle on a map to find out whether you have paid to park so you don't get a ticket.  And maybe have your car send you a text message to remind me of the time and money spent... It's a simple concept.

You can't begin programming until you have a better sense of the flow of events that make up the user app: How do I get an account? What does my login or home screen look like? What buttons do I hit and what happens? How do I pay?  And is it actually easier and faster and more logical? 

There are many tools to create flow: Marvel, InVision, Axure. Wireframing walks us though the flow by generating storyboards of clickable, functioning screens that are perfect for idea testing, flushing out missing or problematic areas, and process improvement.  It's  less expensive, yet functional.  And a valuable tool for the programmers and designers who will build the final application.   

We've all downloaded and quickly deleted apps that are too confusing, painfully long, too much work or just plain ugly. Beautiful and logical design is the result of thoughtful development at every step: design, prototyping and programming.

Wireframing Services include:

  • Flat screen prototypes generated in Photoshop or Illustrator
  • Fully functional Axure wireframe walkthroughs
  • Hybrid screens and walkthroughs in Invision