Aaron ThadathilAngelina TjhungConz Zammitti

Interactivity 3Andrew Hladkyj

YSDN Fall 2014

Introduction

PACT

Flow chart

User Scenarios

Style

Prototyping

1

2

10

12

18

19

soundblocks hopes to create new ways to interact with sound around us. what started as an app that easily records samples and soundbytes on the go became an experience for the user to experiment and document the sounds of their lives in an accessible format.

A P P L I C AT I O N G O A L

sound enthusiasts“Expert” Profile:

Musicians, budding musiaicna, experimenters, sound journalists, casual sound aficionado who are all curious about production, experimental and electronic music.

Casual User Profile

Users not necessarily interested in the production of music, but are looking for new ways to document their lives in an organized journal-type interface.

Physical Profile

Targetted towards a younger audience, 13 - 30, who are interested in art in general, and are culturally aware.

P E O P L E

what are soundblocks?Soundblocks are little bits of interesting sound that you had recorded and would like to keep for later use, may it be for future reference, or integration in a project.

The app centers around an interface called the soundjournal that shows all the recorded soundblocks organized by date, so that users are able to reference back to any chosen day to playback what they had encountered. The journal is organized by date in order to provide some incentive to fill it up, so that when the user visits their journal, they are able to look at their progress.

A C T I V I T I E S

Sharing and Cooperation

The user is able to share their collected soundblocks with a closer group of friends that had to be approved by the user in a “request to add friend” system.

ComplexityAn intuitive approach to sound collection where the user has a lot of flexivility with how the sounds will be used.

Safety and ErrorsTo be decided

Nature of ContentSoundblocks builds upon the data-imput of the user as they go about their day. The blocks are then catalogued based on time. They are also able to manipulate the, soundwave by raiging its pitch or length, then output the clips to any cloud service or social network.

A C T I V I T I E S

where’s the sound at?The app was designed for quick, instant, and on-the-go-recording, so the sound can be anything that you decide to record. There’s no need to be online while you record, so you don’t have to worry about staying connected.

Show em your sounds!Sharing sounds is as easy as accepting a friend request. Once you decide to be in you friend’s soundblocks circle, that means you can see all of their recorded sounds via their soundboard, and vice versa. But what if you want to work on your soundblocks? Don’t worry, your sounds are easily uploaded to anything social media site or cloud service.

C O N T E X T S

input/outputThe app takes advantage of the hardware that the phone already provides, such as a microphone and touch screen. Using simple and intuitive gestures, users unput the data by recording little soundclips and storing it in the internal memory. As output, users are able to playback the sounds from their journals and have the option to do minimum manipulation on each soundblock before exporting it to whichever cloud service or social network.

T E C H N O LO G I E S

softwareThe app is designed to be used on the Android operating system. There are a few differences between mobile operating systems that have to be taken into account when designing for an app.

Android OS: Kitkat

The newest Andoird software update came with new powerful gestures, like a double touch drag and double touch. It also supports the app to use the entire screen.

Differences between Andoird and iOS 7

• At the bottom there’s the trio of ever-present navigation control: Back, Home, and Multitasking.• Multitasking means that you can always intuitively

access a carousel of currently open apps, and swipe them away to close.• Google Play is an open marketplace to distribute apps.• Puts you in control of how to sell products• Android’s system UI provides the framework on top of

which you build your app.

T E C H N O LO G I E S

record

soundboard

pitch control

time stretch

cut and trim

select sound

playback

share

manipulatesave sound

view waveform

record sound

facebook

tumblr

twitter

sort by tags

discard sound

sound wave

no tags entered

filed

tag friends list add a friend

view friends soundboard

search by contactsearch by username

dropbox

google drive

cloud services

select sound

playbackcomment

add

login

sampler

input

output and manipulation

connectivity

application flow chart

wavelength area

record buttonfriends soundboard

tap to tag

PIN TO SOUNDBOARD

falling cat, soft sounds

Thursday, the 5th

Wednesday Tuesday M

JUNE MAY APRIL MAWEEK 4 3 2 1

falling cat

soft sounds

sort by tags

thunder

animation shows wave reshuf-fling the soundboard to make room.

Thursday, the 5th

Wednesday Tuesday M

JUNE MAY APRIL MAWEEK 4 3 2 1

falling cat

soft sounds

sort by tags

thunder

Dragging files to soundboard

drag sounds here and tap

EDIT

June 5th3:45 PM

falling cat

soft sounds

pitch

check (finished editing)

waveform

discard changesplay sound

trim sound

stretch trim

(selected)

slides to the left

RESOUND

USERNAME

PASSWORD

login

Thursday, the 5th

