Designing for change and uncertainty using prototyping

Danny Hearn and Alex Mecklenburg from DOT PROJECT write about designing for change and uncertainty using prototyping.

With so much change and uncertainty around us, it can feel like an overwhelming time to transition and develop an organisation. User need support has shifted dramatically, almost overnight while teams are now glued to Zoom calls throughout the day and need to adapt to new ways of working online.

It’s clear that these uncertain times call for a different approach to doing things that enables you to react and respond to changes and insights as they emerge whilst being as inclusive as possible.

It is really common to perceive new ways of working especially in the digital space as being intimidating and requiring technical knowledge. This mindset can exclude people from the process of improving services and miss a powerful opportunity to co-create a shared vision of change together.

We know from working as support partners with grantees across the Digital Fund that adapting to and adopting new ways of working is hard. “This is hard’ is a quote we’ve heard a fair few times over the last few months! We’re working with grantees to help make things easier, to look at things from a different viewpoint, and to experiment.

What if there was a way to experiment with ideas and assumptions before you started a project? A way of getting everybody engaged and learning? And all of that without hardly any risk whilst keeping costs down?

With prototyping, all of this is possible, and anyone can do it. We invite you to start making your first prototype after reading this article.

Show, don’t tell

Explaining your idea is hard. Knowing if the people you are trying to help will like it..is even harder. Prototyping is an invaluable tool. Anyone can use it to ‘show ideas’, rather than ‘telling them’, Prototyping allows you to print your mind. Prototypes are a working sample of an idea that is made in the quickest, simplest way possible. By having a real example of your idea it allows everyone to see it, and hold it in their hand. This gives you and your team a shared understanding, allowing everyone to participate, interact and contribute.

A prototype creates clarity around your ideas for all stakeholders — from your team members to your trustees. And clarity is one of the most important assets when operating in times of uncertainty and change.

According to the Digital skills report for 2019, 48% of respondents wanted to use digital to improve service delivery, while 31% see a lack of trustee understanding or buy-in for digital as a blocker. If you could create a simple low cost prototype, you could show and give to senior leadership, trustees or even potential funders, to play with, give feedback on and get buy-in before spending lots of time and money.

“It was a game changer for us as I think we could have ended up with something quite expensive” — Charity product manager on prototyping a live chat tool.

Testing a concept or idea early and often with your users, will give you constant feedback allowing your idea to mature. Any changes that emerge won’t cost you that much to change, and you can change your mind without having to fill out a change request form or spend any more money.

We’ve been working with Digital Fund grantees, and collating and reviewing the learnings from The National Lottery Community Fund (TNLCF) Digital Fund programme. It is great to see how grantees are embracing the focus on changing needs of the people they want to support and help.

However, the next stage of translating that understanding into a better service, coming up with new ideas and developing your service can feel daunting and tricky to navigate. For grantees, developing their confidence in prototyping could help them unlock and set free all the insight and research they are developing. It’s easy when moving services online to think that only digital savvy people or designers can design solutions.

There are lots of different types of prototyping you can choose from. It’s best to start with the quickest, easiest method and work your way up, adding more layers, as you test and learn more, growing your confidence each time.

Paper prototyping

When starting with your new idea, paper prototyping is a great place to start. Doing it quickly like this will mean you won’t fall in love with your designs, which is great as it means you can change them quickly if you see that they do not deliver against your user needs.

Good for

• Inclusivity, anyone can have a go.
• Limited time and money
• Getting everyone on the same page
• Getting feedback really early
• Innovating
• Collaborating with everyone
• Making decisions
• Learn by doing

Bad for

• Showing interactions, transitions
• Pretty designs

To start paper prototyping;

Grab a long post-it note and place it vertically, or fold an A4 piece of paper in half. Each corner is a ‘screen’.

Start sketching, (ideally with thick felt tips or sharpies) and don’t worry if it looks bad, you’re just trying to communicate your idea. It’s not about looking perfect… That will come later!

Share your paper prototype, get feedback early and often. You can even record your paper prototype on your phone to show how it would work. Google has also created some great videos you may find helpful.

Start your prototypes on a mobile view

Pro Tip - start with a mobile view

• Layout is easier
• Try sketching on portrait post notes
• Forces you to think of critical info first
• You won’t have to cram it onto a mobile later
• Most of your users are probably on mobiles

Low fidelity prototyping

If you’ve developed your idea a bit further and feel ready to take it to the next stage, low fidelity interactive prototypes are great to show more people and share online. Low fidelity prototyping requires little time, technical skills or resources. You’ll use digital tools to make simple, quick designs that show your idea and add a bit of interactivity.

