Hubstir wireframe

download Hubstir wireframe

of 22

  • date post

    06-Jul-2015
  • Category

    Technology

  • view

    45
  • download

    0

Embed Size (px)

Transcript of 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 users phone If users sign up using Facebook. Facebook will pull other information such as Name and prole 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 notication 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 nd more friends Name Name Name Cancel Request If users sync up their Facebook prole, 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 verication Once user tap on this, a verication code will be sent to the mobile number After receiving verication code, please key them into the boxes below Users key in the verication code here. If code is wrong, there will be a popup saying Verication 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 prole setting page 4. Prole 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 Prole Settings My AvailabilityCurrent screen selected will be in different colour Notication 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 denition 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 rst. Number of conrmed 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 conrmed This button appears if user has conrmed 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 conrmed 5am 5pm 11pm11am 11. Engagement screen Menu Back to Engagement List Engagement Title Name of creator Location 9:45 10 You have conrmed Tap to remove conrmation 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 conrmed 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 Prole Menu View + Tap on this icon to add user as friend.Upon tapping , the other party will receive a notication 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 prole User will not be able to view engagement of another user if they are not friends. 16. User Prole Menu Name 140 chars description Engagement Title Location Date Engagement Title Location Date Engagement Title Location View User Prole Connections Availability Friends will be allowed to view each others availability Friends will be allowed to view each others connection + 17. ConnectionsConnection Connections Name RemoveName Name Name Name Swipe left to reveal Remove Name Name Menu Add If this is somebody elses prole, you will not be allowed to remove Tap to view prole When you are in your friends 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 18. ConnectionsConnection Connections Name RemoveName Name Name Name Swipe left to reveal Remove Name Name Menu Tap to access user Facebook contact to invite Add Facebook Phone Tap to access uses phone contacts 19. Add Connection Name Name Name Name Name Name Tap to go back to connection Menu + + Invite Invite Invite Invite If users friend has joined Hubstir, but yet to add, this will be the icon If users 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. Notication Notication 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 notied. Tapping will lead to their prole Tapping will lead to their prole xxx has invite you to a private engagement 3s ago xxx has conrmed 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: Yo