Wednesday Tuesday M

JUNE MAY APRIL MAWEEK 4 3 2 1

falling cat

soft sounds

thunder

Isabelle’s soundboard

MANIPULATE

June 5th3:45 PM

falling cat

soft sounds

COMMENTS +

final wireframes

Angelina Tjhung | YSDN 3006 | Project 3

wavelength area

record buttonfriends soundboard

tap to tag

PIN TO SOUNDBOARD

home page record sound sound wave

tag Amélie is a 24 year old designer who loves documenting her day, but she’d like a new approach since she no longer has any time to write. She found this app while browsing the internet and found it interesting to document her life in the form of sound. She would like to integrate it in her daily routine.

casual daily user

When she finds an interesting sound that she’d like to document, Amélie opens up the interface and quickly holds down the record button for the length of the time she’d like to record.

The sound will take shape as a volumetric wave as you’re holding the record button.

The finalized sound wave is previewed, where Amélie will have the option to either discard it, or pin it to her soundboard.

falling cat, soft sounds

filed.

Thursday, the 5th

Wednesday Tuesday M

JUNE MAY APRIL MAWEEK 4 3 2 1

falling cat

soft sounds

sort by tags

MANIPULATE

thunder

June 5th3:45 PM

falling cat

soft sounds

filed soundboard

select sound

playback

Amélie can then tag the sound by tapping on her new soundwave in order to remind herself later what it was, or what to categorize it as.

A quick screen will let Amélie know that her clip has now been added to the soundboard.

The soundboard is a central hub of all of Amélie’s clips, where she can view them by date. A quick overview of the soundboard can tell Amélie what her day consisted of.

Once a certain clip is selected, all the clips of that day will play one after the other. A profile will show on what day the clip was recorded and at what time.

tagged

home page

expert userJennifer is a 22 year old

musician who produces under-

ground hip-hop beats under the

name TOKIMONSTA. She loves

using retro synths and samples.

She loves finding new sounds to

sample to use in her music. She

wants to use the app as a tool

to collect and sort samples from

just about anywhere. She has

already recorded a really cool

sound of her keys jingling and

wants to do some manipulation

to the sound. Jennifer opens the app. She sees

the homepage, but she’s not

going to record a sound right

now. She wants to go to the

soundboard to manipulate an

existing sound. She taps the

soundboard icon.

At the soundboard she locates

the key jingling sound she wants

to manipulate. She simply taps

and holds the sound to call up the

waveform.

She sees the entire waveform of the

sound. She taps the pitch button to

activate the pitch controls.

soundboard

select sound

manipulate

Aaron Thadathil YSDN 3006 Project 3

soundboard

record

waveform

soundboard

friends

pitch cut & trim stretch

Save

Sliding up on the screen would

raise the pitch. The waveform’s

colour would turn progressively

more green

Sliding down on the screen would

lower the pitch. The waveform’s

colour turns progressively orange.

pitch control pitch control save sound �nish

pitch cut & trim

Save Save

stretch pitch cut & trim stretch

Jennifer’s �nger input

Jennifer taps the save button to

save the changes she made to the

sound’s pitch. She can now exit

out of the app by pressing the

android’s native home button.

Jennifer is at her home page and

has exited the app. She slips the

phone back into her pocket and

goes about her day.

Save

pitch cut & trim stretch

Scenario Three // The Social Br0

NAME:

AGE:

GENDER:

OCCUPATION:

bryant

21

male

university student

Bryant is a frequent user of social networks. He likes having his friends in a virtual platform, view friends’ posts and comment them. Recently, Bryant has become interested in the social aspect of music. He’s looking for a sound-based app that focuses on a close network of friends which enables users to play their friend’s sounds and comment.

home page friends list view friends soundboard playback comment

Since Bryant isnt currently concerned with recording, so he decides to check out what sounds his ‘br0s’ have been recording. He does this by clicking the friends icon on the bottom left.

Bryant now sees his friends list and scrolls down until he sees Isabelle. He then selects her name to view her soundboard.

Isabelle’s soundboard is loaded and a list of her sounds is at the bottom.

Bryant selects a sound to hear what she has recorded.

He plays back the sound and really digs what he hears. He likes it so much that he decides that he wants to add a comment.

select sound

Bryant now logs into his Soundblocks account. He does this by entering his username and password.

login page

Once he taps on the “add comment” button, the in-system keyboard scrolls upwards; prompting the user to type out their comment.

When Bryant is done typing out his comment, he simply taps on the “enter” button in the keyboard. His comment is then posted and visible.

comment posted

// conz zammitti

Scenario Three // The Social Br0

NAME:

