Kevin Guisarde | UI/UX Designer

NPS App Case Study

hand-templateNPS.jpg

National Park Service App (Boston) - iOS

July 2018

Concept Project - General Assembly

Duration - 2 Weeks


 

About The Boston National Historic Park

The Boston National Historic Park is a unique collaboration of federally, municipally and privately owned and operated historic sites associated with the colonial struggle for independence and the birth and growth of the nation. These nationally significant attractions are featured along Boston’s Freedom Trail.

 
 

Summary

The National Park Service of Boston currently has a native mobile application that provides information about the historic sites, available tours, and maps of the historic park areas. The design challenge for this project was to create a feature that would accommodate the planning of group trips which is not available on the current application. Using data gathered from extensive user research my design team and I were able to come up with a few solutions to help users plan group trips, purchase tickets, and geographically locate themselves on the trails.

 
 

My Role

Working in a team of four Designers, I contributed to the full process of the project from Discovery to Prototyping. I was primarily responsibe for creating deliverables such as Personas, Sketches, Wireframes, High Fidelity Mocks, and building out the Digital Prototype in Invision for User Testing.

Methodologies

  • Research

  • Data Synthesis and Analysis

  • Ideation

  • Paper Prototyping

  • Wireframing

  • UI Design

  • User Testing

  • Digital Prototyping

Tools

  • Pen and Paper

  • Whiteboard

  • Post-it Notes

  • Trello (Time Management & Organization)

  • Slack (Communication)

  • Sketch

  • Invision

  • Google Docs

  • Google Slides (Presentation)

 

 
 

The Problem

Most people visiting the Freedom Trail travel in groups, and need a way to plan and coordinate their tours, yet the NPS mobile application does not facilitate planning Freedom Trail tours for groups.

 

Research & Discovery

 
 

Sizing Up The Competition (Competitive Analysis)

We sought out to find other native iOS apps offering the same functionalities and concepts as the NPS app to analyze what some of there weaknesses were as well as their strengths. We wanted to know what each app was doing wrong and what they were doing right, and how we may utilize the strengths of these apps to come up with solutions for accommodating planning group trips and outings.

 
 

Strengths

  • Geolocation

  • Navigation

  • Booking

Weaknesses

  • Limited itinerary sharing

  • No group booking functionality

  • Focused more on hiking sites than historic tours

 
 
 

Surveys and User Interviews

One of the first steps in our research was to create and distribute an online survey to help us find potential participants for our first round of user interviews. From our survey we were able to connect with people whom had visited the Freedom Trail in Boston and always have traveled in groups. Outside of surveying we were also able to connect with others that have visited the trails in Boston.  A total of 6 people were interviewed and lead us to some interesting findings. 

 
 
Screen Shot 2018-08-04 at 4.49.07 PM.png
 
 
 

What people said...

 
 

"Geolocation for me personally it is critical; for other members of a group tour… not so much"

 
 
 

"I would like to be able to select what sights I want to see. I also want to see nearby coffee/food places, other points of interest along the route. Also, being able to invite people on the tour (shared itinerary via interactive email, save in calendar, etc)"

 
 
 

"Booking ahead of time would be very important. I want to be able to book a group tours and have people pay separately for those tours"

 
 
 

Synthesizing The Data - Affinity Mapping

After concluding our initial user interviews, we were left with an abundance of data and some really interesting insights. We began to synthesize our data using an Affinity Map

 
 

Key Insights

  • Most people wanted to know their location on the map

  • People wanted to pre-pay any fees or tickets that certain sites require

  • Most people wanted to know create a custom tour due to time contraints.

  • People want to share itinerary with the group they are traveling with

 
 
Screen Shot 2018-08-04 at 5.03.04 PM.png
 
 
 

Meet Our Users (Creating Personas)

Based on our participants feedback and informative insights, we were able to come up with Personas the would represent the base of our target users. In this instance we created two Personas, one in which wanted to book a tour for a weekend activity because her in-laws were visiting from out of town (Erica), and another whom is a history teacher trying to book a field trip to the Fredom Trail for his students (Tony). 

 

Sketching

 
 

The Challenges

