Prototyping for non-designers

“If a picture is worth a thousand words, a prototype is worth a thousand meetings” – Ancient IDEO proverb.

Last month, we ran a workshop called “Prototyping for non-designers”, with the aim of showing people from a variety of digital roles that turning ideas and hypotheses into real and testable things isn’t just the realm of designers.

This was one of a series of training workshops held by dxw digital over the Summer.

Prototyping for non-designers workshop agenda

Warm-up

After a brief introduction, we kick-started the day with a warm-up exercise.

We invited our guests to draw a cat (yes, that’s right) on a sticky note within 60 seconds and stick it on the white board. They did a fantastic job and we received a collection of masterpieces.

What’s next? We asked everyone in the room to repeat the exercise, but instead of 60 seconds, they had to draw a cat in 10 seconds. Not challenging enough? Our guests then did it again, and this time they got only 5 seconds.

The point of all the cat drawing was to demonstrate that a low fidelity and a lack of time spent on details is still enough to get across an idea. The 5 second drawings still show the idea of “cat”, without the fidelity of a 60 second drawing! Here is the result:

Cats on post-it notes

 

More cats on post-it notes

Warm-up exercise done. Time to see what stories we are going to prototype for.

The scenario

Next, we told the story of “Ash” (illustrated in super-cute fashion by our Agz), a fictional character who is a non-designer and member of a local government digital team – and how they made a prototype to demonstrate an idea for improving a digital service.

We used Ash’s experience of making a prototype to demonstrate and validate an idea for an improved recycling information feature, as an example of the tasks we were about to carry out in the workshop.

Workshop attendees listening about Ash’s prototyping experience

Here’s what we were going to do:

  • discuss the problem we are trying to solve
  • divide attendees into groups
  • write some user stories with acceptance criteria
  • using sticky notes, outline a flow
  • decide on the interface we need
  • use Google slides to make a digital prototype
  • iterate the prototype based on the results of “testing”

User stories

The first activity was to write some user stories. We started by using the well-known user story template:

As a … I want to … so that …

took Uber as an example to demonstrate how to write a user story, and then gave each group about 15 minutes to write some stories.

Writing some user stories

User flow

After the attendees finished writing user stories, we introduced the process of writing a step-by-step user flow. We used the flow of applying for a job at dxw as an example, and then asked each group to translate their user stories into user flows on sticky notes.

Explaining how to write user flows

Translating user stories into user flows

At the end of this activity, a representative of each group did a little presentation of their user flows.

Presenting back user flows to the wider group

Sketching interfaces

Once the presentation of user flows was done, it was time to convert the flows into user interface (UI) sketches. We encouraged everyone not to pay too much attention to the details of the UI — we don’t need to create pixel-perfect mock-ups to communicate the idea of the solutions. Instead, we invited everyone to use sharpies to quickly sketch UI elements like forms and buttons on the paper templates we provided.

Everyone really enjoyed this exercise!

A couple of the group’s user interface sketches

 

Having fun with the UI sketching

Make a prototype

With user stories, user flow and UI sketches ready, it’s time to make prototypes! To save some time, we had created some UI templates in Google slides. Elements like radio buttons, checkboxes and input boxes were all available in our templates to copy and paste.

dxw’s Gaz explaining our UI templates

A prototype being built

One of the groups discuss the features of their prototype

Show and Tell

Finally, it was time for a show and tell. Representatives from each group showed their prototypes on the big screen and shared with us how their ideas can solve the problem we set.

Showing the Recycling and Rubbish collection prototype

 

Asking lots of questions

 

A round of applause for some nice work

Test and Iterate

The feedback from the show and tell was great. But due to the intensity of the activities we had done, we decided not to go through the test and iterate process. We were all pretty exhausted!

We’d planned to do another round of the user story/flow/sketch/prototype process based on some fictional usability testing outcomes. Instead, we described the idea, and we’re looking at how we can make this a part of our next workshop.

In summary

It was a real pleasure to see our guests enjoying the workshop, and great to read their positive feedback and suggestions for improving the next one. It looks as if we got it about right with the content and materials, which were pitched at a level that meant people felt a bit of challenge while still being comfortable.

We hope the idea of prototyping for non-designers becomes a habit in our attendees’ day-to-day work!

Facilitator: Gaz
Assistant: Ming
Illustrations: Agz
Support: Coca, Rich
Photography: Amy

Comments are closed.