Hubstir wireframe

22
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.

Transcript of Hubstir wireframe

Page 1: Hubstir wireframe

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.

Page 2: Hubstir wireframe

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”

+

+

+

+

Page 3: Hubstir wireframe

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

Page 4: Hubstir wireframe

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

Page 5: Hubstir wireframe

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

Page 6: Hubstir wireframe

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

Page 7: Hubstir wireframe

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

Page 8: Hubstir wireframe

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)

Page 9: Hubstir wireframe

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

Page 10: Hubstir wireframe

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

Page 11: Hubstir wireframe

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

Page 12: Hubstir wireframe

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!

Page 13: Hubstir wireframe

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

Page 14: Hubstir wireframe

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

Page 15: Hubstir wireframe

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.

Page 16: Hubstir wireframe

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

+

Page 17: Hubstir wireframe

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

Page 18: Hubstir wireframe

ConnectionsConnection

Connections

Name

Remove Name

Name

Name

Name

Swipe left to reveal “Remove

Name

NameMenu

Tap to access user Facebook contact to invite

Add

Facebook

Phone Tap to access use’s phone contacts

Page 19: Hubstir wireframe

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

Page 20: Hubstir wireframe

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

Page 21: Hubstir wireframe

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

Page 22: Hubstir wireframe

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