One of the biggest challenges in this project was coming with a solution for the most effective way to plan group trips. We had to consider our time constraints and the insights gained from our research while still challenging ourselves to think outside the box. Feasability was also important as we had to develop a structure that could be implemented for both iOS and Android considering the app supports both platforms. There was also a lot of discussion on how we should allow users to share their itinerary with their group and where an when it should be placed withing the apps structure. 

 

Starting off with Design Studio (First Iterations)

To create as many ideas as possible, we decided using the Design Studio method with the entire team. To accomplish this, we timeboxed ourselves while sketching out as many screens as possible. Putting ideas on paper was important for us to be able to guide us in the right directions as far as which solutions would most benefit the users. Most of our iterations and major changes came from our paper prototypes and testing them with users. 

 

 
 
 

2nd & 3rd Iterations & Paper Prototyping + Testing

When testing all of our sketches with users, we were late able to eliminate ideas that just weren't feasable or worth expanding upon based on the needs of our users. Our solution for these iterations were to combine planning custom tours with the ability to book or pay for tickets for sites directly on the app. The app did already have an options to create a custom tour but it was hidden within the tour sites page. Our final sketches brought the custom tour option front and center on the main page. 

 

Create Your Tour

 

User Flow

 
 

A final user flow was created to show the flow of the user as they create a custom tour, buy tickets, and share their itinerary with a group. This flow focuses primarily on how user would share an itenerary through SMS as well as an option to add their tickets to their Apple wallet

 

App Map

 
 

With the overall flow of the app refined, we had to then rework the apps structure. This had to include the changes made to the custom tour feature as well as adding the itinerary and checkout pages

 

Wireframes

 
 

Adding features like geo location, purchasing tickets and allowing users to create custom tours from the main page, meant restructuring the current design and building new screens for the checkout flow. Using the positive feedback from continuously testing and iterating our paper prototypes, I was able to recreate some existing screens adding elements for the features like geo location. I also had to create the look and feel for the checkout process and itenerary as well as adding a button for custom tours on the home page

 
Home.png

NPS Home Page

Added new button for creating custom tours on the home page.

Tour Details Page.png

Tour Details

Users can add the information regarding their custom tour which includes: time and date, and the type and number of people in their group. Giving the option for group visitors is implemented to calculate the fees for tickets.

 
Check Out Page.png

Check Out

Designed the checkout page when purchasing tickets for tours using a simple one page process design.

Confirmation Page.png

Purchase Confirmation

Added a confirmation page which include an option for users to add their ticket to their Apple wallet. User would then be able to pull up their ticket from their wallet to show at the site for verification.

 
Itinerary.png

Itinerary

Designed the itinerary page that includes a map of the tour locations, tour details, and the average visit and walking times from site to site. Users also have the option to purchase tickets from this screen or skip and begin their tour.

SMS Share.png

SMS Text Sharing

Using iOS guidelines, I was able to recreate the iMessage screen with auto generated text that would be shared with members in the group via group text.

 
1.2 - Event.png

Ticket

Designed the ticket for the apple wallet.

Maps - Old South 1.png

Tour Map

Added elements for geo location to show a user's location on the map and where they are on the tour.


UI Design

 
 

The Solution

Within the Boston NPS Application, we designed a unique feature allowing the Freedom Trail visitors to create customized group tours, prepay their tickets, and share itinerary details with the members of their group. This will provide groups with a more enjoyable and streamlined experience of the Freedom Trail landmarks. We focused on the iOS version as most of our target users are iPhone users. 

 
 

The challenge here was designing the new features while sticking to the existing brand and style guidelines. Without access to any of these, I had to create one of my own which imitated the current design as best as possible with the resources at hand. 

 
 

Prototype

 
 

 

 

Future Considerations

One of our initial ideas from the start was the possibility of allowing users to create accounts on the app. This would allow the capabilities and implementation of in-app direct messaging and geolocation for individual users. Individual geolocation would display every user on the map allowing users to communicate with each other and leave real time reviews and tips as long as the user enables the app to use their location. We would also want to keep testing out the check out process of ticket purchase as this was one of our biggest challenges.