Whether publishing a book, selling a product, releasing a new medication, advertising software, selling perfume, you name it, it is commonplace to create a “rough draft” of sorts to ensure that your product has been tested effectively and proved tried and true. In User Experience (UX) Design, creating a simplified version of a product before its full development is called Prototyping. Prototype is the fourth stage in the UX Design Thinking process.
Design Thinking: A Brief Explanation
There are five stages in the UX Design Thinking process: Empathize, Define, Ideate, Prototype, and Test. Individually, each stage is vital, unique, and significant. Although we will focus on prototyping, here is a brief blueprint for all five stages. Keep in mind, “these stages are not always sequential, and teams often run them in parallel, out of order, and repeat them in an iterative fashion.”
- Empathize: This stage seeks to understand your target audience and the problem(s) they face. This is achieved through immersing yourself in the environment of your audience. Ask questions, take surveys, seek experiences, and dig deep.
- Define: After gaining insight into your user’s perspective, you can use what you learned to define the problem. In this stage, the goal is to formulate a problem statement. The problem statement focuses on the user’s core needs. It is a guiding point for all subsequent stages. You can view it as a mission or vision statement.
- Ideate: The third stage involves generating ideas. This is where you brainstorm ways to address your user’s needs. Viewing your problem in alternative ways and thinking outside the box is encouraged. In this stage, it is important to come up with multiple feasible ideas. Quantity wins over quality.
- Prototype: Prototyping involves selecting the best of your ideas and creating an inexpensive version of your solution(s). This experimental stage is a chance to create something tangible. Prototypes are often created using whatever materials may be available, including paper, tape, paper clips, play-doh, popsicle sticks, etc. The product is a simple first draft of your main idea.
- Test: In the testing stage, your user will interact with your prototype and provide feedback. This stage helps you determine whether your solution is valid or if it needs reworking. Your results may lead you back to prior stages, or even as far back as identifying additional needs and redefining the problem.
Prototyping Explained
In UX Design it is imperative to ensure that a product works before releasing it to the public. Prototyping creates the space to “determine whether or not the design (or changes) work the way you intended them to—before they’re out in the world and in the hands of your users.”
A prototype is a scaled-down version of a product, used to sample or simulate ideas and designs. Prototypes are typically inexpensive and easy to create. They often start with paper, pencils, sticky notes, and other stationery items. Prototypes provide a quick way to investigate your ideas before investing a great deal of time and money into developing a product. Prototypes come in all kinds of shapes, sizes, and versions, “ranging from simple paper models to fully functional, interactive digital prototypes.”
Why Prototype?
Many UX professionals would agree that prototyping is a crucial and valuable step within Design Thinking. Here are a few reasons why DIY prototypes prove fruitful.
- Prototyping is universal. Most people are capable of creating rough sketches of their ideas. Prototyping is not limited to designers as any individual can make a paper prototype.
- Prototyping is affordable. Paper and printed prototyping materials are inexpensive. Additionally, prototyping saves time and money in the moment and the long run.
- Prototyping warrants honest feedback. People freely offer constructive criticism when they are aware that they are not interacting with a finished product. In this case, paper prototypes may encourage honest feedback more than a polished prototype.
- Prototyping identifies usability issues and design flaws. While users interact with your product, you will gain insight in real-time. Furthermore, you will notice challenges users may have way before it is too late. “Prototypes enable you to fail early and cheaply.”
- Prototyping helps designers make informed decisions. Prototyping allows you to test multiple designs, layouts, and solutions to determine the best approach. In every way, prototyping informs you of how a user may experience your product and gives you room to refine your work.
My Paper Prototyping Exercise
In recent weeks, I proposed an idea for an app to accompany the City of Baltimore website, called Baltimorean. Following my proposal, I created user flow diagrams to explore how Baltimore residents might find the content and resources they need while using the app. This week, I took my app one step further through low-fidelity paper prototyping. You can view my prototyping exercise in the PDF below. I’ll explain my prototyping process here.
Remember the User
Before crafting anything, I wanted to ensure that I kept my users at the center of my process. I revisited the following things determined in prior activities:
Target Audience
Baltimorean’s target audience would include all Baltimore residents, especially those familiar with the city website. Residents who frequently visit Baltimore’s site would benefit from an app that gives them easy access to information and resources without having to peruse the city’s site.
App Purpose
Baltimorean is a companion app, created to accompany the City of Baltimore website. This app would focus on the services and resources offered by the city. The goal of the app is to keep users in the loop, providing them with easy access to the city’s latest news and upcoming events. The app would also allow residents to access the city’s directory, submit and review service requests, and make online payments conveniently.
User’s Needs
Baltimorean will meet the following resident needs:
- Residents will be more informed about city happenings
- Residents will feel more connected with their community and the city
- Residents will browse relevant city-related content in a more manageable way
- Residents will be able to make payments and submit requests more conveniently
App Information Architecture (IA)
User Flows
The following flows are displayed through my paper prototyping exercise:
- Finding Relevant Articles
- Submitting a Service Request
- Finding a Local Event
Gather Materials
At the very least, paper prototyping requires paper and a writing utensil. I looked around my home office and gathered the following stationery items:
- A notepad with a dot grid to ensure well-aligned elements.
- Sticky notes in varied colors and sizes to point out interactive buttons and fields, identify user selections, and symbolize windows and dialog boxes.
- Pencils with erasers for tracing and sketching.
- A black fineliner pen for outlining static areas.
- Scissors to scale screens to size.
- Double-sided tape to adhere and reuse buttons, fields, and screens.
- Cardboard to reinforce my prototype.
- An old phone case to frame my screens and make the experience feel more concrete.
Determine Approach
Following Ben Coleman’s lead, I focused on small portions of my prototype that work together to make up the larger whole. These small portions include devices, screens, elements, and interactivity.
Devices
Generally, prototyping requires designers to determine which device they will be designing for. Available user research and data typically inform what devices a specific audience prefers to use. The device determines the size of the prototype, which affects the product layout and the size of the elements within the prototype.
In this case, I am creating a mobile app. I designed my prototype using screens crafted for an average-sized smartphone. I utilized an old phone case to frame my prototype so that it would feel realistic to myself and my users in the testing phase.
Screens
Here, you select and define the screens that are necessary to communicate the design to your audience. Screens are informed by steps a user may take in their journey to locate the content they need. A list of screens can be developed by referring back to existing UX works including sitemaps, IA, user flow diagrams, and more.
Thankfully, I previously produced flowcharts to examine the journey of three users of the Baltimorean app. I returned to my flowcharts to develop a list of screens necessary to include in these three journeys. Some screens were recyclable while others were unique to their specific journeys.
Elements
Like a website, the elements within an app screen can either move or change from screen to screen or remain anchored on every page. Furthermore, items housed within one area of the page can directly impact what the user sees in other areas. It is important to consider how these elements contribute to the screens within the prototype and the user’s overall experience.
With the Baltimorean app, I chose to maintain the same header on every screen. I treated the app’s bottom icon navigation the same. Maintaining the header and navigation throughout the app assisted me with ensuring my user feels comfortable with navigating the app. It keeps them from getting lost and lets them know what to expect regarding changes from screen to screen.
Interactivity
Next, I thought about how users would potentially interact with the screens of my app? What would they click? What text fields would they need to fill in? Are there pop-ups or dialog boxes? How would I differentiate between static and interactive areas? How would I indicate the user’s selections so that the journey was communicated clearly?
This is where my sticky notes came in handy. I cut up light blue sticky notes, utilizing them for links, buttons, and fields. Light pink signified dialog boxes and overlays. Orange page-marker sticky indicated the user’s specific selection on each screen.
Create
Once I had a sheet of notepad paper sized to screen, stuck to cardboard, and fit within the phone case, I began creating. I cut out multiple sheets of notepad paper to slide into my phone case to transition between screens. Next, I sketched, outlined, and placed my static header and bottom icon navigation within my prototype. Utilizing the Baltimore city site, my flow charts, and my app IA for reference, I went through each screen on my list.
I started each screen by sketching the general layout, placing example content on every page. I followed with sketches on light blue sticky notes for interactivity and cut them out to stick onto portions of my screens. Once I had a good idea of how I would place everything, I outlined my sketches, erased the pencil markings, and used double-sided tape to piece everything together. Finally, I added page-marker stickies on the edges of my prototype to indicate user selections and overlaid pink stickies for dialog boxes where necessary. When I felt that my screen was complete, I took a few photos to document the current step in the journey before moving on to the next screen. In my final step, using my photos, I pieced each journey together in a PDF document and added notes to help effectively communicate what is taking place within each step of the journey to the viewer.
Paper Prototyping Takeaways
As I crafted each screen within my prototype, I quickly learned that there are many questions to ask and aspects to explore. Should I use icons? Should I use cards? Does this page need a photo? Is there too much content on this page? Will my user understand what to do here? Are there too many steps? Is this process complicated? Is this clear and concise? Is this meeting my user’s needs? The list goes on.
Altogether, this exercise taught me that paper prototyping is an effective way to test endless possibilities and land on a workable and useful reality. Although user journeys and flowcharts and other tools are highly useful, creating a prototype that fits in your user’s hands gives designers deeper insight. Prototypes clearly indicate what is working and what may need improvements. They highlight imperfections and help designers make calculated decisions. Prototyping produces messy rough drafts that lead to appreciable finished works.
“I’m writing a first draft and reminding myself that I’m simply shoveling sand into a box so that later I can build castles.”
– Shannon Hale
Sola's Thoughts 