The Community Blog for Business Analysts

Surbhi Mahnot
Surbhi Mahnot

6 ways to effective prototyping

Prototyping is a speedy creation of a full-scale model that helps evaluate a product without investing in actual development.

  • It promotes effective communication
  • Decreases development time
  • Decrease chances of costly mistakes at later stages

But the temptation to build something out-of-the-ordinary, being exceptionally creative and unique prototypes, often steals time away from other important tasks and we end up making it a task big enough as developing a system without code.

Here are a few simple guidelines that could help in creating prototypes effectively.

#1 Prototypes should be “good enough”

Prototyping tools provide enough capabilities to build up an entire product without writing a single line of code.
Unfortunately at times when we are halfway through the project, confident enough, reality hits. Changes creep in and to keep pace with the time and requirements we break the flow down and a bunch of prototyping efforts is lost and rendered wasted leaving the original plan all messed up!

Your prototype doesn’t have to be pixel perfect and development ready, they just need to be good enough to convey the thoughts as a visual representation.

Remember, the main purpose of prototypes is to always help stakeholders visualize the requirements & gain quick feedback to eventually move forward with actual designs.

Restricting the scope of each prototype frees you to focus on what is most required at the point of time.

Get things looking good enough and move forward.

#2 Prototypes should have a clearly defined goal

While rapid prototyping, it is good to have a purpose or a goal in mind. These can be

  • Gain customer feedback
  • Present and convey organizational plans
  • Share project ideas with potential clients and prospects
  • Help UI designers know the project better

Knowing the purpose of the prototype clearly helps you define the project scope and determining how detailed the prototypes should be.

Rough sketches help you move faster. A lot of tools such as Balsamiq, Sketch, Moqups provide this ability to quickly sketch a prototype with lo-fi (low fidelity). This brings up to our next point.

 #3 Always try to determine prototype fidelity at earlier stages

It is always helpful to determine the fidelity of the prototypes in advance to save plenty of time at later stages where more focus should be given on team communications and understanding development efforts. A clear picture of what is to be done determines the prototyping cost and efforts as well.

The fidelity could be identified as

  • Low fidelity (lo-fi)
    Use: Give insight of all the features and content for the project
    Traits: Sketches, black and white representation
  • Mid fidelity
    Use: Considering as transitional phase that allows more flexibility, creativity and interaction
    Traits: Sketch, black and white /color representation, interactions to make the navigational flow clearer
  • High fidelity (hi-fi)
    Use: Almost a replica of the exact design. A pixel-perfect version of what would actually look like when complete
    Traits: Pixel-perfect in terms of color, margins, layout, dimensions, content, navigation, animations, etc.

The fidelity could be measured in following dimensions

  • From project scope — what screens are required to be created?
  • Do we need a quick sketchy mockups with lo-fi or mid fidelity or we need hi-fi?
  • The content on the screens should be “real” or dummy content of ‘lorem ipsum” would go?
  • Do the navigation needs actual transition effects or animations or basic click based flow would work?

Agreeing early at the fidelity of prototypes could save from lengthy last minute discussions leaving the client disappointed.

#4 Test as you go

While creating prototypes, it is common that we put extra efforts to showcase the creativity and innovations. But while doing so often in the midway, we lose our rhythm, consistency, and sync between screens.

At the end of the task, it can be real hard to figure what exactly went wrong in the course of time, where the interaction is missed, where the consistency is lacking and it all ends up spending an entire day or even more time to correct the flow!

It is very important to “test the flow” continuously as you build the screens to get things done sooner and without errors.

#5 Reusable building blocks

Prototyping has become a lot easier with modern tools available to provide several techniques that help improve the productivity. In most of the popular tools there are options to create styles and symbols which can then be reused very easily.

For e.g. in Balsamiq tool, it is very easy to create a symbol.
Just select the elements -> Convert into symbols -> Name the symbol. The symbols file is then created which can be directly used as widgets.

This 10 minutes initial time consuming task will definitely help in subsequent cycles by saving hours of rework. An update in symbols file will update all the occurrences at just one go! Saving a good amount of time, isn’t it?

There is no alternative to hard work. But, being smart can boost the work hard which can empower you to be innovative rather than being repetitive!

#6 Share the prototypes — early and often

Share your wireframes early and often with the involved stakeholders. Continuous collaboration always helps in building a better product.

