LADCP STORY MAPS

One of the goals of the Los Angeles Department of City Planning (LADCP) is to document the rich history of the city in a way that is accessible and engaging to the public. The city has 38 historic districts. Each has an interesting story to tell about its history and character. The city decided that Esri Story Maps presented an ideal way to tell those stories. Esri Story Maps combine online maps with narrative text, photography and video.

The story map creation tools that Esri provides are robust, but not designed for volume production. LADCP asked geospatial systems consultant NorthSouth GIS to assess the challenge and propose a volume production method. I was brought in by NorthSouth GIS to serve on the team as aspecialist for both UX and UI.

Company:
Los Angeles
Department of City Planning

Role:
UX and UI

Topline UX Assessment

At the start of the project I was asked to do a brief UX assessment of the challenge. The intent was to summarize the goals, highlight potential opportunities and solutions, frame up the internal discussion, and propose next steps based on UX best practice.

Personas & Roles Definition

The expertise required to create the story maps was spread widely across people and teams, so our solution needed to accommodate multiple authors of varying skill levels. It was also important to define a central coordinator role to train authors, delegate tasks, project manage, conduct reviews and manage consistency. The two key roles therefore became Author and Manager. I created personas and provided definition around the responsibilities, interaction and overlap of these two roles.

Personas_Roles_01Personas_Roles_01

Experience Map

The goal of the project was to design an efficient process for doing volume production. That meant examining all opportunities, from the initial gathering and organizing of information to the final review finesse and release of the story map. Examining offline tasks was as important as examining online tasks. I created an experience map that captured all story map creation steps including the hand-off between author and manager roles. The map summarized at the bottom the insights and opportunities that could be leveraged when crafting the ultimate production solution.

ExperienceMap_03ExperienceMap_03

User Entry Flow

User entry to the production software had to account for multiple user roles (author, manager and reviewer, each with their own set of permisions), as well as possible entry through use of a deep-link. I designed a user flow that captured the logic required for typical use cases.

UserEntryFlow_02UserEntryFlow_02

Style Translation

Although the story map production tool would be a stand-alone site, the desire was to leverage the look and feel of the LADCP website. It needed to feel compatible so the user could transition to and from the tool without feeling as though they had left the LADCP site. I created a simple style guide that would translate well to Bootstrap, the front-end framework of choice.

StyleTranslation_01StyleTranslation_01

Bootstrap Prototype

Given limited front-end development resources for this project, I prototyped in Bootstrap so the prototype could be readily repurposed for a final interface build. Use the link below to access the prototype and try out the features.

[unex_ce_button id="content_bafqp7q13" button_text_color="#78a409" button_font="regular" button_font_size="16px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="transparent" button_padding="10px 30px 10px 30px" button_border_width="1px" button_border_color="#78a409" button_border_radius="30px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#78a409" button_border_hover_color="#78a409" button_link="http://chromazoa.com/prototypes/storymaptool/index.html" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]Preview Prototype[/ce_button]
PrototypeShowcase_01PrototypeShowcase_01

I designed the tool to be mobile-friendly for use in the field.

SMTool_MobileComp_01SMTool_MobileComp_01