︎









Yinz City Plan

TEAM:
Yuran Ding
Amanda Crawford
Ankita Kundu
Raajat Gupta

CLIENT:
City of Pittsburgh Department of City Planning (DCP)

ADVISOR:
Paul Pangaro
Sara Blumenstein

ROLE:
User Research
Experience Design
User Interface Design

TOOLS:
Figma
Photoshop
Illustrator
Yinz City Plan is a data-driven mobile service application that bridge the gap between DCP and residents and improve the livability of Pittsburgh by developing a more efficient communication channel between DCP and Pittsburgh residents.

In this project, our group imagined working within the UX team of Pittsburgh Department of City Planning (DCP) and aimed to innovate by exploring new technologies and methods for meeting the needs of DCP’s stakeholders. Our team has been tasked with defining the problem scope of the service; and designing a new mobile app to bring that service to a set of stakeholders.


DCP’s Website


00.  Domain & Company Research


What is DCP?
DCP ensures that a consistant and orderly approach is taken to the way land is used in the City of Pittsburgh. It works with community leaders and other public entities to develop and implement policies and programs that help it achieve this goal. Their overriding goal is to, "sustain and enhance a thriving city of neighborhoods for the people who live, work, learn and visit here".

During our initial research, we found that the Department of City Planning (otherwise known as DCP) has initiatives of town hall meetings, dedicated staff like Neighborhood Planners, and places on their website to see new community improvement projects, we knew that the DCP is dedicated to creating a transparent environment and maintaining open channels of communication.

