One week interactive prototype

How much of a business problem can you tackle in a one week ux sprint? What insights can you learn in such a small time?

Let’s find out in the first week of User Experience Design Immersive 28 at General Assembly London.

Image for post
Image for post
Aldgate, General Assembly London

Overview

Meet Matthew. He’s the business owner of a music teaching website where new students are linked to experienced music teachers.

Image for post
Image for post

Running this business takes a lot of time, time spent on administrative processes like invoicing, checking statements, sending reminders, onboarding new teachers, etc. Valuable time that could be spent on developing the business.

Challenge

During the user interviews, it became clear that these admin processes were taking up most of his time. The tasks are relatively short, repeating and consist of lots of small nuggets of information, so they are the ideal candidate to be delegated.

The challenge however is not in finding qualified people to delegate to, but rather in capturing and conveying the granular steps to execute these tasks. Earlier attempts with spreadsheets containing all the steps did not result in major success, as you can quickly lose overview and it is not easily transferable.

Image for post
Image for post
Current way of delegating administrative tasks

Goals: the business owner is trying to offload some tasks to his employees. The goal is to free up time for developing the business further/faster.

Motivation: seeing the market opportunity, uptake and potential expansion for his business, makes him want to devote more time to developing it.

So here we arrive at our problem statement:

The business owner needs a way to efficiently delegate tasks because it is blocking him to further develop the business.

Process

To get a good view of how the business owner currently transfers a task to someone, we need to create an experience map.

Image for post
Image for post
Experience Map with User Journey and emotional state

An experience map consists of a detailed, chronological view of every step taken in the current situation. Make a note of how the emotional state of your user is influenced by each step, and record pain points.

Next come the ideas. In the ideation phase we come up with several ideas that may or may not be realistic. The goal is to have an open mind and let creativity do its work.

Image for post
Image for post
Ideation Phase

From the different ideas that were explored, choose the one that you will base your solution on. Obviously, your solution must be realistic and solve the original problem, so that should help you make your decision.

Image for post
Image for post
Storyboard of where our solution would come in

With the solution in mind, now create a flow of how your user, our business owner, would ideally run the task—this is the happy, golden path. This can differ from the typical path, but it is this scenario we’ll start with.

Image for post
Image for post
User flow of our mobile solution

Solution

Image for post
Image for post
Modular paper based screen sketch

With the user flow on paper, we have a clear direction of how to setup our mobile solution.

Sketching screens in low fidelity will quickly give us a good insight into the effectiveness of our solution, and it gives something tangible to test with the user.

It also makes it clear where your solution might break or is missing something crucial.

With the sketches in hand, you can let your user test the first version of your paper prototype. Give your user a clear task to solve and note how easy they arrive at the solution. Try to help as little as possible, as you want your solution to be effective without external help.

Make note of difficulties and omissions, and use that information for a new iteration of your prototype.

Image for post
Image for post
Second iteration, adding crucial information to the solution

In the case of my business owner, a crucial piece of data was missing: the time it takes to execute a task should be added. This way he can better plan tasks, and more easily discover problems with the execution of them.

Image for post
Image for post
Me, having fun with paper sketches*

Results

One step further than paper sketches is of course an interactive prototype. Before you think this would take a long time to develop and a never ending process of refinement and iteration, consider a low-tech mobile prototype based on your paper sketches.

Image for post
Image for post
Paper sketches converted to interactive prototype with Marvel

Marvel is a great tool for prototyping, and with their mobile app you can quickly get a working prototype in your hand.

Essentially, you take a photo of each paper sketch and link it up to become your prototype. All you need to do is add hotspots for interaction and you’re good to go. After you’ve done the basics in the app, you can jump to their website to further refine your prototype.

Here you can see the ‘happy path’ version of my mobile solution for Matthew. It shows the process of defining a new task with several steps in the system.

Interactive prototype of my ‘happy path’ solution

Watching your user interact with a real prototype gives you tremendous feedback on how your solution could actually work, long before developers throw lots of hours, pizza and caffeine at it.

It might save your user a lot of money if the outcome does not solve the problem adequately, but it might also be the start of a great digital journey…

Conclusion

In one week at GA, I had to interview my user to establish the problem I needed to solve, sketch a solution and build a first interactive prototype. The experience for both sides is invaluable, and it opens the gate for further exploration.

If you’re interested to read more about my 10 week User Experience immersion, give a clap and follow along!

Feedback, tips and questions are welcome! Thanks in advance.

All images and artwork except (*) by Olivier Vanbiervliet

Written by

Designer, photographer, musician.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store