Paper Prototypes -Clinton, CT
You always have to start somewhere, and often, with prototyping, it’s essential to begin with something simple.
For that, we need paper prototypes.
But what role do these play in the bigger picture? To answer that, we need to take a step back and understand the role prototyping plays in creating a final project.
What is Prototyping?
Prototyping is the fourth stage in the design thinking process, where teams test ideas and designs to determine their effectiveness in solving the desired problem.
The Interactive Design Foundation goes further, saying that “Teams build prototypes of varying degrees of fidelity to capture design concepts and test on users. With prototypes, you can refine and validate your designs so your brand can release the right products.”
And this makes sense, as one of the most essential parts of creating a project and working within the design thinking process is ensuring you’re hit the right idea.
Tim brown discusses this in his article about Design thinking, saying:
“They slow us down to speed us up. By taking the time to prototype our ideas, we avoid costly mistakes such as becoming too complex too early and sticking with a weak idea for too long.”
So, by taking this time to weed out the ideas that don’t make sense in our project and focus harder on the ones that work, we become more effective designers overall.
How do we Prototype?
Now, knowing a little bit of the basics about prototyping, we can discuss the ways we can do it.
Usually, we want to start with low-fidelity prototypes, which are essentially cheap ways to create and flesh out an idea. Some examples of this are paper prototypes, where you build out your product on paper, which allows us to make countless iterations, experiment, and do it cheaply.
It also really helps to encourage your brain to think of more ideas, as nothing here takes time to build; you’re only limited to the extent of your mind.
Where the problems arise is that it is to the extend of your mind, and drawing ability, so most of the time, these cheap and quick drawings aren’t drawing too close to the realism that we desire for our final products.
That’s when you would want to switch to a high-fidelity prototype, which I will talk about more in a later blog post.
But now that we know what kind of prototypes we should be making let’s start building some screens!
Making the Prototype
Now, with the background we need, let’s go through and build a prototype for one of our user flows. We’re going to look at this one for finding and registering for an event.
With that, we also need to have our updated app sitemap as well so when we are building our screens, we are matching to everything that we planned out and the flow that we designed for.
Ok! Now we can make our first screen. We know from our flow that the first screen we are always going to open to is our homepage.
From here, we then need to navigate to the Explore tab to select the events option, so we will also build out what the Explore tab will look like. Finally we are then going to click events to get to the events page.
We then want to find the event we’re looking for, so we need to click the search bar at the top of the page to see the different categories and events currently being held.
Now, we have some options to choose from, so we can click the sports and recreation option to see the events going on within that category. Here, at the top, we find the tennis practice we were looking for. Clicking here on the link and making another screen, we can now see details about the event, where it will be, the time, and a brief description.
Now it's time to register for the practice, so we click on the register button, which brings the user to a login screen. The user now has the decision to make where they can either log in with an account if they have one or continue as a guest.
For now, we will build what a logged-in experience looks like. So, once we input our email and password, we can log in and be greeted with pre-filled options for our attendees, used from previous events we registered for. We can select who’s coming and verify the event information by hitting register.
Finally, we are at our last screen, which is a confirmation that we’re registered for our tennis practice.
But, there is one more experience we want to build out for this too, and that’s what the guest experience looks like. So if we go back to the option to log in, we are now going to see what a guest would.
By clicking continue as guest, we now have to input information on the following screen for who the attendees will be and how many of them will be there.
Once we complete that info we are the brought back to the registration confirmation screen, which ensures we are now booked for our practice.
And that’s it! While the process is a bit lengthy, it's important to build out these screens and flows to as full as possible, as that is when discrepancies will pop up that need fixing. Now is the time to ensure that everything works correctly before moving on to high-fidelity, where it will take much more time to switch something around.
Still, prototyping proves to be an essential part of our process in creating extraordinary projects, and it all just takes some patience and a few pens.
To see the full report, click here, or scroll down below!
Interaction Design Foundation - IxDF. (2019, October 17). What is Prototyping?. Interaction Design Foundation - IxDF. https://www.interaction-design.org/literature/topics/prototyping