Touch Screen porting document for an existing mobile social network on smart phones & the web. This design document includes graphic UI Designs as well as design & porting specifications. Use cases & conditions have been laid out in detail. Guidelines for the developers are in place. The target phones for this app were non-apple touch screen bar sized devices.

1. Home screen
Notes:
-Inbox & Home icon on the bottom bar janaki_krishnan_iyer20
-Status update re-think – have the option of
voice and other multi-media entry right
there. Perhaps have the update status
Options
instead of edit profile
-Call message – Compose instead or probe
to find out
-Friends – how many online
Components of the status
message will display here like
VTP, but these are buttons and
The status message, Click will play the attached
anywhere on this row will component in the central media
bring up the compose player
*****Check out new games in Fun stuff******
message screen
Express yourself
Update status Post to gallery Compose
This is a carousel i.e. one Notes:
-The inbox counter will show the new
swipe of the finger brings messages which are in after the user last
forth more icons on this. We Looking for something? vewed them
will store at least 6 more
images for this one
010
Inbox Friends Communities Gallery

2. Home screen
janaki_krishnan_iyer20
Mute
Options
Invite friends to RockeTalk
Connectivity test
About
Help
*****Check out new games in Fun stuff******
Log off
Express yourself
Update status Post to gallery Compose
Looking for something?
Downloads Contests Settings
Messengers

3. Friends’ List
Notes:
-Inbox & Home icon on the bottom bar
10
10
-The search bar has a search icon attached.
Clicking on this icon will search the
database. Friends’ list options
Meena
 Profile Feels like killing someone…..
Buzz Message
Amit_rastogi
Feels like killing someone…..
GenE_RocKer
Feels like killing someone…..
Lovely_eyes
Video status – click to view
Anup
Video & voice status - click to view
Irfan_jafri
3 pictures in status – click to view
Start typing a name to search
Back 10 Home

4. Friends’ List
10
10
Friends’ list options
Meena
Thumbnails for the first ten  Profile Feels like killing someone…..
friends will be shown here. When
Buzz Message
the user is on friend 05 – the next
5 will be downloaded. Amit_rastogi
Feels like killing someone…..
When someone is searching. All GenE_RocKer
Feels like killing someone…..
the cached photos will display,
Lovely_eyes
the uncached ones will not be Video status – click to view
called.
Anup
Video & voice status - click to view
Irfan_jafri
3 pictures in status – click to view
Start typing a name to search
Back 10 Home

5. Friends’ List
Notes:
-Buzz multiple friends should be allowed
10
10
-For the moment, buzz will be greyed out if
a person chooses multiple friends. If the
user clicks on it , it will display an error
sound. Friends’ list options
Meena
 Profile Feels like killing someone…..
The status scrolls.
When the user
clicks on it, it plays
When touched Buzz Message voice, or video in a
slideshow format.
Amit_rastogi Voice auto-plays
Feels like killing someone….. when the friend is
clicked.
GenE_RocKer
Feels like killing someone…..
Lovely_eyes
Video status – click to view
Anup
Video & voice status - click to view
Irfan_jafri
3 pictures in status – click to view
Start typing a name to search
Back 10 Home

6. Inbox
10
10
Check new messages
Inbox options
Outbox
From: Meena 3 min ago
To: You, Pooji, Brun.. Sent items
Reply Message options
Clear all messages
Get my bookmarked
Amit_rastogi messages
Show blocked users
GenE_RocKer
Home
Lovely_eyes
Exit
Anup
Irfan_jafri
Salilmaladkar
Compose
Back Home

7. Inbox
Notes:
10 -Instead of the block option
10 use the arrow function
Inbox options
Notes:
-Inbox & Home icon on the bottom bar
From: Meena

3 min ago -Multiple options especially delete only
Profile To: You, Pooji, Brun.. show up when stuff is marked
-Think of the place where you can have the
delete button show up when stuff is marked
Reply Friend options -Recommended – middle of the screen
-Think about having the text open up right
there if its only a text message
 Amit_rastogi
-Have a pop up sayhing ‘Clik here to see
prfile’ appear and go away on the person’s
thumbnail image
GenE_RocKer
The profile button will appear and
disappear when the row is clicked on.
Lovely_eyes
 Anup
Irfan_jafri These buttons will appear with a dissolve
in effect once anything is ticked. The
outline will glow orange and then settle to
Salilmaladkar
black so that the user’s gaze is riveted to
them
Compose The reply/reaply all function will not
display.
Back Home

8. Inbox
10
10
Inbox options
From: Meena

3 min ago
Profile To: You, Pooji, Brun..
Hey guys..how about a party at my
place this weekend. I’ll arrange the
food. You guys get the booze. What say? If the message is only text, it
Lets call Raj and Gul as well. They’ve … will automatically open up the
text panel right there in the
inbox itself.
If it has too much text to show
in half the screen, then X
characters will be shown with
an expand button
Reply
Notes:
Friend options -Inbox & Home icon on the bottom bar
-Multiple options especially delete only
show up when stuff is marked
-Think of the place where you can have the
 Amit_rastogi delete button show up when stuff is marked
-Recommended – middle of the screen
-Think about having the text open up right
Compose there if its only a text message
-Have a pop up sayhing ‘Clik here to see
prfile’ appear and go away on the person’s
Back Home thumbnail image

9. Inbox
10
10
Inbox options
From: Meena

