Overview

Fostering meaningful public consultation and citizen participation in the urban planning process is challenging. Current practices may not carry a lot of weight towards the decisions made by the planning authorities. 

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

Our assignment was to approach this 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, in this case study, you won’t see images of a group of people crowded around a whiteboard filled with 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 design an AR app to help citizens visualize the end result of urban planning projects so they are more likely or motivated to participate in the process?

Timeframe

3 months

My Role

I was a 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, Adobe XD, Articulate Storyline, Veer, Sketchfab

I’ve focused on the methods used to remotely navigate the sprint process, as well as the challenges it presented and lessons learned. 

NOTE: I did not design the prototype. My role as a facilitator consisted of managing the overall process, including setting the agendas and scheduling, facilitating the online meetings, and synthesizing the discussions.

Setting the stage (week 1)

For the class, deliverables were due every two weeks, so our scheduling centered around those due dates.

The cornerstone of the design sprint is its collaborative nature, so even though we were spread out around the world, it was crucial that we connect synchronously. During our first meeting, I established the following:

Meetings

  • We would connect on a Google Hangouts call at least once every two weeks.
  • We used a doodle poll to determine the time and day that worked best for everyone (Saturday mornings in my time zone).
  • Activities resulting in a design decision were done synchronously (e.g. setting goals), with any final decisions made by the Decider.

Communication Tools

  • Miro (an online whiteboard) for collaboration
  • Gantt chart to track progress
  • Google Drive for sharing documentation (Docs, Sheets, Slides)
  • Google Hangouts to communicate asynchronously
Gantt chart to track progress throughout the 12 weeks.

Map (weeks 2 & 3)

Expert Input

To understand the problem, we spoke with experts in the field (city planner, professor of architecture, and municipal special projects coordinator). 

Issues with current system

  • Not all relevant stakeholders are included in the process or they are not involved early enough
  • Citizens don’t have a sense of ownership over the decisions being made

Potential and current barriers

  • Lack of means to participate
  • Digital divide and exclusion
  • Lack of education or trust in system

Current tools

  • 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

During our first Google Hangouts meeting, we determined our focus would be on presenting project designs using AR/VR and fostering evaluation and feedback by the citizens directly to urban planners and with other citizens

Additional considerations included:

  • Catering to citizens who don’t own AR-enabled devices
  • Leveraging existing networks and platforms (social media) to include more citizens

Sketch (weeks 4 & 5)

Inspiration

Before the next synchronous meeting, we spent a few days researching and collecting existing ideas and solutions, then uploaded our saved images to Miro.

During the Google Hangouts call, each of us described our reasoning. As people spoke, I added notes to Miro to use for the next stage.

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

Crazy 8's and Solution Sketches

After 10 minutes of reviewing the notes and inspiration images, we completed the Crazy 8’s exercise “together”. Crazy 8’s is a rapid sketching exercise used to generate as many ideas as possible (eight sketches in eight minutes) and they form the base for the solution sketches.

We used Miro’s built-in timer to keep track of time. I set it for one minute and restarted it as needed to emulate the face-to-face experience.

Timer available on Miro.

 

We all agreed that completing the task this way was a pretty good substitute for the in-person experience! We then dedicated a maximum of one hour each asynchronously to sketch out our solution sketches (shown here); these were uploaded to Miro ahead of the next phase.

Solution sketches generated during ideation phase.
Solution sketches.

Decide (weeks 6 & 7)

Heat maps

I set up a frame on Miro with green, pink and blue dots for each of us to use to vote asynchronously prior to the next Google Hangout. We placed the green dots on the solution sketches we liked (creating heat maps)

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

The heat maps showed a mutual admiration for:

  • Visual map view to leverage what people already know (e.g. Google Maps)
  • Bottom menu for comments and alerts
  • Voting buttons to see how other citizens feel about projects
  • Top menu to offer interactivity (add comments/pins, take images) and social media elements (sharing, upvoting, downvoting)
  • Ability to “view” final product/project

The Decider used their Supervote power (the blue dots) to identify the sketches/concepts that had to be included in the prototype (selecting projects via pins, seeing a project’s “actual view”, and adding a side menu for interactivity).

We also selected the name, Urban PlanAR.

Storyboard

Our Google Hangout sessions were limited to one hour due to limitations in internet access for some team members, so we approached storyboarding in a slightly different way. 

Rather than drawing from scratch during a synchronous meeting, I separated each solution sketch into individual panes, allowing them to be placed into the storyboard frames.

Interestingly, we had all drawn sketches reflecting different parts of the user journey so our solution sketches fit together nicely into the storyboard. In fact, once the panes were in place, we only had to add one sketch of the opening scene, in addition to enough details to tell the story. 

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

Prototype (weeks 8 & 9)

