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.

Audience
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.

Team
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.

Challenges
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.

Week 9: GeoStories — Final Update

We are pleased to announce that GeoStories is proceeding according to (most of) our plans.


GeoStories is still all about connecting—and contextualizing—our many remarkable moments and memories. 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.

    How It Works

GeoStories still works the same way, except we’ve added several functions that improve navigation and user experience.

As before, you begin creating your story chapters from the GeoStories Story Board. However, you’ll notice that the Story Board is now one of three functional tabs.

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.

    Key Functions

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. Connecting The Dots: GeoStories does not present individual locations as separate entities of no (explicit) relation. Its Story Board interface allows for users to attach text and media to specific locations, and then connects those locations using numbered icons and lines, thereby guiding the reader to consider each location, or chapter, as part of a larger sustained narrative. Each chapter is also now represented as a button within the Table of Contents tab, allowing for additional navigation controls.

4. Google Places: Users can now 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.

    Notable Challenges

1. Table of Contents Design: The coding necessary to automatically create buttons within the Table Of Contents tab each time a chapter is created was complex.

2. Google Places: Making the Google Places checkboxes and markers appear took much massaging; making them clear and reload each time a chapter changed was even more difficult. Learned a lot in the process…

3. Saving Stories: It seems we may not be able to implement this prior to final presentation…

    Future Improvements

1. Navigation Buttons Within InfoWindows.
2. Transition from Story Board to Table of Contents upon hitting the “Publish” button.
3. Additional introductory instructional videos.

Week 8: GeoStories Home Stretch!

Back from Israel and ready to finish our GeoStories website for the final.

As a reminder, GeoStories is a social 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.

Final Project goals/Wireframes:

After consultation with EY Ventures, the final product of GeoStories is looking to be more a prototype/envisioning tool of the different types (historical, adventurous, public health/urban planning tool, etc.) and capacities of stories users can create instead of previous visions of saving/editing/sharing stories on the GeoStories website. This is because finding a way around hosting a server/storage space for story content has not come to fruition. Final goals for the website Andrew stated in the last post are: 

1. Creating a “Table of Contents”: A second tab on the Story Board page, a form that consists of buttons that represent the chapters a user has created in the “Story Board” section of the site. Yoh has courteously set us on the path towards creating the necessary function. The first tab will be where the user inputs content, then after they hit ‘Publish’, it will shift to the second tab, “Table of Contents” of the newly generated story. This story can be viewed as many times before the page is refreshed, as GeoStories has no current way to save stories. 

2. Navigation Buttons Within InfoWindows: Advancement in this area requires that Issue 1 first be resolved. We hope to emulate what is seen in Penguin Books, with navigation embedded within the info windows themselves which can move from chapter to chapter. http://wetellstories.co.uk/stories/week1/. An added bonus would be to figure out how to draw the red line between chapters really slowly.

3. Saving the Story: The way to save individual stories so that they can be accessed, edited, and shared later apparently requires the use of Server-Side Scripting, which, we have been advised, is presently beyond our pay-grade. And so we search for a way to capture a story via its URL. It seems this option may not be feasible. This will be a bonus feature if we can figure it out.

4. How-To: We want to create instructions on how to use the site. Once we have our main StoryBoard page/function figured out, we’ll incorporate class suggestions in creating a tutorial for the user. A step-by-step guide to flesh out the introductory video.

5. Angling the Brand: Is their a unique way to position GeoStories so that it stands apart from its most obvious competitors (HistoryPin, TripLine); is it necessary to do so, or is the generic, stripped down nature of GeoStories an advantage? I think GeoStories simplicity can stand on its own. 

6. Library: Instead of its initial intention in being a reservoir for user stories, I hope to make quick video demonstrations similar to the intro video on different types of stories users have the potential to create (old stories of their grandparents, present day vacations/trips, public health/urban planning teaching tools, etc.). I think if we do this, it will give GeoStories a uniqueness from similar engines such as TripLine and HyperCities.

