Week 10: Launching GeoStories

It’s with great pleasure that we announce the quasi-official public launch of GeoStories!

GeoStories-Home Page

GeoStories is an easy-to-use and versatile story-mapping platform that enables users to create personal narratives around the places they’ve been and the experiences they’ve had there.

The site’s simple, streamlined interface allows users to pair their personal thoughts with meaningful images or videos pulled from the media site(s) of their preference (Picasa, Flickr, YouTube, Vimeo, etc.), almost instantly transforming the ubiquitous digital map into a personal memoir, descriptive genealogy, historical non-fiction, or lighthearted travel journal.

GeoStories can be used by a broad swath of the academic and civilian population–anyone looking to connect, contextualize, and share the many remarkable moments and memories of their lives. The GeoStories site represents a small but important step in making the educational mapping tools of academia available to a larger public, and yet, can still be used in developing the kind of rich historical narratives needed for research purposes.

GeoStories is a start-up funded by E.Y. Ventures and founded by Uyen Ngo and Andrew Pogany. As Chief Experience Officer, Ngo has dedicated her considerable time and expertise to the design and programming of the entire GeoStories site. She also created two instructional videos. As Senior Story Teller, Pogany has contributed to the site’s concept and content. He also created a video, and led the integration of Google Places.

Design History
The GeoStories interface began as a slightly highfalutin concept, one that sought to use an ornamental frame as the border of our central map.

GeoStories-First Interface Concept

After recognizing the limits of our time, funding and technical know-how, we simplified the interface, stripping it of any excessive aesthetic concerns and focusing primarily on functionality.

GeoSories-- Beta Story Board Interface

Feeling as if this was a solid base to build upon, we did just that: focus on adding functionality and increasing usability until whipping the GeoStories site into its present form.

GeoStories--New Story Board Interface

How It Works
You begin creating your geostory from the GeoStories Story Board. Upon entering the Story Board page, the user is greeted by a pop-up window of useful instructions.

GeoStories-- Instructional Modal

The Story Board consists of three functional tabs: Story Board, Table of Contents, and Related Places.

Each geostory is built of chapters; each chapter represents a different location; and each location can be detailed with personal thoughts and narrative text, as well as imagery or video.

As each chapter is completed, you’ll see a numbered icon representing the chapter appear in the GeoStories map display. Clicking on the icon will reveal the full, multimedia description of your experience.

Additionally, as each chapter is completed, GeoStories creates a corresponding button underneath the Table of Contents tab.

Each chapter can then be enriched by clicking the Related Places tab, which will display those Google Place categories related to the chapter’s location. These can be toggled on and off.

Once all the desired number of chapters has been written, and the user hits the Publish button, the map display zooms out to reveal all chapter icons, numbered and linked—a narrative constellation that can be explored and shared.

Likewise, the Table of Contents tab will then contain buttons for all chapters, providing an additional way of manually navigating back and forth within the geostory.

And additional navigation is provided by “Next” and “Previous” buttons within the chapter info windows.

Key Functions and Technical Documentation

1. User-Generated Map: GeoStories is ultimately a tool by which users can quickly become authors of personalized, multimedia, map-based narratives. Fundamental to this function is the use of the Google Maps API, as well as the Google geocoder, which enables a non-specific location entered in the Address input to be almost instantly translated into latlong coordinates and mapped.

2. Media Upload: Popular online media management sites such as Flickr, YouTube, Picasa, and Vimeo provide image and video links for content owned by the user or deemed available for public use. Presently, GeoStories users must copy and paste the appropriate image or video link into the Pictures/Video input on the Story Board. They also have the option of including the embed codes of images and videos in the Description input.

3. Navigation: Users can navigate through the stories they’ve created using chapter buttons in the Table of Contents or “Next” and “Previous” buttons in the chapter’s info window. Table of Content buttons were coded with the help of Bootstrap; info window buttons uses the same Modal as the Instructions Pop-Up referenced below (#5). Both the Table of contents and InfoWindow buttons allow a user to move seemlessly (and non-linearly) through the story chapters.

4. Google Places: Along with Google Maps, GeoStories utilizes the Google Places API to populate the “Related Places” tab on the Story Board page.Users can search for different places of interest related to each individual chapter and its corresponding location, thereby enriching the narrative and providing GeoStories with additional functionality that widens its potential uses.

5. Useability: User experience is of utmost importance to GeoStories. That why created several instructional videos (using iMovie), a FAQ page, and an Instructional Pop-Up that appears each time the Story Board page accessed. The Instructional Pop-up was created using code for a standard modal, a “child window” that requires users to interact with it before they can return to operating the primary application.

6. Design: The GeoStories site was programmed using HTML, CSS, and Javascript. Our design code was aided considerably by BootStrap, as well as the friendly technicians at EY Ventures.

It’s been a sharp learning curve for this 2-person team. A lot of the brainwork/coding was from Yoh. Because of the unique nature of our website, we weren’t able to always work off what we learned in class and had to rely on the genius of Yoh/Erin/Ryan. We’re very grateful for that, but wish we had more tools ourselves to do more of the foundational work.

Future Changes

1. Social Media Connection: The next iteration of the GeoStories site will necessitate a user to sign in with either their Google, Facebook, or Twitter accounts before being able to create or open stories. This will in essence set the user up with a GeoStories account. after acquiring an account, users will be able to enter the Story Board page and create, open, or share a geostories. T

2. Saving Stories: Once an account is established, users can also store their stories. Saved stories would appear in the Library page of the GeoStories site, from which the user can choose to share(via social network), delete, or edit their stories. Establishing such a library requires advanced server-side scripting.

One thought on “Week 10: Launching GeoStories

  1. Pingback: GeoStories: Tell Your Story, One Place At a Time | The Pogany Portfolio

Leave a Reply