Native Mobile App for Pittsburgh Department of City Planning

In this project for Interaction Design Studio at Carnegie Mellon, our teams were challenged to design a hybrid service in a new mobile app that provides value to the the Pittsburgh Department of City Planning by deepening its relationships with its stakeholders and creating new audiences for its offerings. The mobile app had to take advantage of native smartphone capabilities to address pain points or opportunities within the department of city planning’s use of more than 3,000 vacant parcels of tax-delinquent land.

Role

UX & Interaction Designer

Team Members

Brady Baldwin, JP Park, Rachel Arredondo

Timeframe

5 weeks, February to March 2021

The Problem: Lots of Lots

Thanks to a decrease in population since the end of Pittsburgh’s industrial boom, much of the city is dotted with vacant lots. The City of Pittsburgh and the City Planning department have struggled to find solutions to their vacant lot problem. Vacant lots are tax-delinquent, leaving money on the table for the city. Vacant lots do nothing to improve the communities which surround them and often hurt property values. Lower-income neighborhoods are disproportionately encumbered by vacant lots.

 

The Solution:

The Lots To Do app leverages native mobile data to provide value to community members by giving them a platform that helps to repurposed abandoned lots from unsightly eyesores to a hub of community activity. If you have ever experienced the situation where you have just moved to a new city or just generally feel unconnected with your neighborhood, the Lots To Do app helps to connect community members with both the people and land around them.

Doing the research

Research and Domain

Department of City Planning
From our research, we determined that the Department of City planning currently heads most of Pittsburgh’s efforts in repurposing the vacant lots.

We identified the three main goals of the department to focus on for this project:

  • Social: Foster neighborhood interaction

  • Financial: Re-imagine vacant lots’ potential

  • Ecological: Encourage environmental awareness

Current Efforts
There are several government programs and third-party organizations involved in ongoing efforts to improve the vacant lot situation. The Adopt-a-Lot program is run directly through the department of City Planning, and is focused on empowering community members to repurpose abandoned lots into functional spaces such as communal gardens.

We wanted to build on the spirit of this program for our app, giving power to the people to represent their community’s interests in vacant land use.

 
LTD+Process+Book+05.jpg
 

Stakeholders

We examined an array of stakeholders and their relationships to each other to create a concept map of the problem space before beginning work on a solution.

From this activity we identified several key opportunities:

  • Residents are disconnected from the City Planning office and don’t get as big a say in community decisions as they could.

  • There are many independent organizations and volunteers working around vacant lots, but no centralized effort to bring them together.

Defining the Focus

Ideating with Crazy 8’s

Our group worked to conceptualize a solution to the city’s lot problem based on the departmental goals and stakeholder needs we identified in research. We performed the Crazy 8’s ideation activity to rapidly develop some ideas.

Process Breakdown

Using a dot voting system, we combined some of our favorite ideas from this session into a rough outline for an initial prototype. Our solution would be a native mobile app focusing on bringing Pittsburghers together for events held on vacant lots.

We wanted to incorporate mobile tech, like GPS to develop a user map and incorporate elements of gamification so that users would become engaged with the service.

 

Scenario Building and User Flows

To better understand the use case of our service, we created several scenarios featuring end users and wrote out user flows to describe their experience. The map on the right shows the area of focus our grouped scoped as the area of key impact for LotsToDo.

Process Breakdown

We began by deconstructing our stakeholder map to narrow in on the few stakeholders who would be directly interfacing with our app.

We identified key needs from this model and translated them into user-focused stories, prompting us to think deeper about how our solution helps the user by the end of their journey.

 

Sample User Scenarios

To create the simplified user flow to use as the basis for our screen selection, we each wrote out detailed scenarios and pulled key elements from each.

 
 

“Joslyn just moved to Pittsburgh and is looking for ways to get involved with her community. She has noticed that there is an empty lot on her street. She doesn’t know too many people on her street yet, so she goes online to find out what she can do about the unsightly lot but she can’t find any information on it or how to get something going. Not finding anything online and too shy to ask her neighbors about whats happening with the lot, she lets it go and nothing ever happens to the lot.” - Jessica

