Slatebot: Wireframe

download Slatebot: Wireframe

of 18

  • date post

    30-Jun-2015
  • Category

    Technology

  • view

    93
  • download

    0

Embed Size (px)

Transcript of Slatebot: Wireframe

  • 1. Navigation within the application

2. Screen 1: Video player (loop video and image files){ Slatebot TechnologiesTouch or swipe to go to Screen 2} 3. Screen 4: Product discovery screen (Price filter){Rs. 1000 Rs. 5000{Touch button to decide price rangeSelected price range is added here for quick reference}} 4. Screen 4: Product discovery screen (Navigate to OS filter){Touch button to go to OS sub tab{ Rs. 1000 Rs. 5000{}Or Use swipe to go to OS sub tabTouch button to show results on screen 5}} 5. Screen 4: Product discovery screen (OS filter){Rs. 1000 Rs. 5000Android{Touch button to select OS. User can make more than one selection}Selected OS is added here. Possible to select multiple OS} 6. Screen 4: Product discovery screen (Navigate to Brands sub tab){Click on button to go to Brands sub tab{}Or use swipe to got to Brands sub tab{}You can also use swipe to go back to Price sub tab Rs. 1000 Rs. 5000Android{Touch button to show results on screen 5}} 7. Screen 4: Product discovery screen (Brands filter)Touch button to select Brand. User can make more than one selection{Rs. 1000 Rs. 5000AndroidNokia{Selected Brand is added here. Possible to select multiple brands}} 8. Screen 4: Product discovery screen (Navigate to Features tab){Touch button to go to Features sub tab{ {}Or use swipe to got to Features sub tab}You can also use swipe to go back to OS sub tab Rs. 1000 Rs. 5000AndroidNokia{Touch button to show results on screen 5}} 9. Screen 4: Product discovery screen (Features tab){Rs. 1000 Rs. 5000Some feature categories will have sub features which will be shown when the parent feature is turned onAndroid}Nokia 10. Screen 4: Product discovery screen (View Results){Swipe up/down for scrolling{}}You can also use swipe to go back to Brands sub tab Rs. 1000 Rs. 5000AndroidNokia{Touch button to show results on screen 5} 11. Screen 5: Product Grid{User preferences set in the earlier tab should be displayed here. Features are listed in a dropdown{Swipe up/down for scrolling}}{Touch button to go to Price sub tab} 12. Screen 5: Product Grid{}Touch to add phone to compare list{}Touch and HOLD will show popup for view or compareView ---------------Compare{Selected phones are added to this list for comparison. Max 3 phones possible} 13. Screen 5: Product Grid{Trying to select a 4th phone will show a popup prompting user to replace phone from existing selection} 14. Screen 5: Product Grid{Remove?Should Ask permission to remove phone. Clicking on remove to remove the phone from the list{}Touch button to compare Selected phones} 15. Screen 2: Single product detailsTouch to bring up this menu option. View detail will show you that product details (screen 2). Compare will show product comparison with current phone 16. Screen 2: Single product detailsSwipe will take you back to previous screen{Swipe up/down for scrolling} 17. Screen 3: Product comparison{Swipe will take you back to previous screen{Touch to view details of this product (screen 2)Swipe up/down for scrolling}} 18. Screen 3: Product comparison When the user scrolls down, the image disappears and only product name and price are shown.