Urban Plan-AR

Using a design sprint to create a mobile app that uses AR technology to
foster citizen participation in urban planning


Including citizen input in the urban planning process provides undeniable advantages; because they live in these spaces, they can provide observations and knowledge that are different from those of the experts. But it can be challenging to garner citizens’ interest and participation in the process.


As a group project, a team and I designed a product that uses augmented reality (AR) to help foster public participation in the urban planning process.

We used Google Ventures’ design sprint methodology, which is typically a 5-day process where stakeholders are brought together to use design, prototyping, and user testing to answer business questions.

However, you won’t see images of designers crowded around a whiteboard of Post-its because:

  • The team members were located around the world (Canada (me), South Africa, Lebanon, and Brazil), and,
  • Our design “sprint” was spread out over 3 months (for the purpose of the class).

Watch the video of the prototype below. You can also navigate through it yourself; to begin, click on the “cloud” download icon.


Problem Statement

How might we use augmented reality (AR) to help citizens visualize the end result of urban planning projects to motivate them to participate in the process?

My Role

I acted as facilitator and the other group members took on the roles of decider, designer, and developer.

As the facilitator, I managed the overall project, including setting the agendas and scheduling, facilitating the online meetings, and synthesizing the results of our discussions.

Methods & Tools

Google Venture’s Design Sprint methodology, Miro, Google Suite, Google Hangouts, Adobe Illustrator, Articulate Storyline, Veer, Sketchfab


3 months

Phase 1: Map

Expert Input (interviews)

To get a deeper understanding of the problem, we interviewed a city planner, professor of architecture, and municipal special projects coordinator. They typically rely largely on social media and physical meetings to communicate with citizens. In addition, the following themes emerged:

Issues with current system

* Stakeholders are either excluded or not involved early enough
* Citizens don’t have a sense of ownership over decisions being made

Potential and current barriers

* Lack of means to participate
* Digital divide and exclusion from the process
* Lack of education or trust in the system

In order to have meaningful public participation, citizens need to feel that they are part of the decision-making process (or the design process) from the very beginning – to feel ownership.

N.C., professor of architecture

We focused on designing a mobile app that uses AR/VR (virtual reality) to present urban planning projects to citizens and encourage direct feedback to urban planners and communication with other citizens.

We also considered how to include citizens who don’t own AR-enabled devices and leverage existing networks and platforms (social media) to expand the reach to more citizens.

Phase 2: Sketch

After taking a few days to research and collect inspiring ideas and solutions, we uploaded our findings onto a Miro board.

We then met synchronously to review our inspirational ideas. Most of us found inspiration in apps like those offered by Ikea; a number of builders also use AR for visualization. In the spirit of tackling the digital divide, I was especially inspired by tower viewersthose coin-operated binoculars you typically see at vantage points.

After completing a rapid ideation exercise called Crazy 8’s (where we drew out 8 sketches in 8 minutes), we parted ways to asynchronously finalize our solution sketches to upload to Miro for the next phase.

Urban planning apps from around the world.
Urban planning apps from around the world.
Examples of AR, VR, 3D and visualization
Examples of AR, VR, 3D and visualization
Solution sketches
Solution sketches

Phase 3: Decide

Heat maps

In the next phase, we used the functionality within Miro to vote on the frames of the solution sketches that we liked best. The resulting heat maps served as a guide for selecting the functions to include in the app. In the design sprint process, the Decider gets final say, so they used their Supervote powers to select those ideas which were a must-have.

We chose a name (Urban PlanAR) and agreed on the following functionality to include in the app:

  • Visual map view similar to Google Maps
  • Bottom navigation menu for alerts
  • Voting capability to see how other citizens feel about projects
  • Interactive top menu (add comments/pins, take images) and social media elements (sharing, upvoting, downvoting)
  • Ability for citizens to “view” the finished project
Miro frame set up with “dots” for heat map, straw poll and Supervoting
Miro frame set up with “dots” for heat map, straw poll and Supervoting
Solution sketches with heat maps, straw poll and Supervotes
Solution sketches with heat maps, straw poll and Supervotes

With the sketches completed, we now had to pull everything together into a storyboard. 

When this exercise is done face-to-face, new sketches are drawn for each frame, as guided by team members. I adjusted the process slightly by separating each solution sketch into individual panes so they could be easily moved around and placed into the storyboard frames.

