Low Fidelity Prototyping
This month, I’ve been exploring developing a cell phone application for residents and tourists interested in New Bedford, Massachusetts. The app attempts to streamline information about the city, including things to do, eat, art and culture, and transportation. I’ve been developing information architecture and mapping out knowledge throughout the application.
Recently, I’ve been able to begin developing a low-fidelity prototype, a fancy term for a paper prototype. If you’re unfamiliar with the process, paper prototyping is a user experience tool that allows developers to develop an application using quick sketches.
The technique offers developers critical insight into an app’s design and how users respond to the app. Instead of developing a digital application that takes many hours, developers can use paper prototyping to quickly and cheaply layout the application.
The Process
The process of paper prototyping is quite simple. Get some paper, develop a mockup device, and begin sketching! Developers need to sketch out different pages for the app and the other functions an app will have. Developers can also use different colors to indicate the app’s clickable functions, including images, links, and navigation icons.
Once developers create a paper prototype, testing and feedback can take place. That feedback can strengthen an application or indicate a specific weakness of the app’s design.
While adding an extra step in the development process, many developers find this practice valuable for the early development of an app. Others disagree with the process altogether. Joe Knapp, a Google Venture developer, finds paper prototyping a complete waste of time. For Knapp, paper prototypes limit valuable feedback and encourage users to appease developers.
“ ‘You’re so creative! Great effort!‘
But when you need to learn about a business or product, the last thing you want is people using their imaginations and giving you creative feedback and encouragement. You want to get as close as you can to real-world observations of real-world customers. If the product doesn’t look real, the customer response won’t be real.”
-Joe Knapp, Google Ventures
Attempting a Paper Prototype
I found creating a paper prototype daunting. I’m primarily a digital creator, and my ideation techniques occur digitally. While my instinct was to develop a high-fidelity prototype in Adobe XD, I thought I’d try my hand at paper prototyping.
The process was time-consuming and added additional and, at times, unnecessary steps. Constructing a prototype Apple iPhone X at 100% scale proved challenging. Cutting iPhone page templates with a Cricut cutter took longer than I had expected, and sketching the 20-30 pages for the app became a tedious adventure. At one point, I had so many pieces of paper on the floor. I felt like I was constructing arts and crafts. One gust from the nearby open window and my app were in trouble!
As frustrating as this process was, the application, however, benefitted from the process. I was able to define how I wanted the application to respond and how I wanted to construct the information.
Visit NBMA Updated Information Architecture
The paper prototype allowed me to simplify the information architecture. The significant changes include rewriting and streamlining some of the pages. Some of the updates include:
- Page 1 About New Bedford
- Removed the ‘Fishing and Whaling’ pages.
- Page 2 Explore:
- Removed the term ‘Lodging,’ changed it to ‘Hotels.’
- Added a ‘Waterfront’ page, includes ‘Fishing and Whaling.
- Page 3 Eat:
- Removed the Take Out page and decided to include those restaurants under the ‘Restaurants’ tab.
- Page 4 Arts and Culture
- Removed the ‘Collections’ Page
- Footer
- Removed ‘City Directory’ page.
Paper Prototypes
When thinking about developing ‘Visit NBMA,’ I was inspired by the many tourist apps found on the Apple Store. I particularly enjoyed the simplicity of design featured on apps like Visit MA, Visit Jackson, and Visit Florida. VisitWidget created these apps, and uses a common template for other apps.
I particularly liked the map function found on these apps and wanted to include that feature on my app. Its important for the app to recognize the location and help users navigate to places in the area. I also loved the collapsable menu that helps users navigate the different pages. I wanted to include something similar to my app.
The one thing that I didn’t like about these apps was that there was a lack of header pages used across the platform. Like Visit Florida, some of the apps included many buttons, and I found myself overwhelmed. The navigation of these apps can be improved with header pages.
I think it might be better to include a function where users can swipe horizontally across the app to find different pages, allowing users to engage with the app more fully. My app opens, and immediately asks users for permission to access geolocation services.
App Navigation
Once opened, the app begins with five different headers navigated easily through a swipe to the right or left. Here users can access the pages: About, Explore, Eat, Art and Culture, and Transportation. Users can also access these pages by navigating on the collapsible menu in the upper left corners. I was debating placing the collapsible menu in the lower center of the screen but put the screen in the corner as it might be familiar for users to find it easily.
About
Once users settle on a page they’d like to browse, a simple click of the header text will open a new page. The About section would include information about New Bedford, including current conditions, history, and provide users with a brief description of the city. This section would also have a photo carousel, allowing users to see Whaling City’s different aspects quickly.
The section also includes a link for users to visit NewBedford-Ma.gov and visit a directory of city departments.
Explore
This page includes many things to explore, including things to do, places to see, places to stay, and places. After users click on Explore page, a subheading page reveals five additional categories that users can navigate vertically, including Events, Beaches and Parks, Waterfront, Museums, Shops, and Hotels. I was attempting to figure out how to organize these subheadings, either alphabetically or by relevancy, and opted to develop a hierarchy that focused on city popularity. These subheadings might be updated in a manner that makes sense for users.
Subheadings guide users to explore many options further and provides users with opportunities relevant to their location. Users can then explore more by selecting an option, finding another page with images, information, and relevant links.
For example, users can click on the Events subheading and browse the city’s different events. Users can also add these events to their calendar or visit the event’s webpage for tickets and reservations.
Eat
In this section, users can browse the city’s restaurants, cafés, bars, and sweet treats. Each section forces users to seek eateries based on their location. From here, users can also find the restaurant’s website, menu and determine if they are interested. The app also pinpoints the eateries on a map and provides directions.
A user, for example, might seek a restaurant in downtown New Bedford. The user finds Moby Dick Brewery, and visits the Moby Dick Brewery page, sees some photos, and reads the restaurant’s description. They see that the restaurant is two blocks away and decide to venture over.
Art and Culture
The city has become a haven for creatives, and there has been an extreme transformation of the city. Murals, galleries, and artist studios are abundant across the city. This section helps users navigate the art and culture of the city. Each subheading opens to other pages relevant to a user’s location and provides essential links to artist websites and art locations on a map.
Transportation
This page includes the Airport, Ferry Service, Bus and Shuttles, and Bike Paths.
This section is the part of the app that I’m most unsure of its effectiveness. New Bedford offers some transportation options, but the city lacks a robust public transportation system.
The city has an airport, but only private planes can take off and land. It’s not like large commercial aircraft can land in the city. The airport supports people flying to and from Martha’s Vineyard or Nantucket on small private planes.
The same goes with the Ferry Service. The city hosts two ferry services to Martha’s Vineyard, mainly used by people leaving New Bedford, not necessarily those visiting. My instinct is to eliminate this section but understand the city’s promotion of these services.
A Completed Paper Prototype
While this process was challenging, I can see how some developers use the paper prototype tool. I’m nervous about having someone test this prototype, as I don’t know if I’ll get the valuable feedback Joe Knapp encourages developers to seek. I am looking forward to developing a high-fidelity test of the app!
