UI and UX Design for 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.

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

User Workflow

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. 

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.

 

 

 

 

Capture Screen

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

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

 

Rating 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

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