Organizational Structure of DCP (Source from https://pittsburghpa.gov/dcp/about)

What are the trends in urban planning?
  1. More accurate surveying: Online platforms and social media makes it easier for the government to understand the public's need and further democratize the urban planning process.
  2. Shift towards “smart cities”: Urban planning will need to incorporate data-collecting measurements into infrastructure and developments, so that cities can better monitor activities and adapt to changes.
  3. Mixed Reality (MR): Urban planning will increasingly use mixed reality or augmented reality to model and visualize how developments will look before they’re built to help think through urban areas and project environmental impacts.
Stateholder Analysis



As a group, we generated a stakeholder map that included every stakeholders that we have identified in our initial research. For each stakeholder, we wrote a speech-bubble to summarize their mindset and goals. Looking at our stakeholders at a larger scale, we started to categorize and re-categorize them. The first apparent categorization what we thought of was internal vs external stakeholders (the blue stickies are external stakeholders and the yellow stickies are internal stakeholders). After mapping the value flows between each stakeholder, we challenged ourselves to re-categorize, using colored backgrounds as shown in the diagram on top.

Key insights that we found were that:
  • The current Pittsburgh citizen was at the center of value flows.
  • Some Pittsburgh citizens (mostly community leaders) are directly exchanging values with DCP stakeholders, but not all citizens have such a direct channel.
  • The co-creation of livability arose during Pittsburgh citizen’s interaction with public officials that care about general livability needs.

➡️ Based on these insights, we thought it could be interesting that our app could make the exchange of value more efficient and effective for all citizens.
“Competitor Analysis”
The City of Pittsburgh Department of City Planning is unique and irreplaceable in Pittsburgh’s urban planning decision making. However, there are other consulting agencies that partner with the City of Pittsburgh Department of City Planning in the urban design and planning process. We identified 3 such major companies:

  • Company 1: Camiros

    Keywords: full-range service, zoning, planning, urban design, landscape architecture

    Camiros is an urban planning firm providing a full range of services in the areas of zoning, planning, urban design, and landscape architecture. The firm works nationally with a diverse mix of communities ranging from small towns to large metropolitan areas and counties, including: New Orleans, Louisiana; Oklahoma City, Oklahoma; Baltimore, Maryland; Tredyffrin Township, Pennsylvania; and numerous communities.

  • Company 2: Econsult Solutions
    Keywords: economic consulting, city planning policy

    Econsult Solutions, Inc. (ESI) provides businesses and public policy makers with economic consulting services in urban economics, real estate economics, transportation, public infrastructure, development, public policy and finance, community and neighborhood development, planning, and litigation support. ESI has the capability to engage in projects of any size, from comprehensive long-term studies involving complicated economic arguments and extensive data analysis, to short-term advisory support.

  • Company 3: Mongalo-Winston Consulting
    Keywords: urban design and planning, decision making

    Mongalo-Winston Consulting offers services ranging from physical design (urban design and planning), to decision making through collaboration and thoughtful public engagement, and assistance on implementation and approvals. Ivette Mongalo-Winston specializes in consensus driven community engagement, public outreach and facilitation, and master planning.

➡️ After doing the "competitor analysis", we found that DCP has consulted with a diversity of agencies each differing in their specializations during the city planning and policy making process. However, there was a lack of involvement and input from Pittsburgh citizens during this process.



01. Design Opportunities

From our research, we identified 2 major design opportunties:

  • Increase access to communication channels for all citizens
    Currently, not all Pittsburgh citizens have the chance to directly communicate to DCP. Direct communication usually happens during meetings on Saturday nights, and is not so accessible to a lot of residents.

  • Increase venues for citizens to bring in detailed city planning proposals during development process
    City planning consulting agencies bring zoning and planning proposals to DCP. However, pittsburgh citizens (usually community leaders) mostly participate in early stages of city planning and don't really have venues to bring in more detailed city planning proposals (such as where to build a new library, or even the facing of windows in a building).


02. How Might We

How might we make commuincating and proposing to DCP more accessible for Pittsburgh residents in order to bring in efficient conversations that create values to both residents and DCP?



03. Design Constraints

Brand Identity & Attributes of DCP
  • Graphic Standards & Corporate Colors:
    • Typography - Roboto
    • Yellow, dark blue and royal blue coloring used consistently (example above)
    • Association with the City of Pittsburgh through its logo (example above)
    • Separate sub-branding for each high-profile initiative (e.g., Forging PGH)
  • Brand Personality
    • Informative
    • Inviting
    • Helpful
    • Altruistic
Establishing Tone & Voice for Our Service
Tone Matrix

Determing our voice.

Based on DCP's brand personality and our objectives, we wanted the tone and voice to be something approachable but still trusted as a source of information. Because of this we had to balance and be:
  • Informative but not Dry
  • Trustworthy but not Authoritative
  • Friendly but not Playful
  • Casual but not Irreverent


04. Design Strategy


Pittsburgh resident: "When I walk around my neighbourhood, I have no idea what changes are being made to the places I frequent everyday, or if these are changes I want. Help me learn about the changes to the city that affect me, so my community can have a voice on how our favorite places are developed."

High Level User Flow of Our Data-Driven Solution

When creating our design strategy, we had to decide who to focus on as users for our service. Because we had Pittsburgh residents at the center of our stakeholder map and they navigate Pittsburgh everyday, we decided to create a mobile application for Pittsburgh residents that would allow the DCP to better help residents.

Based on the design opportunities identified, we wanted to:
  • Communicate to residents about what was happening around them and
  • Give them a louder voice and opportunity to bring in proposals in the DCP development process.

We decided on these two main functions because that situation put our product directly between the DCP and community where we could create value for both stakeholders.


Data Flow

  • The use of data in our app was also discussed and we wanted to again create value for both residents and the DCP.
    • To do this, we knew the DCP had to provide information to residents in order to receive data back.
    • We also thought that native phone capabilities such as location data could add value for the DCP and not ask too much of the residents.

From our domain research, we knew that mixed reality has been effectively used in some cities across the world with construction projects, and has greatly increased the user engagement with community improvement projects. Additionally, mixed reality provides a fun way to communnicate with the residents transparently and openly, which is coherent to DCP's identity and objectives.
  • Thus, we decided on using mixed reality to visualize a building plan and a mixed reality view to suggest a particular addition to the community in order to facilitate a time-efficient way to view & contribute ideas to the city plans.

In addition to the mixed reality components, additional features like
  • geolocation,
  • maps for the DCP and user-submitted projects, and
  • comments were also included.

Geolocation was incorporated to notify the resident when they were near a future construction site (ensuring they did not miss the opportunity to use the mixed reality), comments allowed building a virtual community within residents, and the map allows residents to pinpoint where they would like to add a community suggestion.
Data-Driven Values
Data-driven values for DCP and residents


05. Prototypes & Iterations



Wireframe
In the wireframe, one can see that a community suggestion is chosen from a list of pre-made models, and this was chosen with the audience in mind: a busy Pittsburgh resident who likely doesn’t have time to build a full creation with online drawing or building tools for a city app.

Wireframe
Mid-fidelity Prototype
After presenting our wireframes, we received a few critiques and questions about the app’s functionality that were incorporated into the mid-fidelity prototype.

There were some concerns about unclear points of entry into the app, and a suggestion was made to make three distinct points of entry: notification entry (into the specific project view), neighborhood specific view, and adding a suggestion to the map. Each of these 3 points of entry can be seen in the mid-fi version of the prototype: notification entry for top two rows, neighborhood specific view on last row, and add a suggestion on third row.

There were also some concerns about residents wanting to use the app and suggest things to the DCP. Would the DCP even pay attention to the comments and suggestions built the app? And although this wasn’t specifically designed on the application, we decided that the DCP would have to review the top 5 projects every month in order to keep up user engagement and keep a transparent image.


Mid-fidelity prototype.





Further Critiques

Translating to High-Fidelity Prototype

In the final design screens, we focused on creating a flow that had ample feedforward, and was intuitive to navigate through as a result. One of the biggest pieces of confusion from our mid-fi was the gap between users’ mental models of the app, and the actual app’s layout.
  • To fix this, we started by ensuring that the most critical pieces of information were shown to users upfront (e.g., the tab for the school), but when they did want more detail, that detail was readily available and consistently presented across pages. We created a consistent presentation between the map project details page and the community project details page.
  • We also made navigation far easier for users. We created easy filtering systems for both the map (filter by contributor), and the community (filter by 4 different options) pages. Users could find the exact information they wanted quickly and intuitively.
  • We also created flows through some of the more complex areas of our app (e.g., contribution of projects) instead of having everything represented and available to the user at once. This acted against information overload, and made it easier for users to understand what actions they should be taking at any given time.
Adding Navigation-Based Interactions

In adding interactions, one of our biggest tasks was determining how best to create flows that chunked information and presented it only when needed, while also allowing for easy user input.

How could we easily transition from a summary to detailed view?

How could we make filters digestible?

What was the best way for users to enter information on modals?

We found unique solutions for each question.
  • To go from summary to detailed views, we integrated a swipe-up feature instead of a more explicit button. This was an intuitive action for users, who could use the swipe up as if they were simply scrolling through a page. Once the swipe took up the whole page, it locked in place, requiring users to click the back button to go to a minimized view. This ensured that swiping down didn’t inadvertently minimize the page.
  • For filtering, we decided only to include the filter name on the main screens. When users clicked on filters, they opened up as modals that could be adjusted. This kept main pages less busy, presented relevant information only when it was needed, and turned filtering into a flow of sorts.
  • For contributions, we turned the entire section into a modal so that users could start a contribution from any page. The modal incorporated keyboard pop-ups for naming a place, dragging a pin to pick a location, and selections of options for categories. Each of these choices focused on user recall (pick from options) as opposed to memory.

Adding Mixed-Reality-Based Interactions

We had never created interactions for mixed reality, and this project presented some unique issues.

How could we signal to users how they should interact with the mixed reality depictions?

How could we guide users to interact with specific parts of a rendering?

How could we make it easy to create and comment on their own contributions?
  • To answer the first question, we turned to animations that were triggered when users entered a MR page. The cursor would move around while users were instructed on how to interact, creating a mutually reinforcing signal.
  • For the second question, we leveraged a combination of swipes and clickable features. We dropped “pins” on parts of a building that the DCP wanted users to comment on. Users could either click on a pin and then comment on that section, or they could swipe between pins to see what all the questions were. This addressed the needs of users that just wanted to browse, and those that wanted to make focused contributions.
  • To make contributions easy, we incorporated a drag interaction, where users could scroll through different options for a type of construction (e.g. park), then drag it into the screen to drop it where they wanted. This maximized user customizability while still making the contribution feature accessible to them (i.e., not requiring them to draw something themselves).