Since our sketches reflected different parts of the user journey, the storyboard came together nicely. In fact, once the panes were in place, we only had to create one sketch of the opening scene.

I recognize that approaching the activity in this way may not always work out, but given our greatly disparate locations and time constraints, it was the best strategy to adopt.

Solution sketch panes as movable pieces for Miro whiteboard
Solution sketch panes as movable pieces for Miro whiteboard
Final storyboard
Final storyboard

Phase 4: Prototype

We went back and forth on the appropriate tools to use to design the prototype, exploring UXPin, proto.io, and Adobe XD, among others. We had the following constraints: At the time of this project, these tools were either too costly for multiple users, didn’t offer the ability to prototype our app’s requirements, or didn’t allow for true collaboration. 

We ultimately decided on the following tools:

  • Adobe Illustrator for the user interface design
  • Veer for the embedded VR and AR links
  • Sketchfab for the 3D model
  • Articulate Storyline for the interactive prototype
  • Github for publishing and hosting

Though unorthodox for prototyping, we used Articulate because it allowed us to include the more advanced functionality we wanted (for example, upvoting, downvoting, commenting). I reviewed drafts of the prototype during this phase to ensure consistency in the design (navigation, intuitive flow, and functioning links).

Phase 5: Test

Usability testing

We conducted usability testing with 4 individuals representing a range of ages and occupations of citizens one could potentially find within a neighborhood. Our sessions were recorded (using ScreenCam).

Educational researcher
Pharmacy technician
Project manager

Participants were asked to:

  • Navigate to the Bridge Restoration planning project
  • Select each of the available views of the project (AR/VR/3D)
  • Add a comment to the project
  • Vote on the project, or on an existing comment
Screenshot of participant accessing AR view
Screenshot of participant accessing AR view
Video analysis

We uploaded our respective videos to our shared Google Drive for review.

After watching the videos individually, taking notes on insights along the way, we categorized our notes as positive (green), negative (red) or neutral (white), then clustered them according to the tasks from the usability testing to identify any commonalities.

Set up of neutral, positive and negative sticky notes to categorize notes from testing videos
Set up of neutral, positive and negative sticky notes to categorize notes from testing videos
Miro board with categorized insights and comments taken from the usability testing sessions
Miro board with categorized insights and comments taken from the usability testing sessions
Testing results

Overall, participant feedback was positive. The concept seemed viable and they thought the app could help to increase public participation in urban planning.

However, the following insights were identified:

1. The onboarding experience could be enhanced. Several users couldn’t navigate to the main screen from the “app” store.

2. Icons and terminology need to be more clear. The participants misidentified the terms VR/AR and the icons on the tab bar, and had issues navigating the map pins.

3. Users had unclear expectations of the AR and VR views. One user expected the AR view to show the completed project and the 3D view to show its current state, while another expected the opposite.

4. Familiar icons and platform design patterns were well received. Most users recognized the icons and functionality of the thumbs up/thumbs and comments bubble, comparing them to Facebook.

5. The older participants needed more details on the project. They wanted to be better informed about the project(s) before adding their comments.

Next steps

Based on the testing results, we identified next steps to improve the user experience.

The Designer changed the interface, adding color and including onboarding screens to help explain the app’s purpose. We also improved the navigation by: 

  • Labeling the tab bar icons
  • Opening up one of the pins in map view by default to identify that each pin represents a project.

Additional steps to take and concerns to address included:

  • Add text descriptions to the AR, VR and 3D screens to describe the scene (e.g. “This is a 3D mockup of the proposed bridge renovation”)
  • Include links to detailed information about each project
  • Countering the digital divide by offering an alternative version of the app at public facilities, such as libraries.
  • Government buy-in to help market and promote the application.
Onboarding screens to help guide the user
Onboarding screens to help guide the user
Original and updated map view with pin opened by default
Original and updated map view with pin opened by default

Lessons learned

  1. Connecting once or twice a week wasn’t frequent enough, so we ramped up asynchronous communication between formal meetings by chatting informally on Google Hangouts.
  2. Because several team members were underprepared for the first meeting, I began the practice of sending detailed task lists of what everyone had to complete before each subsequent meeting to keep everyone on track.

Accordingly, working with a globally distributed team wasn’t the greatest challenge; it was keeping people on track between meetings, which was helped by the asynchronous chats.

Next project


Educating techs to reduce risk of musculoskeletal injuries

Previous project

Exploring engagement in a mobile app that helps you move more at work by connecting you with your colleagues