Big Brother Prototype/Wireframe

by Barnabas Nagy | 26 Dec 2011 15:32 | 2 Comments »

My idea for a new wireframe originated in the frustration of having created great personas and user journeys and not applying them on the prototype. It was so helpful for me to see these newly styled user flows and personas because they helped me visualise my users. However, I quickly forgot about them when I started creating the prototypes. The prototype got simply detached from what I’ve learnt from my personas and user journeys. I thought to myself that there had to be a better way.

Searching for a better way

Then I’ve come across this great essay on personas and scenarios. There was one particular idea that excited me quite a bit. This idea was very simple. The writer of the essay displayed couple of photos where the designer had real-life-size cut outs of the personas next to his desk. Below is a photo from the Essay.

All credits to RÓSA GUÐJÓNSDÓTTIR, photograph by Robert Jäschke

I was like wow! I should always have my personas around to remind me of who I work for. So I printed out my personas on a A4 sheet and sticked it onto my wall in front of me. That felt great. They reminded me to keep them in my mind when creating the website prototype.

Need for Tweaking

The printed out personas were great for a while only until I forgot about them. The outside world and the computer screen are two different worlds. Those who work with a computer daily know what I am talking about. So I thought I should bridge this gap.

The idea

What I did was simply creating a left sidebar for my personas on the prototype! As I have placed them there it looked as if they were always watching me working. So I called this the “Big Brother Prototype”. Here it is, an example for my Big Brother Prototype. You can also view the demo here. The only similar concept I came across is Agile People.

Big Brother Prototype

How to do it step by step

Create your prototype in axure but leave a small sidebar for your personas. This sidebar could be around 100px to 200px wide. As you can see on the example above, mine has 150px and a little padding from left and right and from the top. Link your person pictures to your personas. That’s it! You can call it “Personas”, “Big Brothers”, “My Users”, “The Audience”, I called it “The Panel” as they are my judge when creating the prototype. In fact you can use and modify this concept as you like. You can also download the axure source file to get started.

Benefits

The Big Brother Prototype will constantly remind you that you are creating the prototype for your users. It will help your clients also because it makes it very clear that it’s their users who will be the ultimate judges of the website and not them.



2 Comments on “Big Brother Prototype/Wireframe”

  1. 1 Tom Wood said on 2012-03-26 12:31:28

    The judging panel is a neat idea Barnabus. It’s an elegant way to remind the reader that they are reviewing on behalf of the target audience – not themselves

  2. 2 Barnabas Nagy said on 2012-03-28 12:19:30

    Hi Tom, that’s right. That’s why I did it. Thanks for having a look!


I'm open to comments