3 min ago
Profile To: You, Pooji, Brun..
If the message is only voice, it
will open in the inbox itself.
XX:XX
The above panel will remain
open even after the message
has played. A flick of the finger
Reply on this message will bring the
previous inbox view back
Friend options Notes:
-Inbox & Home icon on the bottom bar
-Multiple options especially delete only
show up when stuff is marked
-Think of the place where you can have the
 Amit_rastogi delete button show up when stuff is marked
-Recommended – middle of the screen
-Think about having the text open up right
Compose there if its only a text message
-Have a pop up sayhing ‘Clik here to see
prfile’ appear and go away on the person’s
Back Home thumbnail image

10. Message with picture(s)
10 10
10
10
From: Meena 3 min ago From: Meena 3 min ago
To: You, Pooji, Brun.. Profile To: You, Pooji, Brun..
Hello…what you doing? Have y.. Hello…what you doing?
Reply all Reply Reply all Reply
Back 10 Home Back 10 Home
Notes:
This text scrolls by in a -The profile button can dissappear once its
shwon on open
readable speed. -If there is text give an expand button which
will open up the text panel

11. Message with audio
10
10 10
10
From: Meena 3 min ago From: Meena 3 min ago
Profile To: You, Pooji, Brun.. Profile To: You, Pooji, Brun..
Hello…what you doing? Hello…what you doing?
XX:XX
XX:XX
Reply all Reply Reply all Reply
Back 10 Home Back 10 Home
Case II - Audio on mute
Case I - Audio auto-playing.
Counter stopped
XX:XX counter running

12. Message with audio
10
10 10
10
From: Meena 3 min ago From: Meena 3 min ago
Profile To: You, Pooji, Brun.. Profile To: You, Pooji, Brun..
Hello…what you doing? Hello…what you doing?
Reply all Reply Reply all Reply
Back 10 Home Back 10 Home
Case III- Audio stops playing. Case IV – There is audio attached
Counter panel slides back in leaving but not playing
only the audio button

13. Message with video
10 10
10
10
From: Meena 3 min ago From: Meena 3 min ago
Profile To: You, Pooji, Brun.. Profile To: You, Pooji, Brun..
Hello…what you doing? Hello…what you doing?
Have..
Reply all Reply Reply all Reply
Back 10 Home Back 10 Home

14. Message with all media
10
10
From: Meena 3 min ago
Profile To: You, Pooji, Brun..
Notes:
-The bottom array where the other
thumbnails are appearing shouwl not be
there…make space for the text instead with
the expand button
Hello…what you doing?
Reply all Reply
Back 10 Home

15. Media carousel
The images will work as a 10
10
carousel. Sideways swipe will blow
up the next image. From: Meena 3 min ago
Profile To: You, Pooji, Brun..
The user can also drag an image
out of the line and bring it to the
panel to blow up.
Hello…what you doing?
Reply all Reply
Back 10 Home

16. Slideshow player
The image will progress to
the next one in the following
conditions
1- .5 seconds have lapsed
2 – the user makes a swipe
on the image.
In each case, the image will
be animated as it swipes
across.
Back

17. Slideshow player
If the user touches the
slideshow, it will pause at the
image which is in focus.
In this case a play button will
appear again. The slideshow
will start playing again if the
user clicks on the play button
or if he makes a swipe with
his hand again.
Back

18. Slideshow player
When the slideshow comes to
a video thumbnail, the
thumbnail will behave exactly
like an image. Until the user
clicks on it. The moment a
user clicks on the image, it
will open the video player as
on the next slide and start
playing.
Back

19. Slideshow player
When the slideshow comes to
a video thumbnail, the
thumbnail will behave exactly
like an image. Until the user
clicks on it. The moment a
user clicks on the image, it will
open the video player as on
the next slide and start
playing.
The player controls disappear
after sometime and appear
again in the following cases:
1- the video stops playing
2 - The user touches the
screen Back

20. Gallery
10
10
Most Recent posts
Friends’s posts
Last week’s popular posts
Post Search Categories
Home Back

21. Post
10
10
Ammit’s post
For the media a display
template will be
created. And the rest of
the RTML will show
below
Family pics, amit, me
View slideshow (8
The RTML will be pics) In the RTML each link
scrolled through swipes Rate will be presented in the
as well as the scroller form of a button with an
Category: Bollywood isolation area around it
with a big enough
button to be able to be ------------------ to make sure that
clicked and dragged Share post erroneous touches do
------------------ not take place
Post Search Categories
Home Back

22. Compose message
10
10
Reply to: Add recipients
Meena, Pooji, Brun.. History
Record voice Open camera Phone Gallery
Tap here to enter text…
Send
Back 10 Home

23. Compose message
10 10
10
10
Add recipients Reply to: Add recipients
Reply to:
Meena, Pooji, Brun.. History Meena, Pooji, Brun.. History
XX:XX of XX seconds recorded XX:XX sec (415 KB)
Tap here to enter text… Tap here to enter text…
Send Send
Back 10 Home Back 10 Home

24. Compose message
10
10
Reply to: Add recipients
Meena, Pooji, Brun.. History
(415 KB) (185 KB left)
Tap here to enter text…
Send
Click ‘n’ attach
Back 10 Home

25. Compose message
10
10
10
10
Add recipients Reply to: Add recipients
Reply to:
History Meena, Pooji, Brun.. History
Meena, Pooji, Brun..
(415 KB) (52 KB) (133 KB left)
(415 KB) (52 KB) (133 KB left)
Tap here to enter text… Picture 02.jpg
2205200804.jpg
02/01/07 3:22 PM
Picture 02.jpg
02/01/07 3:22 PM
Send
Picture 02.jpg
02/01/07 3:22 PM
Send
Attach
Back 10 Home