New Wireframes

These are the mockups for the Streetbeat app.

Also available here: http://share.axure.com/7Z39SZ/

User Experience

Main design principles:

Map: 

• Connecting to a headphone jack on the map will enable the user to listen to the 10 most popular songs in a certain location. 
• Each song will play for 20 seconds, from 1 minute into the song. 
• There is no need for a toggle switch for each window on the map. There will be one window with two toggle switches: One toggle switch will change the state of the info and the popular songs according to three states: Men, Women and all. Second toggle switch will change the state and popular songs to different age groups: 0-18, 18+ and all. 
• The first screen that will show for each song played, is the "Now Playing" screen.

The screen automatically switches to the next screen after 10 seconds, and will randomly show either an info screen or a pie screen. 

Animatics: update

Animatics from Itamar Gilon on Vimeo.

Map of Tel Aviv

We have used the map tool to create a map of Tel-Aviv (showing mostly central Tel-Aviv). The map shows a 4X6km area, meaning that the entire physical display is planned to be at a scale of 1:5,000.
We have also decided to use the following 5 neighborhoods as MPOI's: The Port, Kikar HaMedina (Old North: North East borough), Kikar Atarim (Old North: South West borough), The Heart of the City and Florentin.

The full map:

Where:

Dark Blue: The Port

Orange: Kikar HaMedina (Old North: North East borough)

Yellow: Kikar Atarim (Old North: South West borough)

Green: The Heart of the City

Teal: Florentin

Additionally, here is a proposed higher level of detail for the Floretin neighborhood:

All text will be changed to English in the final version.
This (with the definitions of the neighborhoods) was taken from the very handy http://gisn.tel-aviv.gov.il/iview2/).

Woodcut Design Pt. 2

Following the change to the map concept (to differentiate between neighborhoods, both in the physical experience and the music gathering), the physical design has been updated:
StreetBeat is now designed with 3 layers of full sized (90X120cm) wooden plates with additional, smaller, plates showing neighborhoods added on the front layer:

With the resting place of the display devices being moved to the Map Layer (formerly "Front Layer").

Currently, adding more details as another means of separation between neighborhoods.

Generalizable Map Designs

In order to be able to reproduce our design to any location (and any scale) in the world, we have created a small program (html + javascript) that shows just the outline of a map (based on the Google Maps API v3).

Using this program to create an illustrator design of the high-level map and any neighborhoods that should be used for the StreetBeat is a quick and simple process.

Animatics for our prototype video:

Animatics from Itamar Gilon on Vimeo.

Woodcut Design Pt.1

We have come to the point of designing the actual physical display of StreetBeat.
Before deciding on specific areas, a general, repeatable design is given here.

A StreetBeat display is comprised of 4 wooden panels:

 The front layer is the map layer, which the users actually see and interact with (by jacking-in and by peeking through the windows). The second layer is where the displays rest. The third layer provides room for cables and the power adapter. The last layer is the "door" into the device.

The details of how to cut a "station" into the front and second layers are given here and are based on this spec of a Samsung Galaxy S phone, which we plan to use as the "station".

Meeting with Noa - Summary

Date and time: 3/4/13 12:30

Participated: Noa, Sharon, Itamar, Ran & Omri.

Decided that we need to start working on the physical display:

1. Decide on size

2. Remember that has to accommodate for power supplies for all phones

3. Start working on a CAD file*

Still need to design exactly what is displayed on the "stations".

Need to add a vibration notification to the storyboard.

Decide on a location for the end-of-semester street soiree.

Find headphones for the permanent headphone rack.

Decided on using Galaxy S1's for the "stations".

Still need to gather street data.

App Mockups

We created our app mockups using the Axure RP Pro software. Here are a few of our screens. 

The interactive prototype is available here: http://share.axure.com/FOGFU4/

Here are some of the screens we've designed:

 We ask the user to provide information in order to collect statistics about the songs played on the street and display these statistics in the app and on the map. 

The user can choose a location to listen to by tapping on the headphone icon.

After choosing a location, the user can choose a song to listen to.

When tapping on a song name, the user will be able to view statistics about the song - amount of people who listened to the song at the specific location, by gender and age.

This is the statistics screen that will appear behind each of the windows on the map. The user will be able to lift the window in order to view this screen which includes the songs' YouTube music clip and relevant statistics.

Improving Our Prototype

On April 1st (and we're not joking) we met to improve the existing prototype by adding the "window" feature proposed by Guy.

Basically we cut rectangular holes into the existing map without harming the top part of the rectangle. We also added another layer of material to the map to make it more robust and replaced the heavy and large plates of wood that we used to fix the headphone jacks in place with light-weight, smaller metal rings.
Lastly, we created dimples for screens in each of our windows (complete with tunnels for cables and covers to hold devices in place).
We tested this new version with Ran's phone running our app in one of the dimples, essentially meaning that we have the full experience available for users in one of the windows (and keeping our Wizard of Oz experience in the other windows).

The new prototype:

Backside, almost ready:

 Ran playing around with heavy machinery:

 Just making holes in the original prototype:

 Omri at work: