Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Hubstir wireframe
1. 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.
2. 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”
+
+
+
+
3. Syncing Mobile phone
Back
Please enter mobile phone
+01Tap to select country code
Request for verification
Once 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
4. Profile Setting up
Done
Once users click on done, it
goes to page 2
First name
Last Name
Email Address
Tap to upload image/ activate
camera
5. 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 cities
Swipe 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
6. 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
+
Singapore
A
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
City
City
City
City
City
City
City
City
City
City
City
City
City
City
City
Tap to change city
7. 5am 5pm 11pm11am
May 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
8. 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)
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 11pm11am
morning = 5am - 11am
afternoon = 11am to 5pm
evening = 5pm to 11pm
night = 11pm to 5am
10. 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 Title
Location
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
11. 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 ago
Time stampLocation
Users can tap to reveal this list.
Tapping again will hide the list
Write Something! Users tap here to add a status
12. Engagement screen
Menu
Back to Engagement List
Engagement Title
Name of
creator
Location
9:45 10 You have confirmed
Name
140 character comment
2 mins agoLocation
Users can tap to reveal this list.
Tapping again will hide the list Participant
Name
140 character comment
2 mins agoLocation
Write Something!
13. Write Something
Back to Engagement
Name
140 character comment
2 mins agoLocation
Name
140 character comment
2 mins agoLocation
Send
140 character comment
Location Tap to select location
Comments from previous user
14. 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
15. 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.
16. 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
+
17. ConnectionsConnection
Connections
Name
RemoveName
Name
Name
Name
Swipe left to reveal “Remove
Name
Name
Menu 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
19. 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
20. 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
21. Notification
Notification
xxx has requested to be your friend
3s 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 agoxxx has joined hubstir
3s 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 engagement
3s ago
xxx has confirmed attendance in your event
3s ago Tapping will bring you to the event page
You have RSVPed to xxx event
3s ago Everytime when user has RSVP to a new
event
Tapping will bring you to the event page
Reminder: You have xxx event today
3s 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 event
3s ago
This happens when a user has left a
comment on an event that you have
joined
Users 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 event
3s ago
You have RSVPed to xxx event
3s ago
Reminder: You have xxx event today
3s ago
xxx has left a comment on xxx event
3s ago
22. Name
Settings
140 chars description
Email address
if 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.
Logout
Tap to logout
Tap to sync/ re-sync
Menu