The purpose is not to impress users, but to learn from them. The goal of low-fidelity prototyping is to have users wow us with their insights instead of wowing people with your pretty designs. As you test & learn your prototype it can start to become your documentation tool. Web developers will love you for this as they can use the prototype as a basis to code from and you’ll both be on the same page together as you move forward to the next stage.

To start low-fidelity prototyping

1. Choose the right tool and the one you’re most comfortable with.
2. Don’t worry too much about the look and feel. You are just communicating the basic stuff. Like what messages you want to communicate, and what the page goes from and to.
3. Continue to think of that ‘mobile’ thin view design. This will help you keep it simple.
4. Keep to it simple by using large fonts which forces you to have less on the page.

Good for

• Limited time and money
• Getting everyone on the same page
• Getting feedback really early
• Making decisions
• Learn by doing
• Testing remotely

Bad for

• Showing interactions, transitions
• Falling in love with pretty designs

Good tools for low-fi prototyping

Google slides, Powerpoint, Keynote (slides and pages)

Notion (page content creator)

Typeform (page survey tool)

Real world example — Volunteer finder prototype
DOT PROJECT and Catalyst were recently working with a grantee who had identified a need to develop a new tool to better recruit volunteers. It was hard to describe how it would work, and everyone seemed to have a different idea in their head of what ‘better’ meant to them. So we made a prototype. We started by ‘showing’ what we meant using google slides to show each page might flow from one to another. We checked in regularly as a team and started to form consensus on how this tool could work. It opened the design process up, everyone was able to speak and listen to all the voices within the team. We were all co-designing.

We then took the learnings from the discussion and added it into www.typeform.com . A free online survey tool that allowed us to create simple web pages that ask questions and flow to the next page. The team helped craft and refine the content by playing, talking, suggesting and collaborating.

Now they have a working clickable prototype of their idea. Their next step is to test it with real users and keep learning. All of this was achieved without any technical coding or design skills within 4–5 days effort. So rather than creating a long requirements list, they now have a clickable prototype that serves as their documentation.

Hi-fidelity prototyping

As you gain more confidence and feedback on your idea you might want to start to explore different tools that enable you to make your prototype look more polished. Remember you’re still trying to learn so it’s never about making it perfect in a prototype but just enough to learn a new thing.

High fidelity prototyping can be useful once you’ve answered the big questions, and are now focusing on smaller questions like colours, design look and feel.

Good for

• Testing remotely
• Getting feedback in a more public way and still keeping the level of quality that it looks professional
• More presentable to stakeholders.
• Learning about more detailed aspects of design (interactions, visuals, engagement)

Bad for

• Making lots of changes
• Doing it quickly
• Inclusive and collaborative design
• Being time short and low on funds
• Coming up with new ideas

Useful tools to try for high fidelity Prototyping:

• Sketch (design platform, subscription)
• Figma (design platform, free entry level)
• Adobe XD (design platform, free entry level)
• InVision (great functionality and easy to use, free entry level)
• Marvel (currently better for embedding videos, free entry level)

Creating content

• NounProject (great for snappy icons)
• FontAwesome (icons)
• Unsplash (quality photos)

Real world example — Live chat prototype
DOT PROJECT was recently working with a charity who wanted to add a new live chat service onto their website, to offer support for very vulnerable people, to get support in a safe way during the pandemic. Ordinarily their approach would have been to write a brief, contact an agency and let the ‘experts deliver a new solution’. However this approach is often fraught with horror stories and pitfalls. We decided to prototype. After one day we were able to use the free trial of a well known chat tool (livechat.com), and set up a mock web page of their website using one line of code. We then got their team to role play scenarios using the chat tool, with real agents chatting back to the users. We learnt so much from how the chat tool needs to be configured, what messaging it needs to give and considerations for internal processes for the team. All this was learnt for about 2–3 days’ effort. This invaluable information helped the charity build up a much stronger understanding of what to look for and develop when implementing a live chat tool.

Don’t let your imagination limit you.

Prototypes don’t all have to be online or digitally focused. Some people create prototypes of a service or a real world experience, testing and learning as they go. The gov.uk are even using prototypes for policy. It’s not just a method for digital products only. This process is designed to expect things to go wrong. In fact it’s great when they do, as it means you’ve just learnt how to make it better.

So if you have some ideas you’ve been thinking about in your head, why not pick up a post-it now and start prototyping!

Article credit:

Danny Hearn is a customer experience consultant and member of DOT PROJECT.

Alex Mecklenburg is a leadership and change coach and member of DOT PROJECT.