web analytics

UI and UX Design for Citygram

UI and UX Design for Citygram 2017-01-25T11:24:23+00:00

Project Description

UI and UX Design for Citygram, as part of the Citygram Project at NYU’s Centre for Urban Sciences and Progress.

 See the entire presentation at http://bit.ly/CitygramPPT


About Citygram

Citygram is a project at the Centre for Urban Science and Progress. The initial phase of the project consists of capturing sounds from various locations in urban spaces, and having the system analyze, categorize and learn different kinds of sounds. Capture of urban sounds is to be crowd sourced to volunteers with apps on their phones. Volunteers can capture any kind of audio they find interesting, tag it, rate it and upload to the Citigram servers. Future version of the app will support a live view of the different kind of sounds in the entire urban area – probably built using Google Maps or Openmaps API.

Citygram App Objectives

  1. Provide a tool for quick capture of audio.
  2. Serve as mobile tool to gather sample data for the Citigram project.
  3. Reduce number of abandoned audio capture submissions.
  4. Implement a language agnostic system of rating for users to rate the emotion they associate with the sound they recorded – needs more discussion with the team.
  5. Leave room for addition of new features in the future like contextual tag suggestion, and map plots.



  1. Identify the key objectives of the project
  2. Experiment with different interfaces
  3. Identify gaps in client information provided by client

User Workflow

Slide5 copy

  1. The app has a small, cyclical workflow that allows for quick and easy upload of captured audio – one of the primary objectives of the design
  2. Will help identify were the process sees most abandoned audio uploads during user testing phase
  3. Debate upload of audio immediately, even before tags and ratings are applied to maintain repository of captured data. Tags and ratings could be applied later. 

Some Questions that guided the Design Process 

Audio Recording

  1. Audio recording outside of controlled environments is a blink-and-miss thing. We must support an audio capture process that can be initiated as fast as possible.
  2. How could we help improve recording quality through design?
  3. Is screen orientation important? Consider design for holding the phone upside down – learning curve associated with this design decision.
  4. Any new methods to improve audio quality enabled by new hardware technology?

Rating & Tagging

  1. How many ratings or tags do we expect the users to produce with each recording?
  2. Do we want users to rate and tag as the audio is still recording?
  3. Are all questions the same for each recording?
  4. Is there an existing semantic library for tags associated with audio recording?

Sharing of Audio

  1. Will users want to share recorded audio?
  2. Does it benefit Citygram to allow users to share recorded audio?

App Wireframes

Start Screen

Citygram_01 Start

  1. The first and primary screen of the app will focus on capture of sound.
  2. Menu Bar at bottom offers access to past recorded sounds, one touch access to the start screen, and settings.
  3. Large target area makes it easy to begin recording.
  4. Suggest that app should be started with recording activated, to save user the time taken to start recording.





Citygram_02 Capture

Capture Screen

  1. Record button has white ring around it when recording is in progress.
  2. Audio waveform displayed on recording button as visual feedback to user that recording is in progress.
  3. Max Recording time can be adjusted according to requirements of the system.
  4. Small guide text at bottom directs user to tap button to stop capture.
  5. Ending audio capture takes user to next screen.




Review Screen

Citygram_03 Review

  1. Recorded audio can be played back
  2. Larger target area for “Save and tag”, Smaller target area for capturing sound again
  3. Absence of “Back” button urges user to proceed with audio capture.
  4. Suggest uploading audio to server at this stage to at least store recorded audio. Delete this audio if user opts to Capture audio again, Save audio in database if user abandons capture process at this time.





Identify / Tag Screen

Citygram_04 Identify Citygram_05 Identify Custom

  1. Search bar at top to allow user to search for existing tag.
  2. If user’s searched tag does not exist, offer option to create new tag
  3. List of tags before search is populated according to popular tags previously submitted at user’s location.
  4. Future versions will display results suggested by system after analysis of uploaded audio
  5. Tapping on a tag takes user to next screen


Citygram_06 RateRating Screen

  1. A language agnostic rating screen will allow user to submit a rating for the audio. Unclear at this point if client requires a rating of audio quality or rating of emotional quality of the recording.
  2. Not using any words, and slider allows a user to submit a rating as per requirements. System will use fuzzy logic can be used to aggregate and analyze ratings of similar sounds.
  3. Submitting a captured audio will return user to start screen of the app.
  4. Cancel button offered at this stage to indicate to user that capture process can be cancelled at this stage. Discuss with client if this will discard the audio from the database as well, or just the tag and rating.


Captured Audio

Citygram_07 Captured Audio

  1. This screen displays audio collected by the user in the past.
  2. It bucketizes the list according to how old long ago the audio was captured.
  3. Each smart collection is labeled with the time in human readable format instead of the absolute time Eg: “Two Days Ago” instead of  “Sept 12, 2014”.





Finishing Notes

  1. This is the first iteration of the proposed UI and UX for the Citigram App
  2. Future revisions will take into account of a possible new version of the tagging system, to allow for addition of multiple tags
  3. Future revisions will add ability to view heatmap of audio of selected tags on a map (Google Maps or Openmaps  API)