Current Status: I was away last week and Andrew was in charge of moving forward. He has been working with EY Ventures on the programming and coding. We will regroup in class Wednesday and form a game plan of individual responsibilities to make sure we reach our final goals.

Challenges/Issues: 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.

GeoStories Week 8 Update

Here at GeoStories, we’ve taken the constructive feedback we’ve received from our peers and EY Ventures and are moving forward by addressing the following issues:

1. Creating a “Table of Contents” : A form that consists of buttons that represent the chapters a user has created in the “Story Board” section of the site. Yoh has courteously set us on the path towards creating the necessary function.

2. Navigation Buttons Within InfoWindows: Advancement in this area requires that Issue 1 first be resolved.

3. Saving the Story: The way to save individual stories so that they can be accessed, edited, and shared later apparently requires the use of Server-Side Scripting, which, we have been advised, is presently beyond our pay-grade. And so we search for a way to capture a story via its URL.

4. How-To: We want to create instructions on how to use the site.

5. Angling the Brand: Is their a unique way to position GeoStories so that it stands apart from its most obvious competitors (HistoryPin, TripLine); is it necessary to do so, or is the generic, stripped down nature of GeoStories an advantage?

Till next time…

Introducing… GeoStories !

We are pleased to announce the beta launch of GeoStories.com, a social story-mapping platform that enables users to create personal narratives around the places they’ve been and the experiences they’ve had there.



GeoStories is about connecting—and contextualizing—our many remarkable moments and memories. 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. The GeoStories Introductory Video gives a colorful and concise overview of the process. It should also be noted that much of the information included here is available at the GeoStories FAQ page.

    How It Works

You can begin creating your story chapters from the GeoStories Story Board.

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.


Once all the desired number of chapters has been written, and the user hits the I’m Done button, the map display zooms out to reveal all chapter icons, numbered and linked—a narrative constellation of your own making, ready to be explored and shared.

    The Team

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 expertise to the design and programming of the entire GeoStories site. She also created the awesome Introduction video. As Senior Story Teller, Pogany has contributed to the site’s concept and content.

    Key Functions

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. Connecting The Dots: GeoStories does not present individual locations as separate entities of no (explicit) relation. Its Story Board interface allows for users to attach text and media to specific locations, and then connects those locations using numbered icons and lines, thereby guiding the reader to consider each location, or chapter, as part of a larger sustained narrative.

    Notable Challenges

1. Interface Design: Coding of the input page was moderately complex, especially when trying to figure out how to add imagery or video to the same pop-up window as the text included in the description box. Also, understanding how to connect map icons with a visible line required assistance.

    Future Improvements

1. Saving Drafts: The GeoStories team will be looking for a solution that will allow for the saving and editing of incomplete stories.

2. Library Upgrade: Every story, once completed and fully mapped, should automatically be saved to the GeoStories library. The GeoStories team will look to allow story authors to obtain links for each of their stories, or share directly through the social network of their choosing.

3. Additional APIs: GeoStories presently incorporates the Google Maps API. Future manifestations of the site will potentially incorporate the APIs of various online media management sites such as Flickr, YouTube, Picasa, and others to facilitate enhanced uploading capabilities. Additionally, GeoStories will look to potentially incorporate the APIs of relevant social networks, such as Facebook and Twitter, to enable sharing.

Week 4: Group Proposal Update

With feedback from E.Y. Ventures, GeoStories has decided to change/add the following:

1) We will focus more of our efforts into website functionality, and add design features later as time permits. As a result, new wireframes were created.

Front page:

Brief description and instructional video. Will add a ‘sign in’ feature to have a GeoStories account to create/edit stories. To be Added: Navigation bar with ‘Sign In’, ‘Start Your Story’, ‘Search/Story Library’, ‘Contact Us’.

Input Page: Here is where our clients will build/edit their stories after signing in. The ‘Sign In’ page will require users to use their Gmail accounts to use their Picasa accounts where their personal pictures and videos are stored.

