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