The Designer used Adobe Illustrator for the screens, the Developer used Veer and Sketchfab assets to enhance the prototype’s realism, and the Stitcher used an unorthodox tool – Articulate Storyline – to create the prototype because of its ability to handle more complicated functionality.

I reviewed drafts of the prototype during this phase to ensure consistency in the design (for example, consistent menu navigations, intuitive flow, and functioning links). 

Complete list of prototyping tools:

  • Design UI and branding: Illustrator
  • Embedded VR and AR links: Veer
  • 3D model: Sketchfab
  • Interactive prototype: Storyline
  • Publishing and hosting: Github

Test (weeks 10 & 11)

Testing methodology

The testers were chosen to represent citizens within a neighborhood with a range of ages and occupations.

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

During our Google Hangout, we reviewed the testing script, including the tasks users would be prompted to complete:

  • Select Bridge Restoration (from map pins or list)
  • Select each of the views (3D, VR, AR) within the project details 
  • Add a comment (noting the entry point used)
  • Vote (upvote/downvote) on either the project or an existing comment

We also settled on an application called ScreenCam to record the sessions.

Screenshot of tester.
Screenshot of tester accessing AR view.

Video analysis

Each of us uploaded our testing video to the shared Google Drive so it could be reviewed.

After taking notes individually, we transferred our comments onto virtual sticky notes on Miro and categorized them as positive (green), negative (red) or neutral (white). 

Comment post-its
Neutral, positive and negative sticky notes to categorize notes from testing videos.

Finally, the comments were moved into sections corresponding with the tasks the testers were prompted to complete.  

During our synchronous meeting, we discussed each others’ notes and findings. 

comments
Miro board with insights and comments taken from the user testing sessions.

Test results

The main findings were grouped into themes.

1. Improve the onboarding experience.

Despite verbal introductions, several users found it challenging to navigate to the projects once the app had been “downloaded” and they reached the home page.

2. Icons and terminology need to be more clear. 

One user was unfamiliar with the terms VR and AR (mistaking the latter for “aerial”). A couple of users didn’t know they had to tap on the map pins to get to the projects. Two users were unclear about the icon for the 360-degree view; one thought it was a calling feature while the other thought it was a prompt for selfies. 

3. Familiar icons and leveraging other platform design patterns were well received.

On the other hand, most of the users recognized the icons and functionality of the thumbs up/thumbs and comments bubble, comparing it to Facebook. Capitalizing on their familiarity was valuable as users knew exactly what they needed to do when they saw them. 

4. Users had unclear expectations of the views (AR and VR).

One user expected the AR view to show what the project would look like and the 3D view to show what it currently looks like, while another user expected the opposite.

5. The older testers wanted more detail and information about the projects. 

Both wanted more detail about the projects to make an informed decision prior to adding comments. In addition, they both had difficulties navigating the interface of the app store in order to download the app.

Next steps (week 12)

From a visual angle, we made some quick changes to the interface, starting with adding 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: 

  • Adding text to accompany the icons
  • Opening up one of the pins in map view by default so users know that each pin represents a project
  • Adding more color to make it visually appealing.
Screen Shot 2019-08-22 at 11.25.24 PM
Original and updated home page with labelled icons.
Screen Shot 2019-08-22 at 11.29.28 PM
Original map and revised map with pins opened by default.

Additional next steps:

  • Continue leveraging commonly known UI patterns from social media 
  • Add short text descriptions to the AR, VR and 3D screens to describe the scene (i.e. “This is a 3D mockup of the proposed bridge renovation”)
  • Build in authentication for users to ensure that they are citizens of the area they are commenting on 
  • Include links to detailed information about each project

Conclusion

Overall, user feedback was overwhelmingly positive. The concept seems viable, and with the suggested improvements from the user testing, the app could help to increase public participation in urban planning.

However, to maximize the chances of success, some more things need to be considered to address some of the key concerns that arose throughout the sprint, such as:

  • An alternative version of the app installed at public facilities, such as libraries, with representatives to assist users (to counter the digital divide)
  • Government buy-in to help market and promote the application.

Challenges and lessons learned

  1. Not everyone completed the necessary required tasks ahead of the first meeting, so on the day after each synchronous meeting, I sent out an agenda with a detailed list of what everyone had to complete for the next meeting. This helped immensely to keep us on track.
  2. We ramped up communication by chatting informally on Google Hangouts between meetings.
  3. Because of the multitude of digital communication tools, the greatest challenge wasn’t the remote nature of the design sprint; it was the long period of time between meetings, which increased the probability of waning interest from team members. I would be interested in repeating this process over a shorter time frame.

Other projects

Ergonomics app

training app for utility technicians

role: researcher & designer

Participatory design

involving users in research

role: researcher