Recently I mentioned to a few people that my weapon of choice for prototyping is using sticky notes. I didn’t think much of it until a few people said it actually made sense. So here is a short piece on prototyping with sticky notes and a few ideas on how to make this work.
I was building a paper prototype for a small beach project at ThoughtWorks. It quickly became clear the order of my sections needed to change and would need to change again. This then lead to cutting up the different sections of my paper and then using bluetack. By doing so my prototyping became slow and messy.
I then started prototyping with sticky notes when on a project for A World At School. The issue we faced as a team was that their content and priority constantly changed. What was quicker than cutting up bits of A4 paper? Sticky notes. Using what I already knew from the ThoughtWorks.com project I went with the zebra look and feel, which worked great in this situation. Each section was clear and concise. They were clearly defined and we could move them without compromising on design. As opposed to doing the same thing in something like PhotoShop or a HTML and CSS prototype.
The above prototype was for a quick resource project for a hackathon. From this, our hackpack was born!
When working with our clients it was great to really demonstrate that they could move the content. They could visualise the priority. It took away all design and aesthetics decisions, as well as everything technical.
What’s great is when you’re in a pitch or a workshop, going in with something that a client can interact with. It really involves them and speeds up decisions.
No one knows their business like they do.
Providing a tool to interact with stakeholders helps translate business needs and value. Even if their design isn’t the final one, it’s a great starting point of building rapport and involving them.
So let’s say you have all the sections defined, the order of a page is still incredibly important. Different people have different journeys they want to take on your website. Using sticky notes you can determine the different priorities. You can also capture the different options you have and highlight the ones that make sense. Sticky notes are great for quickly moving sections around. Snap a picture of the different orders and you already have the different options for A/B testing.
A World At School:
For A World at School, we weren’t sure of the priority, so we re-ordered parts of the content ready to test through A/B testing.
In addition to A/B testing, you also have the added bonus of personalisation. Say for your scenario a first time user’s priorities is different for a returning user. Using things like cookies you can tailor the page to each type of user. For example, if you have a first timer guide, you may choose to give that content higher priority for first timers. Reordering and experimenting early on in the project phase, means you can demonstrate the benefits of each page type.
I hadn’t used them in this way before, but at a recent event people around me were using them just for content. I brought up the idea at a UX jam session at Ladies that UX. Instead of quickly sketching out the look and feel, we were able to discuss just content. From this, within the space of an hour we had discussed all pages and then built a site map from the stick notes.
In addition to prototyping purely with sticky notes they are a great addition to the traditional paper sketches. If you have prototyping paper which reflect the platform you’re designing for sticky notes are a great way to swap in and out content. Say you have a toggle panel. A panel can be added and taken away depending on user actions.
Sticky notes are also good for already being component size. Building components like drop downs and side bars are a lot easier to make; making your prototyping faster.
Sticky note prototyping is still paper prototyping. Even though you’re still using paper there are still certain levels of detail that you can use. What it can’t replace is the realistic, cheaper prototypes that look like the actual phone. Using cut out prototypes are better for mobile design, because the estate you have for a site is small anyway.
What prototyping with sticky notes can do is focus on content. Aspects like priority, order, storytelling of the page are the main focus. While I would never consider user testing with a sticky note prototype, what it does do is allow everyone on the project to contribute. This then builds the foundations to more higher fidelity prototype. Using the different orders and priorities, you can use this for A/B testing and personalisation.
They’re also not great for carousels!
While sticky notes are certainly not new, and neither is paper prototyping, this method is great very early on in discussions with stakeholders. Getting stakeholders to explain their content and why is valuable in understanding the business. It’s also a fast way to come up with different ideas for A/B testing. Especially for projects with short life cycles or sprints. Focusing more on the content, you can begin to experiment with sections and content flow.
Previous post: Seven ways to improve verification for your users
Next post: Why Not Teach?