AGE:

GENDER:

OCCUPATION:

bryant

21

male

university student

Bryant is a frequent user of social networks. He likes having his friends in a virtual platform, view friends’ posts and comment them. Recently, Bryant has become interested in the social aspect of music. He’s looking for a sound-based app that focuses on a close network of friends which enables users to play their friend’s sounds and comment.

home page friends list view friends soundboard playback comment

Since Bryant isnt currently concerned with recording, so he decides to check out what sounds his ‘br0s’ have been recording. He does this by clicking the friends icon on the bottom left.

Bryant now sees his friends list and scrolls down until he sees Isabelle. He then selects her name to view her soundboard.

Isabelle’s soundboard is loaded and a list of her sounds is at the bottom.

Bryant selects a sound to hear what she has recorded.

He plays back the sound and really digs what he hears. He likes it so much that he decides that he wants to add a comment.

select sound

Bryant now logs into his Soundblocks account. He does this by entering his username and password.

login page

Once he taps on the “add comment” button, the in-system keyboard scrolls upwards; prompting the user to type out their comment.

When Bryant is done typing out his comment, he simply taps on the “enter” button in the keyboard. His comment is then posted and visible.

comment posted

STYLE TILEsoundblocks

website

app

some

really

nice

tags THIS IS A HEADERLorem ipsum dolor sit amet, consectetur adipi-scing elit. Nunc blandit in purus et condimentum. Praesent quis turpis conse-quat, rhoncus nibh sit amet, blandit sem. In malesuada aliquet ligula, eu aliquam libero euismod nec. Ut consectetur sagittis molestie. L INK

LINK

prototyping

P r O C E S S

pact sketch

flow sketch

home page

soundboard

pitch control

time stretch

cut and trim

select sound

playback

share

manipulatesave sound

view waveform

record sound

facebook

tumblr

twitter

sort by tags

discard sound

sound wave

no tags entered

filed

tag friends list add a friend

view friends soundboard

search by contactsearch by username

dropbox

google drive

cloud services

select sound

playbackcomment

add

flowchart v1

wavelength area

record buttonfriends soundboard

tap to tag

PIN TO SOUNDBOARD

falling cat, soft sounds

filed.

Thursday, the 5th

Wednesday Tuesday M

JUNE MAY APRIL MAWEEK 4 3 2 1

falling cat

soft sounds

sort by tags

MANIPULATE

thunder

June 5th3:45 PM

falling cat

soft sounds

home page record sound sound wave tag filed soundboard

select sound

playback

Amélie is a 24 year old designer who loves documenting her day, but she’d like a new approach since she no longer has any time to write. She found this app while browsing the internet and found it interesting to document her life in the form of sound. She would like to integrate it in her daily routine.

casual daily user

When she finds an interesting sound that she’d like to document, Amélie opens up the interface and quickly holds down the record button for the length of the time she’d like to record.

The sound will take shape as a volumetric wave as you’re holding the record button.

The finalized sound wave is previewed, where Amélie will have the option to either discard it, or pin it to her soundboard.

Amélie can then tag the sound by tapping on her new soundwave in order to remind herself later what it was, or what to categorize it as.

A quick screen will let Amélie know that her clip has now been added to the soundboard.

The soundboard is a central hub of all of Amélie’s clips, where she can view them by date. A quick overview of the soundboard can tell Amélie what her day consisted of.

Once a certain clip is selected, all the clips of that day will play one after the other. A profile will show on what day the clip was recorded and at what time.

A N G I E ’ S U S E r S C E N A r I O V 1

home page

expert userJennifer is a 22 year old musi-

cian who produces underground

hip-hop beats under the name

TOKIMONSTA. She loves using

retro synths and samples. She

loves finding new sounds to

sample to use in her music. She

wants to use the app as a tool

to collect and sort samples from

just about anywhere. She has

already recorded a really cool

sound of her keys jingling and

wants to do some manipulation

to the sound. Jennifer opens the app. She sees

the homepage, but she’s not

going to record a sound right

now. She wants to go to the

soundboard to manipulate an ex-

isting sound. She taps the sound-

board icon.

At the soundboard she locates

the key jingling sound she wants

to manipulate. She simply taps

and holds the sound to call up the

waveform.

She sees the entire waveform of the

sound. She taps the pitch button to

activate the pitch controls.

Sliding up on the screen would

raise the pitch. The waveform’s

colour would turn progressively

more pink.

Sliding down on the screen would

lower the pitch. The waveform’s

colour turns progressively violet.

She’s happy with the

lowered pitch.

soundboard

select sound

manipulate pitch control pitch control save sound �nish

