hubstir wireframe
TRANSCRIPT
Splash Screen
Splash
Facebook Connect
Sync to Mobile Phone
Users got 2 ways to sign up / login !
1) Facebook Connect - Which will pull contact list from Facebook
2) Sync to Mobile Phone number - Which will pull contact list from
user’s phone
If users sign up using Facebook. Facebook will pull other information such as Name and profile picture.
First Time Signing up
Check out your friends who are on Hubstir!
Name
This is based on whether connect using Facebook Connect or Mobile
phone
Tapping on this button will send request to the other party along with a
push notification “ Hey, [username] wants to connect to you on Hubstir!”
Name Cancel Request
Name
When users have tapped on “+Friend” and the other party has yet to accept,
this button will be shown. !
Tapping on this button will cancel request. And the button reverts back to
“+Friend”
Sync up your mobile phone contact to find more friends
Name
Name
Name
Cancel Request
If users sync up their Facebook profile, this button will request for
them to sync up their mobile contact, and vice versa
Scroll to view more
Proceed without adding friends
If user did not select anybody to add, this button will remain as “Proceed
without adding friends”. !
If user has made 1 ore more request, the button changes to “ Proceed”
+
+
+
+
Syncing Mobile phone
Back
Please enter mobile phone
+01Tap to select country code
Request for verificationOnce user tap on this, a verification code will be sent to the
mobile number
After receiving verification code, please key them into the boxes below
Users key in the verification code here. If code is wrong,
there will be a popup saying “ Verification code is
wrong” [Request New Code] [Cancel]
!If user selects “Request New
Code”, a new code will be sent to them. The previous
code will be inactive
Upon correct activation, users will go to profile setting page
Profile Setting up
Done Once users click on done, it goes to page 2
First nameLast Name
Email Address
Tap to upload image/ activate camera
Availability
M!3
T!4
W!5
T!6
F!7
Sa!8
Su!9
May 3-9 2014
5am 5pm 11pm11am
Menu
Tap to create event
+
Light grey = Not available
User double tap to change to unavailable. Double tap to switch
back to available
Current date will be highlighted in red
Dark grey = History, in other words, date has passed. Users are not
allowed to make changes to history dates
Orange = available
Goes to engagement calendar
Singapore Scroll up and down to change citiesSwipe left and right to change weeks
Grey with an orange box = User is not available in this city but is
available in another city
Tap to enter “joint availability"
Tap on city to trigger a drop list for user to select another city
5am 5pm 11pm11am
City selection
M!3
T!4
W!5
T!6
F!7
Sa!8
Su!9
May 3-9 2014
Menu
Tap to create event
+
SingaporeA B C D E F G H I J K L M N O P Q R S T U V W X Y ZTap anywhere in on the screen to close the
list
CityCityCity
CityCityCityCity
CityCityCityCity
CityCityCityCity
Tap to change city
5am 5pm 11pm11amMay 3-9 2014
M!3
T!4
W!5
T!6
F!7
Sa!8
Su!9
Menu +Menu
Legend Menu
Close
My Profile
Settings
My AvailabilityCurrent screen selected will be in different colour
Notification
Joint Availability
Singapore
May 3-9 2014
Joint availability
NameNameName
8 available in Singapore
Swipe left and right to change weeks
Name
NameNameName Name
6 available in Hong Kong
NameName Name
NameName
3 available in Paris
NameNameName
Menu
Scroll down to view more cities
Indicates that you have selected this person to check his/her joint
availability
Check out their availabilities
The order of cities affect how will the cities be arranged in the joint
availability view (slide 9)
Joint Engagement Calendar
M!3
T!4
W!5
T!6
F!7
Sa!8
Su!9
Menu Tap to view the definition of different colours
Tap to create event
+
1 3
2
7
Tap to go toggle to “my availability”
Open circle (with no number) = at least one other person you have selected to check availability is
available
Open circle (with number) = at least one other person that you have selected is available and
there are events proposals that you and you have not joined any.
!The number of events is indicated in the number.
In this case, there are 3.
White circle (with number) = at least one other person that you have selected is available and
there are events proposal. !
When it is white, it means that you have joined one of the proposals.
!In this case, there are 2 proposals, and you have
joined one.
May 3-9 2014
Singapore
Swiping down will take you to the next city where most of your connections are available
5am 5pm 11pm11ammorning = 5am - 11am
afternoon = 11am to 5pm evening = 5pm to 11pm
night = 11pm to 5am
Events for the day
3rd May 2014
Menu Filter
Back to overview
Name of creator
Location Pulled from 4square API
Tap to create event
9:45 10
Tap to select another timing
Star Indicates which timing was selected. Star automatically switches based on the
timing. User can swipe between time period of the day screens. 9pm to 4am is
last. 4am to 9am is first.
Number of confirmed participants
Tap to view full detail
Name of creator
Location
9:45 10
Name of creator
Engagement Title
Engagement Title
Engagement TitleLocation
9:45 10
You have confirmed This button appears if user has confirmed attendance
This means a private event that you are invited to
Tap to view who is joining
+
NameNameName Name
Swipe through all connections available at this time including those that were not selected in joint availability (page 7)
Indicates event that you have created. You can enter to edit the details
You have confirmed
5am 5pm 11pm11am
Engagement screen
Menu
Back to Engagement List
Engagement Title
Name of creator
Location
9:45 10 You have confirmed Tap to remove confirmation
Name
Name Name Name
Name and avatar of participants
Swipe left and right to view list
Name
140 character comment
2 mins agoTime stampLocation
Users can tap to reveal this list. Tapping again will hide the list
Write Something! Users tap here to add a status
Engagement screen
Menu
Back to Engagement List
Engagement Title
Name of creator
Location
9:45 10 You have confirmed
Name140 character comment
2 mins agoLocation
Users can tap to reveal this list. Tapping again will hide the list Participant
Name140 character comment
2 mins agoLocation
Write Something!
Write Something
Back to Engagement
Name140 character comment
2 mins agoLocation
Name140 character comment
2 mins agoLocation
Send
140 character comment
Location Tap to select location
Comments from previous user
Create Event
Cancel Creation
Name of Event
Start time
Date
Location Pull from foursquare API
Calendar picker view
Time picker (like calendar)
Is this event private? Yes and no slider
NameNameNameAdd
+Tap to remove
Tap to add connections
Create Creating an event immediately adds a “dot” on your calendar
If it is a private event, user get to add their connection
Max number!of participants
Free text, numerical only
No limit Tap if there is no limit to the number of participants
End time
User Profile
Menu View
+
Tap on this icon to add user as friend.Upon tapping , the other party will receive a
notification that you are requesting to be their friend. The other user will need to
accept request in order for connection to be established.
!Connection is 2 way
!If you are already friends , this button will be
replaced with one that “de-friend” users.
Name
140 chars description
Engagement Title
Location
Date
Engagement Title
Location
Date
Engagement Title
Location
Past engagement which user has participated
If users are not friends, this button will not appear
Users will not have this option if this is their own profile
User will not be able to view engagement of another user if they are not friends.
User Profile
Menu
Name
140 chars description
Engagement Title
Location
Date
Engagement Title
Location
Date
Engagement Title
Location
View
User Profile
Connections
Availability Friends will be allowed to view each other’s availability
Friends will be allowed to view each other’s connection
+
ConnectionsConnection
Connections
Name
Remove Name
Name
Name
Name
Swipe left to reveal “Remove
Name
NameMenu Add
If this is somebody else’s profile, you will not be allowed to remove
Tap to view profile
When you are in your friend’s connection, those highlighted in
green means that you are not connected to this person, and this
person is in one of the engagement that you have joint
ConnectionsConnection
Connections
Name
Remove Name
Name
Name
Name
Swipe left to reveal “Remove
Name
NameMenu
Tap to access user Facebook contact to invite
Add
Phone Tap to access use’s phone contacts
Add Connection
Name
Name
Name
Name
Name
Name
Tap to go back to connection
Menu
+
+
Invite
Invite
Invite
Invite
If user’s friend has joined Hubstir, but yet to add, this will be the icon
If user’s friend has yet to join Hubstir, this will be the icon
Add Connection
Tap to go back to connection
Menu
Tap to !Sync
You have yet to sync your account to your Mobile Phone/ Facebook. Tap here to initialise syncing
If users have yet to sync their accounts to their Facebook/ Mobile phone
number. They can tap here to initialise syncing
Message changes depending if this is the Facebook / mobile phone screen
Notification
Notification
xxx has requested to be your friend3s ago
Time stamp: !
0sec to 59 sec - x secs ago 1 min to 59 mins - x mins ago
1 hour to 23 hours - x hours ago 1 day to 6 days - x days ago
1 week and above - x weeks ago xxx has joined hubstir3s ago
If user has synced to Facebook/ Mobile phone number , and a contact has joined Hubstir, they will be notified.
Tapping will lead to their profile
Tapping will lead to their profile
xxx has invite you to a private engagement3s ago
xxx has confirmed attendance in your event3s ago Tapping will bring you to the event page
You have RSVPed to xxx event3s ago Everytime when user has RSVP to a new
event
Tapping will bring you to the event page
Reminder: You have xxx event today3s ago
Tapping will lead user to the event page
If user has joined 2 events on the day, user will receive this notification twice,
one for each event xxx has left a comment on xxx event3s ago
This happens when a user has left a comment on an event that you have
joinedUsers will receive an e-mail on that day
of the event.xxx has invite you to a private engagement
3s ago
xxx has confirmed attendance in your event3s ago
You have RSVPed to xxx event3s ago
Reminder: You have xxx event today3s ago
xxx has left a comment on xxx event3s ago
Name
Settings
140 chars description
Email addressif user has syced to Facebook, this
email address will be the same address that is used in Facebook.
FB Phone
Tap to edit picture
Edit
User taps this button to edit the field.
!Button will change to “Save”
in edit mode.
LogoutTap to logout
Tap to sync/ re-sync
Menu