Wednesday, February 26, 2014

From idea to core prototype in hours.

http://williamnewton.co/blog/prototype-in-hours-not-weeks/
From idea to core prototype in hours, not weeks

From idea to core prototype in hours, not weeks

Note: Neila Rey is awesome, but I can’t use her copyright. The original graphics created with this post have been removed. The design principles described in this post still apply, even though the mock-ups provided no longer reflect Neila’s workouts.
I’ve been working out every day with these great at-home workout plans from Neila Rey.
One day between exercises, I found it annoying that I had to keep getting up and looking at my laptop to see the next step. This evolved into an idea to create a fitness app that takes you through your exercises step by step.
This is how I prototyped the core experience in a matter of hours:
Idea Dump: Spend some time sketching and brainstorming. Start over often. By my third time drawing out the app I had a strong sense of what it needed to be. Re-drawing your ideas helps you streamline what’s important, and omit what isn’t.
sketchbook-e
1. Choose Workout, 2. Do Workout.
Nothing more, nothing less.
Define the Mission: Define the ‘most important thing’ the product does. Make doing that one thing as simple as possible for the user. That’s what we’ll be prototyping here. (The main point of this app is to allow/help the user DO WORKOUTS)
User Flows: Map out the user flows in Sketch, Illustrator, or with detailed sketches, work out any obvious UX errors. Remember: make it easy for the user to do one thing. This simplifies your focus, creates clarity in your product, and most importantly allows you to finish the work that you start.
I used Sketch to map out the core interactions.
I used Sketch to map out the core interactions.
Visual Design: Open up Photoshop and create some high-fi mockups. Keep the visual design to a minimum. Focus on clarity. Use hierarchy (and perhaps some color!) to create a singular “do this next” feel for your screens. In my example, the user is supposed to *wait* and stretch until the timer runs out.
replace-hifi
Make Interactive & Share: Once you have your screens, open up InvisionAppFlinto, or POP, and upload your screenshots! Send it to friends, colleagues, your cat, anybody who can give you feedback.
That’s it! Is it perfect? No. But that’s not the point. Relish in the fact that you’ve put together something faster than you thought you could. Although it isn’t perfect, your product will improve through feedback from users. The purpose of working in this way is to make stuff. The purpose of making stuff is to get feedback and then make it better!
But wait— you’re not done yet. Building prototypes quickly doesn’t count for jack if you don’t take the time to actually listen, learn, and improve your product through the feedback process. The process for collecting, organizing, and integrating feedback is the topic for another post.

No comments:

Post a Comment