Overview

For a group-based class project, we designed a product that uses augmented reality (AR) to help foster public participation in the urban planning process

We approached this assignment using 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.

Image of design sprint methodology.
Source: https://www.thesprintbook.com/how

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

  1. The team members were distributed around the world (Canada (me), South Africa, Lebanon, and Brazil), and,
  2. 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 AR to help citizens visualize the end result of urban planning projects to motivate them to participate in the process?

Timeline

3 months

My Role

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

Methods & Tools

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

NOTE: I did not design the prototype. As the facilitator, I managed the overall process, including setting the agendas and scheduling, facilitating the online meetings, and synthesizing the discussions.

Setting the stage

Even though we were spread out around the world, it was crucial that we connect synchronously. We agreed to connect every week using the following tools to communicate and collaborate: 

  • Miro online whiteboard for collaboration
  • Gantt chart to track progress
  • Google Drive for sharing documentation created in Docs, Sheets, Slides
  • Google Hangouts for both synchronous and asynchronous communication

Map

Expert Input

To get a deeper understanding of the problem, we interviewed a city planner, professor of architecture, and municipal special projects coordinator. The following themes emerged:

Issues with current system

  • Not all stakeholders are included in the process/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

Current methods

  • Rely largely on social media and physical meetings

"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

Idea/Concept

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

We had to consider how to:

  • Include citizens who don’t own AR-enabled devices
  • Leverage existing networks and platforms (social media) to expand the reach to more citizens

Sketch

Inspiration

We took a couple of days to research and collect inspiring ideas and solutions, which were uploaded to Miro to share.

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

Crazy 8's and Solution Sketches

We then completed the Crazy 8’s exercise (8 sketches in 8 minutes) “together” during a synchronous meeting, using Miro’s built-in timer to keep track of time, emulating a face-to-face experience.

Timer available on Miro.

Completing the task this way was a pretty good substitute for the in-person experience!

Solution sketches were created offline, then uploaded to Miro for the next phase.

Solution sketches generated during ideation phase.
Solution sketches.

Decide

Heat maps

We used Miro to vote on the sketch frames we liked best (resulting in heat maps). The decider used their Supervote dots to select those ideas which were a must-have.

Miro frame set up with "dots" for heat map, straw poll and Supervoting.
Dots representing heat maps, straw polls and Supervotes.
Solution sketches with heat maps, straw poll and Supervotes.

We 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 to “view” the finished project 

We also selected the name: Urban PlanAR.

Storyboard

We approached storyboarding in a unique way due to our geographic locations.

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

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

Prototype

We selected the following software tools to create the prototype:

  • Adobe Illustrator for the UI and branding
  • 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 could handle the more advanced functionality we wanted to include (for example, the upvoting/downvoting/commenting)
 
I reviewed drafts of the prototype during this phase to ensure consistency in the design (consistent navigation, intuitive flow, and functioning links). Then came the testing!

Test

Script

Our participants represented a range of ages and occupations of citizens one could find within a neighborhood.

AGEGENDEROCCUPATION
50MaleEducational researcher
59FemaleRetired
27FemaleProject manager
33FemaleFront end developer

They 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

All sessions were recorded using ScreenCam.

Screenshot of tester.
Screenshot of tester accessing AR view.

Video analysis

We watched the sessions individually, taking notes along the way. Then on Miro, we categorized our notes as positive (green), negative (red) or neutral (white), then clustered them according to task.  

Comment post-its
Neutral, positive and negative sticky notes to categorize notes from testing videos.
comments
Miro board with insights and comments taken from the user testing sessions.

Results

The main findings were grouped into the following themes:

1. Enhance the onboarding experience.

Several users couldn’t navigate to the main screen from the “app” store. 

2. Icons and terminology need to be more clear. 

They 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 testers needed more details.

They wanted to be better informed about the project(s) before adding their comments. 

Next steps

The Designer made changes to the interface, adding color and including onboarding screens to help ease in the user. 

Onboarding screens in re-designed prototype.
Onboarding screens to help guide the user.

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.
Screen Shot 2019-08-22 at 11.25.24 PM
Original and updated home page with labelled tab bar icons.
Screen Shot 2019-08-22 at 11.29.28 PM
Original and revised map with pins opened by default.

Additional next steps:

  • 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

Conclusion

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

However, additional concerns need to be addressed, such as:

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

Lessons learned

  1. Connecting once or twice a week wasn’t frequent enough, so we ramped up communication between formal meetings by chatting informally on Google Hangouts.
  2. Because several team members were underprepared for the first meeting, I began 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.

Other projects

Ergonomics App
ERGONOMICS APP
Training app for technicians

ROLE: Designer & researcher
Participatory design
PARTICIPATORY DESIGN
Involving users in co-design

ROLE: Researcher