Project in CGT Graduate Studio ​

Mapping the Celery Bog

Designing an interactive 3D map which aims to enhance visitor’s experience at the Celery Bog Nature Area

The Celery Bog Nature Area is a preserve of 105-acre natural wetland located in West Lafayette, Indiana. The Lilly Center acts as the visitor center, offering a variety of activities explaining the park and its history, as well as its ecological significance. The Celery Bog had renovated their facilities and trails in order to improve its visibility and appeal to the public. They also had increased outreach to raise public interests and draw new patrons. For example, attending the graduate student orientation expo where one of the teammates first met the park’s director.

In this project, our team worked with three center directors, Dan Dunten, Lynn Layden, and Gale Turco over the course of the Fall 2018 semester. In order to create an interactive, location-tracking 3D Map embedded into the Celery Bog’s website. The aim of this was to help enhance regular park visitors’ experiences at the Celery Bog Nature Area and encourage new people to engage with the park beyond the Lilly Nature Center.

Role

UX Researcher

UX Designer​

Timeline

2018/9 ~ 2018/12 

Team Member

Alyse Marie Allred

David Hrusa

Lu Ding

Yixuan Bian

Challenge

"How can we design a map that meets the Celery Bog’s need?"

 

 

User Research

SWOT Analysis:

To help us understand and focus on strengths, minimize threats, and take the greatest possible advantage of opportunities available to Marsh, we have laid out SWOT analysis.

As most grocery stores lack the community aspect, concentrating on this aspect can be promising.

Marsh

swot.png

Interview & observation :

As Marsh business model is “Business to Customer”, we carried out primary and secondary research to find out what can be a potential improvement in the grocery shopping experience

 

We divided consumers who go to the grocery store into four categories- family, elderly, disabled, and college student.

Customer

customer2.png

Response

User Research

Secondary Research

From our research, we realized that restoring and planning of the pedestrian route was the key subject towards the success of a park leisure and tourism approaches. At the same time, it could increase the accessibility for many unwelcomed trails that actually amazing to be discovered.

We also learned from other natural areas and National park. Based on our observations, local-level parks mostly rely on basic 2D hand-drawing maps to guide their visitors, sometimes embed a snapshot of google maps. This was not to say that there was no need for further technologies. The truth was most small parks and nature areas had neither the expertise nor the funds to properly attempt their creation.

Primary

Research

Interview

Questions in the early meetings revolved around the functionality of the Celery Bog and its current resources, as well as brainstorming for potential projects that could fit within the semester’s timeline.

 

The questions include who are the major users of the park trails and what past technologies that the park had tried and failed.

Field Research

In our final major meeting, we physically toured the length of the park in order to gather physical data. Questions in this part of the research included:

  • What are the major landmarks in and around the park?

  • What are the physical coordinates of said landmarks, and the nodes connecting trails?

  • Approximately how long does it take to walk the various trails?

  • What are the locations of public service stations (trash receptacles, public restrooms, etc)?

IMG_7381.JPG
 

Response

The primary needs of the Celery Bog were:

 

  • Trail Mapping: According to park officials, visitors (both regular and newcomers) frequently require the overall length of individual trails.

 

  • Landmark Mapping: In conjunction with the trail mapping, it was suggested that the interactive map also identify the park’s landmarks and provide pictures to help visitors find them.

 

  • The Admin Page: The personnel raised the need to update and maintain the website by themselves so that it can be continuously functioning and will not be abandoned by the end of the semester.

 

Design Process

1. First Iteration: Paper Prototype

We first made rough sketches and a wireframe mockup which showing the interface of the map opened up in a phone browser.

2. First Testing: Cognitive Walkthrough

We conducted simple testing to check whether users could intuitively grasp at the map’s controls.

IMG_7443.JPG
IMG_7874.JPG

3. Second Iteration: Low Fidelity Prototype

 

We iterated a higher level prototype which offered a cleaner interface and more intuitive options.

 

4. Second Testing: Cognitive Walkthrough

 

We did a cognitive walkthrough with 4 people. Here were some key insights gained from the testing:

  • The 3D model makes it easier to understand the terrain, but the landmark and trail information will be clearer on the 2D plane. We have to consider the trade-off or adding switching features.

  • The homepage is a bit too simple, which confuse user to go to the next step. We should find some way to highlight the switch button such as a moving prompt.

  • We refer to the iPhone button to design our switch button since it shows the message of neither landmark mode nor trail mode. However, some users still wonder whether they could use the two modes at the same time.

  • Lacking direction indication, exit or go back button at every page, and other landmarks, especially entrances and exits.

  • The scope of the park could be highlighted on the map.

  • The interface looks exactly the same as Google map. We should give more reasons for what we can offer and why people need this.

 

IMG_8030.PNG

Homepage

 

IMG_8034.PNG
IMG_8032.PNG

Landmark Mode

 

IMG_8036.PNG
IMG_8031.PNG
IMG_8035.PNG

Trail Mode

 

IMG_8033.PNG

5. Final Iteration: High Fidelity Prototype

 

Our final iteration was a 3D map webpage. Users could open it with their phone and computer.

6. Final Testing: Cognitive Walkthrough

 

The final testing conducted in class with 34 classmates. The following steps and questions were followed:

  • Please explore the map on the phone browser and tell us your thought.

  • Can you zoom in and zoom out the map?

 

The results of usability testing are:

  • The map is too sensitive on the phone.

  • The interface and options are not intuitive enough.

  • Lacking some functions and some icons are not working.

  • There are some bugs with the trail function.

  • The mountain is three-dimensional, but not obvious on the phone.

t3.jpg

In addition, we also conducted a cognitive walkthrough of the map on computers.

We found that most people prefer to use the map on computers rather than using a phone browser. The reason is that the computer offers a larger view with a larger screen as well as a more controllable and accurate way to zoom the map by using a mouse. However, it's more intuitive and convenient to zoom in on the phone with fingers. 

testing3.jpg
 

Outcome

On the front end, the park can be seen in three dimensions. The user is able to scroll and zoom to get a better sense of the park area. The map presents in bright yellow the available trails, as well as major landmarks. A pop-up screen at the bottom offers information on individual landmarks, including local history and photographs.

On the upper right-hand side are the path planner and the location tracker. Between those two things, the user can calculate where they want to go to the park and approximately how long that would take.

final1.jpg
 

On the back end, personnel can access using the web address/admin, and log in with their username and password. The main functions are Path Manager, Points of Interest, and Image Manager.

final2.jpg

Image Manager stores previously existing files and allows users adding a new image.

 

Path Manager allows users to choose and upload path data gathered in the park.

 

Point of Interest allows users to define specific points according to their GPS coordinates, giving it a name and description, as well as uploading photographs.

final3.jpg

Reflection

It was a precious experience for us to be able to apply UX skills and work with real clients. We faced many challenges during the whole process such as how to arrange meetings that everybody could attend, how to distinguish the priority, and how to collaborate with our programmer. Most difficult of all, how do we design sustainable technology that an older, non-technical audience can maintain?

This project was basically done but we are still making some adjustments before we hand the final product to the Celery Bog.