Slatebot: Wireframe
- 1. Navigation within the application
- 2. Screen 1: Video player (loop video and image files) { Slatebot Technologies Touch or swipe to go to Screen 2 }
- 3. Screen 4: Product discovery screen (Price filter) { Rs. 1000 – Rs. 5000 { Touch button to decide price range Selected 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 tab Touch button to show results on screen 5 } }
- 5. Screen 4: Product discovery screen (OS filter) { Rs. 1000 – Rs. 5000 Android { 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. 5000 Android { 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. 5000 Android Nokia { 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. 5000 Android Nokia { Touch button to show results on screen 5 } }
- 9. Screen 4: Product discovery screen (Features tab) { Rs. 1000 – Rs. 5000 Some feature categories will have sub features which will be shown when the parent feature is turned on Android } 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. 5000 Android Nokia { 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 compare View ---------------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 details Touch 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 details Swipe 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.