“Jordan is out on a walk with their son. They are exploring a new neighborhood in Pittsburgh. They saw on THE APP that there was going to be a food truck and small makers fair at a lot in Bloomfield. They digitally checkin and collect a stamp. Users with X amount of stamps can receive community badges (Best explorer, Biggest eater). They get a notification from THE APP that they can also visit a nearby lot with a native flower garden. At the flower garden they are able to meet with the lot owner and exchange tips and encouragements for how they can start their own lot.

Back in their own neighborhood, they use THE APP to find a lot near their house. They start a project on THE APP and publish it so other can join in. THE APP allows them to message the Office of City Planning and has a project checklist and connects them to city resources. Others can see the project get together a group of people to help finish the project.

THE APP is an open social platform for community involvement. On seasonal holidays, the city can reach out to community lots to coordinate larger fairs or festivals.” - Rachel

 
 

Low Fidelity and Rapid Ideation

Understanding the Medium

Native Mobile Capabilities

Lots To Do maximizes the use of GPS, NFC, and Constant Connectivity inherent in mobile devices to show the flow of social movement in near real-time. The table on the right details key capabilities as well as their function within Lots To Do.

Connectivity as an Affordance
As a service that promotes community engagement by connecting people with events and gatherings (planned or organic) across Pittsburgh, we knew we had to be able track movements as they occur. Since people carry mobile devices on them at almost all times, the app uses this as a proxy for tracking movement and events data, so event counts can be updated live as well.

 

What are you going to do with all that data?

In order to provide more accurate services, some data has to be stored, however how that data is stored is vital to establishing trust with our service.

Data Usage Outline
The data gathered will not be used to personalize a feed or the content but rather to proved more accurate location movement data as it relates to the goals of Lotstodo. Other data gathered serves to promote interaction between people at events through friends features but this data is localized to the users system and their contacts

 

Moving to Mid-Fidelity

Contextualizing and highlighting the data and mobile capabilities to create a stronger service ecosystem of features that empower connected communities

 

After establishing the central scenario in the low fidelity designs, our mid-fidelity designs then used our understanding of the native mobile capabilities and the data gathered to target the key screens to showcase in our prototype.

Key Feedback Integrated
Ability to look for upcoming events in an area.
Clarity about how the map features and navigation
Define how the badge system works

Setting Style

Voice and Tone

Building connection across communities of diverse people requires that we create a voice that reach across different age levels, ethnicities, and even sides of the river. We chose a balance of words that allow us to walk this line.

Our voice and tone will allow us to be inviting for our users to engage with because we want to promote more interaction across communities within Pittsburgh. This respectful and enthusiastic tone will also help to make the community excited to get things done without debasing the work that is involved to push a project to completion.

 

Visual Style

Using the voice and tone guidelines as the basis for the defining the visual style, we choose colors, typography, and icons that fit this tone.

The visual style aims to provide a welcoming overtone but at the same time keep functionality and use at its core. The use of color and visual accents is limited to a few areas on the screen at any given time.

Key Visual Elements
The elements pulled out on the left detail key interaction moments within the LotsToDo experience. These elements showcase how color and typography are combined to create a friendly but trustworthy interface.

 
LTD Process Book 19.png
 

Combining It All

Prototypes High Fidelity

Using the features that we created in the mid-fidelity prototypes, we created our first high fidelity prototype with the visual style elements that we felt matched the voice and tone that we talked about creating for the app. The aim was to create an app that felt clean and easy to use but also friendly and engaging. These eventually became key influences in defining the visual style elements outlined in the previous section.

Iteration Process
In class, we received feedback on our mid-fidelity prototypes from other teams and we used this feedback to help create our first high fidelity prototype.

 

High Fidelity Critique

In a critique with Paul on one of our first high fidelity prototypes, we recieved the following feedback:

  • Create a more distinct logo

  • use a cleaner neighborhood map

  • Define clearer parameters around the crowd growth/decline meter (colors choice, single color)

  • Streamline typefaces

  • Add more visual style

  • Map data flow opportunities

 