Collecting feedback frequently helps in identifying missing details and even feasibility of the components in terms of development.

There are many tools that help collaborate easily like Trello, Slack, etc. For example, a popular tool InVision provides real-time collaboration to be ahead of time always.

Create a solid base with effective prototypes to collect customer feedback, improve the processes and always be in right direction. Hope these guidelines might help you in saving a good deal of time, cost and efforts.

Happy Prototyping!

The article was published originally on Medium.com by surbhimahnot

This entry was published on Oct 12, 2015 / Surbhi Mahnot. Posted in User Interface & Usability. Bookmark the Permalink or E-mail it to a friend.
Like this article:
  12 members liked this article

Related Articles

COMMENTS

Marco posted on Thursday, October 15, 2015 11:30 AM
What if we had a cloud tool that business analysts could use not only to capture the use case flow, UI's, interactions etc. but you could actually run it as a prototype and better yet as the real thing ... no coding, no IT and in days?

Would that be valuable?
What characteristics would this tool need to have to interest to be valuable?
Surbhi Mahnot posted on Friday, October 16, 2015 2:23 AM
Hi Marco,

If I understood you correctly, you are pointing towards having an online tool which can keep a track for all the BA activities for a project like documentation, use cases, flow diagrams, wireframes and designs at one single place.
The same tool will also allow wireframes/prototypes to setup complete interactions?
Marco posted on Friday, October 16, 2015 5:49 AM
Hi Surbhi,

Thank you for replying to my post. Much appreciated.
Yes, the same tool would allow you to make your requirement diagrams to be run as a real prototype (a real product), so you can show it to your customer.

What do you think? Would it help you? What characteristics would the tool need to have for you to use it?
YuvalM posted on Saturday, October 17, 2015 8:30 AM
Hi Surbhi and Marco,
Check this out: mosaics15.com. Isn't this what you meant?
Best,
Yuval
Surbhi Mahnot posted on Monday, October 19, 2015 1:16 AM
Marco,

This could actually be an interesting idea to let the drafted requirements be modeled directly as a prototype. This could certainly be of help in many ways
- To visualize the requirements as we plan for them
- We can minimize the revision iterations for the prototypes
- A common place to track the requirements, UI, interactions etc.
- Minimal efforts in maintaining the changes across all set of documents, prototypes, UML's etc. (The most helpful thing!).
We can make the change at one place and can be assured that all other requirement pieces are updated to the same change as well.
Surbhi Mahnot posted on Monday, October 19, 2015 1:20 AM
Hi Yuval,

Yes, this is pretty much similar to what we are discussing about.
The overall context is same but with an elaborated scope.

Thanks for sharing this link. It is useful!
JamesRutherford posted on Tuesday, November 24, 2015 4:26 AM
Prototyping is really important for every project so I think that sharing tips on how to do it correctly will help to improve the methods of developing products for big variety of people.
Surbhi Mahnot posted on Tuesday, November 24, 2015 4:48 AM
Hi James,

Thanks for the feedback. Much appreciated!
Only registered users may post comments.


Blog Information

» What is the Community Blog and what are the Benefits of Contributing?

» Review our Blog Posting Guidelines.

» I am looking for the original Modern Analyst blog posts.



Modern Analyst Blog Latests

Jarett Hailes
Jarett Hailes
As we start a new year many of us will take the time to reflect on our accomplishments from 2012 and plan our goals for 2013. We can set small or large goals. goals that will be accomplished quickly or could take several years. For 2013, I think Business Analysts should look to go beyond our traditional boundaries and set audacious goals. Merriam-...
2 Responses
Howard Podeswa
Howard Podeswa
Recently, I was asked by the IIBA to present a talk at one of their chapter meetings. I am reprinting here my response to that invitation in the hope that it will begin a conversation with fellow EEPs and BAs about an area of great concern to the profession. Hi xx …. Regarding the IIBA talk, there is another issue that I am considering. It's p...
11 Responses
Adrian M.
Adrian M.
Continuing the ABC series for Business Analysts, Howard Podeswa created the next installment titled "BA ABCs: “C” is for Class Diagram" as an article rather than a blog post. You can find the article here: BA ABCs: “C” is for Class Diagram Here are the previous two posts: BA ABCs: “A” is for Activity Diagram BA ABCs: “B” is for BPMN
1 Responses
Featured Digital Library Resources 
Copyright 2006-2015 by Modern Analyst Media LLC