Experience Saltwater

Experience Design: UX at a state park


The wilderness is more than a place of recreation. It's a place where we find ourselves and connect with nature. 

The purpose of this project was to improve how people experienced Saltwater State Park in Des Moines, WA. 

Our objective was to improve the experience by increasing information density and incorporating technology to improve rather than detract from the state park experience. 

This project was completed over two months for the "Designing Information Experiences" class taught by Associate Professor Jacob Wobbrock in the Information School and Computer Science & Engineering department at the University of Washington in Seattle. 

My role in the five-member team was distributed across different disciplines. Due to a mid-quarter illness, I was unable to participate in user research during this project. However, I was deeply involved in: 
a) Ideation
b) Storytelling
c) Persona creation
d) Scenario creation
e) Lean Canvas creation
f) Customer Journey map
g) Usability Testing
h) Hi-fidelity interactive mockups

Our process broadly followed the Stanford "Design Thinking" method. Of course, between each step, there were allowances made to go back to earlier steps to keep the focus of the project well defined.  

We completed our project in June for our presentation.
Our solution is a network of kiosks with an experience-enhancing user interface located at strategic points in Saltwater State Park. 

Tools used

Experience Saltwater tools.png

Design Problem: what do the users actually want?  

While doing user research, my team and I discovered that most signage at the park was poorly marked and different maps were differently designed, making it hard to change mental models. 

The “information” board was sparse and lacked any extra information, beyond functional phone numbers and volunteer information, that could have enhanced the visit of the park.

Our initial research questions were: 
a) What (if anything) is lacking in the information experience at Saltwater State Park? 
b) Why do people come to Saltwater State Park? 


User Research: designers and visitors don't think alike

Visiting Saltwater Park as users

Visiting Saltwater Park as users

My team visited the park to conduct field observations and interviews. Saltwater State Park was chosen because:
a) It is a state park
b) It has campsites
c) It is relatively close to Seattle
d) It is large enough to have different kinds of topography like a jungle, a beach, and climbs. It has 1,500 feet of shoreline on the Puget Sound between Seattle and Tacoma, with 88 acres and 80 campsites.

The team members took the role of  “user” of the park by walking along the beach to watch for wildlife, identify a trail, and go on a short hike. In addition, 3 to 5 hikers and park visitors were also interviewed, including an individual, a couple, and an older woman. While approaching the park as a users, the team spotted deficiencies in signage and inconsistent design styles. But when asking the visitors, the team didn't find many complaints about signage.

Instead, we had some high-level discoveries: 
a) Visitors and hikers come to the park to connect with nature
b) They come to foster a sense of community
c) The come to connect with the history of the area
d) They come for recreation and relaxation

Based on our interviews and research, we created two personas to better understand our users and provide yardsticks against which to measure our ideas.  

My team and I realized that improvement of the park experience could only happen if the information experience improvement (i.e. the signage issues and inconsistent mapping) was directed at connecting better with the nature, history, and community of Saltwater State Park. 

So our design(s) had to answer the following question: 
How can we design to enable visitors to fully experience the environment and history of Saltwater State Park? 

Ideation: the many lives of an idea

We had approximately 15 ideas, some of them wild

We had approximately 15 ideas, some of them wild

In approaching ideation, I was deeply involved in making the initial process as broad and possible and then converging multiple times to bring out a kiosk prototype that we tested with users. 

During convergent thinking, we adopted IDEO's 7 Steps of Structured Brainstorming which posits: 

Some salient ideas we came up with

Some salient ideas we came up with

  • Defer judgement
  • Encourage wild ideas
  • Build on the ideas of others
  • Stay focused on the topic
  • One conversation at a time
  • Be visual
  • Go for quantity

At this point, I was manning the board during the ideation phase and while boiling our work down to one or two ideas. Following the steps, we came up with around 15 ideas. To reduce the number of ideas, we voted as a team. Some of the most salient ideas we came up with are shown on the right. Based on our constraints, the ideas had to confirm to the following rules:

We collapsed many of the features into the app

We collapsed many of the features into the app

  • They had to serve our user personas
  • They had to be broad & cover many bases
  • They had to be prototypable within a limited time frame and with limited resources

The idea we voted on initially was an AR app that would automatically identify flora and fauna when they pointed their cellphone camera at the object. We quickly realized that to improve the experience of the park, we had to incorporate our other ideas to have a holistic experience. 

This included remedying many of the existing problems by adding more features to the app. While it was initially only an AR based identifying app, it quickly swelled to have a virtual ranger, geocaching, a ranger finder, a physical livestream etc. 

I also realized that it may have been exclusionary to have such reliance on an app given our persona Penelope's advanced age. Older people may not have access to smartphones. So we decided to make an identical interface on a kiosk for our mid-quarter presentation.

Ideation: too many cooks

I had the apprehension early on that at this point, we didn't have enough focus. When we presented our progress in class, there were two main criticisms: 
a) The scope was too broad. We needed to narrow the scope.
b) The cellphone would literally get in the way of experiencing nature. We needed to eliminate it. 

So to come to the final set of features, we did some radical excision. The following changes were made with the following reasons: 
a) Removed the app: The app would literally get in the way of people experiencing nature. Most of the killer features (live updates, maps, park encyclopedia, the virtual ranger) would remain in the kiosk. 
b) Removed superfluous features: We decided with the kiosks to only focus on a few features instead of many. The map would be made paramount (since that's what most hikers and walkers wanted), and the virtual park ranger (now named "Ranger Reggie") would be made a systemwide feature. 

In conclusion, our ideas took the following journey in narrowing down: 

Process of iteration

Process of iteration

After boiling down all of our ideas and deleting the non-essential ones, we ideated on the flow of screens and created wireframes. Our final set of features was as follows: 

Deciding the screen flow

Deciding the screen flow

a) A map
b) Ranger Reggie storytelling function
c) Trail locator
d) Park-o-pedia to give information about flora and fauna
e) Weather
f) Alerts