Aaron Thadathil YSDN 3006 Project 3

soundboard

record

waveform

soundboard

friends

pitch cut & trim stretch pitch cut & trim

SaveSave Save

stretch

Jennifer’s �nger input

pitch cut & trim stretch

Jennifer’s �nger input

Jennifer taps the save button to

save the changes she made to the

sound’s pitch. She can now exit

out of the app by pressing the

android’s native home button.

Jennifer is at her home page and

has exited the app. She slips the

phone back into her pocket and

goes about her day.

Save

pitch cut & trim stretch

A A r O N ’ S U S E r S C E N A r I O V 2

Scenario Three // The Social Br0

NAME:

AGE:

GENDER:

OCCUPATION:

bryant

21

male

university student

Bryant is a frequent user of social networks. He likes having his friends in a virtual platform, view friends’ posts and comment them. Recently, Bryant has become interested in the social aspect of music. He’s looking for a sound-based app that focuses on a close network of friends which enables users to play their friend’s sounds and comment.

home page friends list view friends soundboard select sound playback

comment

wavelength area

friendsmy

storyboard

wavelength area

PLAYBACK NAV

COMMENTS +

Since Bryant isnt currently concerned with recording, so he decides to check out what sounds his ‘br0s’ have been recording. He does this by clicking the friends icon on the top left.

Bryant now sees his friends list and scrolls down until he sees Isabelle. He then selects her name to view her soundboard.

Isabelle’s soundboard is loaded and a list of her sounds is at the bottom.

Bryant selects a sound to hear what she has recorded.

He plays back the sound and really digs what he hears. He likes it so much that he decides to click the “+” to add a comment. The comment dialogue scrolls upwards and a text box appears, along with the keyboard. Bryant can now comment on Isabelle’s sound.

C O N z ’ S U S E r S C E N A r I O V 1

Scenario Three // The Social Br0

NAME:

AGE:

GENDER:

OCCUPATION:

bryant

21

male

university student

Bryant is a frequent user of social networks. He likes having his friends in a virtual platform, view friends’ posts and comment them. Recently, Bryant has become interested in the social aspect of music. He’s looking for a sound-based app that focuses on a close network of friends which enables users to play their friend’s sounds and comment.

home page friends list view friends soundboard playback

comment

Since Bryant isnt currently concerned with recording, so he decides to check out what sounds his ‘br0s’ have been recording. He does this by clicking the friends icon on the top left.

Bryant now sees his friends list and scrolls down until he sees Isabelle. He then selects her name to view her soundboard.

Isabelle’s soundboard is loaded and a list of her sounds is at the bottom.

Bryant selects a sound to hear what she has recorded.

He plays back the sound and really digs what he hears. He likes it so much that he decides to click the “+” to add a comment. The comment dialogue scrolls upwards and a text box appears, along with the keyboard. Bryant can now comment on Isabelle’s sound.

Thursday, the 5th

Wednesday Tuesday M

JUNE MAY APRIL MAWEEK 4 3 2 1

falling cat

soft sounds

sort by tags

thunder

Thursday, the 5th

Wednesday Tuesday M

JUNE MAY APRIL MAWEEK 4 3 2 1

falling cat

soft sounds

sort by tags

thunder

MANIPULATE

June 5th3:45 PM

falling cat

soft sounds

COMMENTS +

wavelength area

record buttonfriends soundboard

select sound

username:

password:

please log in to view your friends list

Bryant now logs into his Resound account. He does this by entering his username and password.

login page

C O N z ’ S U S E r S C E N A r I O V 2

RESOUND

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et malesuada est. Nullam ac vestibulum elit. Sed facilisis aliquet lorem, sed vulputate urna venenatis a. Proin tincidunt lectus ut pellentesque dignissim. Pellentesque ut nunc tellus. Duis et elit nec purus luctus rutrum. Sed felis lorem, luctus eu neque eget, varius convallis odio. Ut orci lorem, blandit sit amet condimentum quis, imperdiet vel dui.

Font: Avenir

RESOUNDFont: Gobold

#82D8B5

button

explored aesthetics

life in sound

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet.

DONE

juNE jULy aUgUst september october

youth demographicambientpersonallifestyle

R E S O U N D

If there is any need for

copy in this app, then it

would look like this.

MANIPULATET H I N L I N E S C L E A N F U T U R I S T I C

R E S O U N D

Lorem ipsum dolor s i t amet,

consectetuer adipisc ing e l i t ,

sed diam nonummy nibh

euismod t inc idunt ut laoreet

dolore magna al iquam

erat volutpat.

L I N K

P A P E r P r O T O T y P E S ( G I F w E b P A G E )