Last week I shared an overview of the importance of Design Thinking and developing prototypes on paper.
This week we are progressing to turn those paper prototypes into wireframes. What are the purpose of wireframes?
This allows you to create the low fidelity (far from the finished product) skeleton structure of the website before you go into adding all the design and content on it. This allows you to design the basic outline, layout and functions of your website or app to do further testing with users.
Before creating your blueprints, I must share a word of warning. With paper prototypes you can literally take onboard customer feedback and create new pages within minutes (less than 5) before testing with the next customer. Whereas with wireframes, it will take a little longer (up to 30 mins +) to refine pages or create new ones before testing with your next customer.
This is why it is important to do as much testing with customers on paper first so that hopefully you will be refining less as you progress through the three stages of rapid prototyping.
Let’s start this post revisiting the 10 steps to test with users quickly as they will still apply for testing your wireframes.
Build your solution with customer feedback directing the path you take by doing the following:
- Use one of the wireframing tools listed below to transform your paper prototypes into wireframes. Think mobile first (good way to think of minimal features only).
- Check out: Pttrns to leverage common features of popular everyday apps we use to build your wireframes for everything from your sign up and login screens to sharing functions and activity feeds.
- TEST: Put the Minimum Viable Product (MVP) in front of people and ask them to walk through the wireframes as if it were an app
- Ensure you don’t influence your users, so provide minimal directions and instead observe behaviors and listen to feedback e.g. “Where is the back button?”
- Refine existing wireframes and mock-up new product features based on feedback (on your paper prototypes)
- This iterative process is quick and easy as you need no 3rd party support and you can iterate before testing with the next user e.g. at you local cafe
- TEST: refine it and do it again with more users, paying attention to the features users find most valuable
- If feasible take a pre-payment or build a mailing list to contact the user once you have mocked up digital prototypes (don’t force this step!)
- Thank users who tested your idea and if possible give them a little treat e.g. £5 Starbucks voucher or offer a few sweets
This article will walk through a comparison of four wireframing tools to consider when transforming your paper prototypes. We will take a look at four tools you can start using from today, Proto.io, Wireframe.cc, Moqups and Balsamiq. Enjoy the slides below (you can download a copy of the slides HERE).
Above, I have shared just four wireframing tools to create mockup website and app designs that can be used to test with customers. Others worth exploring include UXPin, Mockflow, Gomockingbird and Mockplus. However don’t get hung up on the tools, they are all easy to learn and use and remember the aim is to build the basic structure and workflow NOT the content or graphic design of your site.
Check out stage one on Paper Prototypes, or the third and final stage on High Fidelity Prototypes.
ONE LAST THING….. If you really did enjoy this article and found that it shared practical advice, please do like, comment and share with others you feel can benefit (Thanks in advance!).
If it is your first time stumbling on one of my articles, you can check out others and stay updated on my content by signing up to my weekly digest
>> https://www.getrevue.co/profile/Andy-Ayim <<