The Input Page will ask for information such as Place/Address, Time, Media Upload (Pictures/Video) and finally Chapter Text. Option to add as many ‘Chapters’ as the story permits (denoted by carrots on either side). Concerns: Converting Place/Address information to latlong, geocoding pictures/video.

Story Page View: Prototype story view after client has input a minimum of 3 Chapters. To be Added: Once you click on a chapter, icon on map will appear with info window pop up with media and chapter text with option for multiple pages/related media. As you move through the chapters, map will move (possible line linkage between icons/nodes) to next icon with new info window.

2) Still researching: Use of Picasa and Youtube API’s. Lat/Long conversion, Infowindow with text/media and mapping movement between icon/nodes. Will look into other potential API sources and how to further simplify our design.

3) Will start building forms (input page) and test story building functionality.

Week 3: Group

Proposal Topic and Discussion (same from last post): GeoStories is a Los Angeles-based consortium of Urban Studies and Culturomic experts working with clients to create interactive, experiential mapping solutions using web-GIS technologies. In particular, GeoStories specializes in combining narrative and cartographic practices to create engaging, consumer-facing digital map interfaces.

For their newest client, UrbanStudies206B, GeoStories looks to create a “StoryEngine” that would allow users to create their own multimedia, narrative-driven maps. The StoryEngine site—whose motto is, “Tell Your Story, One Place At a Time”—would in essence be an interface that prompts a user to input information and media that would then be used to almost immediately generate a personalized, digital map narrative.

Wireframes

1) This will be our awesome website frame:

2) Imagine above cool frame in the following wiresketches:

Functionalities: The interface would utilize a function asking the user to input a minimum of 5 locations, each with written descriptions (stories), and with the option of attaching media such as images/video. Once finished, and the user hits the “Mapify” button, a digital map incorporating the user’s designated locations, descriptions, and media would automatically be generated in nifty info windows. The map could then be easily edited, shared or downloaded.

API’s:

Google Earth (https://developers.google.com/earth/)

Google Maps (https://developers.google.com/maps/)

Historical Maps API? Youtube? Picasa?

Milestones – By Week 6: Full wireframe sketches of website. Want to have identified all API’s (specifically, historical map API’s). Figure out how to use the old vintage book image as a frame for website. By Finals: Fully functional website with a sample stories.

Concerns: 1) getting historical map API’s 2) learning enough web GIS to create this website 3) creating a working interface where users can input information we can convert (i.e. address —> lat/long coordinates) 4) storage space for user pictures/videos or would requiring picasa/youtube accounts take care of this?

Week 2: Group Proposal

 

GeoStories is a Los Angeles-based consortium of Urban Studies and Culturomic experts working with clients to create interactive, experiential mapping solutions using web-GIS technologies. In particular, GeoStories specializes in combining narrative and cartographic practices to create engaging, consumer-facing digital map interfaces. GeoStories is led by:

Andrew Pogany — Chief Experience Officer (CEO):

As CEO, Pogany leads business development and account management, and is thus responsible for determining the best ways to effectively address each client’s particular goals. Pogany works closely with GIS technologists as well as the SST to create immersive, interactive, and sustainable digital mapping solutions.

Uyen Ngo — Senior Story Teller (SST):

As SST, Ngo is responsible for collecting, curating, and managing the materials necessary to create personal stories to share with the world. As such, she works closely with clients as well as individuals to determine the required content and to ensure that content’s quality and security.

——-

For their newest client, UrbanStudies206B, GeoStories looks to create a “StoryEngine” that would allow users to create their own multimedia, narrative-driven maps. The StoryEngine site—whose motto is, “Tell Your Story, One Place At a Time”—would in essence be an interface that prompts a user to input information and media that would then be used to almost immediately generate a personalized, digital map narrative. For example, the interface would utilize a function asking the user to input a minimum of 5 locations, each with written descriptions (stories), and with the option of attaching media such as images/video. Once finished, and the user hits the “Mapify” button, a digital map incorporating the user’s designated locations, descriptions, and media would automatically be generated. The map could then be easily shared or downloaded.