High Fidelity Prototype

In the final LotsToDo app, our team utilized our ideations on visual style, voice and tone in our earlier stages to create and app that leverages native mobile features to connect users with current and future events in their area.

Reframing Our Focus
Using the feedback we received from Paul, we went back to the voice and tone activities that we had done to re-evaluate the visual design of our first hi-fi prototype. To guide the second hi-fi design of our flow we created a user, named Jay, and a scenario for him to walk through the app so that we could explore each phase of use.

Using this user scenario, we identified three main phases of use for our app:

1. Pre-Event
2. At Event
3. Post Event

 
 
 
 

Phase 1: Pre-Event


 

Phase 2: At Event


 

Phase 3: Post Event

 

Micro Interactions

Our team designed the micro-interactions in our app to:

Specifically on the map exploration page, our team designed micro-interactions that would allow users to easily navigate the app while dragging their finger across the screen so they can easily find the events that they want to attend. Also, once tapping on an invent in the map, the map zooms into that event card, bringing up a tile of more details. This micro-interaction upon tapping helps to focus the user’s attention on the intended event and its details.

Once the details tile has been pulled up, the user can also swipe left and right to easily look at the details of nearby events. This allows the user to compare events easily within the same window instead of having to return to navigating on the map.

Pitching

Communicating Value

Once our prototype was finished, it was important for us to communicate the values our mobile service offers to the executives. We divided the narrative into 3 parts:

  • Introduction and background research

  • Approach to tackling the problem space and the solution

  • Benefits and further opportunities

Iteration Process
In class, we received feedback on our mid-fidelity prototypes from other teams and we used this feedback to help create our first high fidelity prototype.

 

Feedback

Problem:

Once we divided each part, we all wrote our pitch section of the pitch asynchronously and created presentation slides that correlate with what we wrote. Due to the asynchronous nature of our pitch development, we overlooked the opportunity and value to see the pitch as a whole. We have also missed out explaining thoroughly the reason for our mobile app’s data usage and its importance. Lastly, the solution presentation should have been more of “show and don’t tell” format.

Solution:

We decided to introduce Jay, a prospective user of the application to walk through his experience of using the application via the three stages we have identified in our solution. Also, we introduced the benefits at an early stage of our presentation and reminded of those benefits as we went along our pitch, while keeping it not repetitive.

 

Key Points

We were able to settle down on the below four points as our main focus in the pitching. First three had direct relation to our client, the department of city planning’s goals and the data usage showed that we care about the users’ data as well as how our app can bring a better experience through collecting the data.

 

Social

Foster Neighborhood Interaction

Financial

Re-imagine the potential of vacant lots

Ecological

Encourage Environmental Awareness

Data Usage

Thoughtful collection of data and its usage

 

Benefits Overview

When thinking about the benefits that this app provides, the first thing we considered was what the goals of our client organization was. We have identified the three goals the department of city planning has on the right and how our app can meet each of the goals they have outlined.

 

1. SOCIAL:
Foster vibrant interaction in the community

2. FINANCIAL:
Re-imagine the potential of vacant lots and draw in revenue

3. ECOLOGICAL:
Encourage environment awareness by using vacant lots

 

Further Opportunities

We believe that our mobile service has a wide range of possibilities in terms of expanding its influence on the community.

1. PROJECT ORGANIZER:
By having the citizens themselves organize the projects, feel ownership of the vacant lots and the app to create more interaction amongst themselves.

2. STIMULATE LOCAL ECONOMY:

Provide data collected from the users to nearby local restaurants and stores so they can set-up special promotion when there are nearby events. The stores will be able to receive demographics and promote their promotions through the application with the notification feature in the app.

What I learned.

This project helped me to focus on integrating the native mobile features that phones have and integrating those features into the design of the app. I also enjoyed being able to think about users privacy and how to educate them on how their data is being used within the app. Also, through the multiple iterations of differing fidelities I learned the importance of creating strong voice and tone and using user scenarios to help create a coherent story through our prototypes.