Prototyping: constructing the experience

An early wireframe of the screen

An early wireframe of the screen

In creating the first prototypes, I and my teammate Eric decided on the user flows before creating the basic layout of the screens. One of the liberating aspects of designing screens for a kiosk was that we didn't have to refer to existing UI guidelines which companies like Google and Microsoft have. The basic layout was created with basic interactions on Marvel. 

While the early prototype was relatively crude, the basic layout already existed, with circular buttons, the state park logo, and Ranger Reggie occupying a prominent place. 

An early home screen

An early home screen

Based on our early prototypes, user research, and ideation, I created with the team a customer journey map to talk about the lows and highs that they will face as they go through their "journey" at Saltwater State Park.

The reasons why we decided to create a customer journey map were: 
a) Understanding the users as customers helped us better understand their experience beyond just the park. E.g. the journey map considered the process of choosing Saltwater State Park as well. 
b) It helped us identify actors beyond just the park and the animals. We took into account the park staff schedule, the pay station, and developers who might make the first version of the kiosk. 

Click on image to expand it


Testing: mimicking the natural experience

To test the prototype, we created a kiosk and park experience to test on subjects. The prototype had to have two main components: the physical and the digital. For the actual test, I created a usability test with questions tackling each function. The tasks were as follows: 

Evaluating the prototype

Evaluating the prototype

Experience prototype kiosk with "park" background

Experience prototype kiosk with "park" background

  1. Starting Status: Home Screen
    Task:  Locate your position on the map. 
    Completion criterion: Locating the “You Are Here”
  2. Starting Status: Home Screen
    Task: Choose a trail and go to its page. 
    Completion criterion: Getting to the pop-up menu, clicking on one trail and landing on the trails page. 
  3. Starting Status: Home Screen
    Task: You want to find out about the local wildlife. How do you do it? 
    Completion criterion: Click on “Park-o-pedia”, click on animals. 
  4. Starting Status: Raccoon page
    Task: You want to start afresh. Go back to the home screen.
    Completion criterion: Either click on “x” or on the Washington Trails logo.  
  5. Starting Status: Home Screen
    Task:  You want to find out more about the history of the park. 
    Completion criterion: Going to the Ranger Reggie screen. 
  6. Starting Status: Alert Screen
    Task: You get an alert. Can you find what the alert asks you to find? 
    Completion criterion: Point to “reef area.”  
  7. Starting Status: Alert Screen
    Task:  You’re not really interested in the alert anymore. How would you have it removed?  
    Completion criterion: Click on “x” button.  

We used an iPad to host the interactive prototype. The physical aspect was a library space with a whiteboard, where a park “scene” could be drawn. This was chosen to test one kiosk and how it would lead to further interactions with the surrounding “park” in a cheap way. 

The iPad “kiosk” was mounted on a cardboard box propped up on a chair found in the library. In order to integrate the kiosk into the surrounding “nature,” a team member bought a shower curtain with leaves on it to simulate integration. 

My team and I tested three students who approximated the age and demographics of our persona Jeremy. I was the moderator for one session and note-taker for another. 

The main problems spotted were as follows:

  1. People had trouble making sense of the maps. They wanted to know where utilities and toilets were.
  2. They had trouble finding their way back to the home screen. 
  3. The “You Are Here” text seemed interactive.
  4. The “Ranger Reggie” button looked like it should’ve opened a chat of some type.

Wrapping up: experiencing a state park

Based on the usability test, 

  1. Unclear maps: This spoke both to the maps themselves and the lack of a legend. The North vs. South trails were hard to identify.
  2. User control: All three users had some trouble finding a way to get back. One even suggested a home button.
  3. Unclear interactions: The “You Are Here” text seemed interactive. The “Ranger Reggie” button looked like it should’ve opened a chat of some type.

The final interactive prototype is shown below. 

My team and I also created a video to show how the final product would be used in a real life environment. Enjoy!

Reflections: a different view on design

Designing a holistic experience for me was a matter of teamwork and hard work, which is perhaps a bit obvious for all design projects. What makes this project different is the “holistic” portion. To design an “experience” and not a product requires a much greater knowledge of context and user motivations beyond just their motor goals. Creating an organization for bring an experience about was possible because all my teammates were using the same theoretical basis to create the experience. An actual organization that provides experiences would be more difficult depending on the industry.

From a usability testing perspective, I learned the importance of context to testing a prototype. While traditional usability testing focuses on strict lab-based testing to see how certain features work and how the user responds, experience prototype utilizes the environment the product will be used in as an important variable. 
As a designer, I was deeply involved in designing a screen for a form factor (kiosk) that I haven’t tackled before. It provided a unique opportunity to make a screen from scratch that wasn’t beholden on any specific “design language” or “UI pattern.” 
From a teamwork perspective, I learned to work more as a team player than usual. I tend to lead the teams I’m in and guide the team. This time, I understood that everyone in the team had different skill sets, and we all took on different leadership roles depending on the context. From my perspective, I led the whiteboard sessions during ideation, Eric led the refinement processes of the design features, and Erin took on the role of organizing meetings and ensuring the team was on the same page.