Download - Slatebot: Wireframe

Transcript
Page 1: Slatebot: Wireframe

Navigation within the application

Page 2: Slatebot: Wireframe

Screen 1: Video player (loop video and image files)

Slatebot Technologies

Touch or swipe to go to Screen 2 { }

Page 3: Slatebot: Wireframe

Rs. 1000 – Rs. 5000

Screen 4: Product discovery screen (Price filter)

{ } Touch button to decide price range

{ } Selected price range is added here for quick reference

Page 4: Slatebot: Wireframe

Rs. 1000 – Rs. 5000

Screen 4: Product discovery screen (Navigate to OS filter)

{ } Touch button to go to OS sub tab

{ } Or Use swipe to go to OS sub tab

Touch button to show results on screen 5

{ }

Page 5: Slatebot: Wireframe

Rs. 1000 – Rs. 5000

Screen 4: Product discovery screen (OS filter)

{ } Touch button to go to OS sub tab

{ } Or Use swipe to go to OS sub tab

Selected OS is added here. Possible to select multiple OS

{ } Android

Touch button to select OS. User can make more than one selection

{ }

Page 6: Slatebot: Wireframe

Rs. 1000 – Rs. 5000

Screen 4: Product discovery screen (Navigate to Brands sub tab)

{ } Touch button to go to OS sub tab

{ } Or Use swipe to go to OS sub tab

Touch button to show results on screen 5 { } Android

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 { }

Page 7: Slatebot: Wireframe

Rs. 1000 – Rs. 5000

Screen 4: Product discovery screen (Brands filter)

{ } Touch button to go to OS sub tab

{ } Or Use swipe to go to OS sub tab

Selected Brand is added here. Possible to select multiple brands

{ } Android

Touch button to select Brand. User can make more than one selection

{ }

Nokia

Page 8: Slatebot: Wireframe

Rs. 1000 – Rs. 5000

Screen 4: Product discovery screen (Navigate to Features tab)

{ } Touch button to go to OS sub tab

{ } Or Use swipe to go to OS sub tab

Android

Touch button to go to Features sub tab { }

Nokia

Touch button to show results on screen 5 { }

Or use swipe to got to Features sub tab { }

You can also use swipe to go back to OS sub tab { }

Page 9: Slatebot: Wireframe

Rs. 1000 – Rs. 5000 Android Nokia

Screen 4: Product discovery screen (Features tab)

Some feature categories will have sub features which will be shown when the parent feature is turned on

{ }

Page 10: Slatebot: Wireframe

Rs. 1000 – Rs. 5000 Android Nokia

Screen 4: Product discovery screen (View Results)

Touch button to show results on screen 5 { }

You can also use swipe to go back to Brands sub tab { }

Swipe up/down for scrolling { }

Page 11: Slatebot: Wireframe

Screen 5: Product Grid

User preferences set in the earlier tab should be displayed here. Features are listed in a dropdown { } Touch button to go to

Price sub tab { }

Swipe up/down for scrolling { }

Page 12: Slatebot: Wireframe

Screen 5: Product Grid

Touch and HOLD will show popup for view or compare { }

Touch to add phone to compare list { }

Selected phones are added to this list for comparison. Max 3 phones possible { }

View ----------------

Compare

Page 13: Slatebot: Wireframe

Screen 5: Product Grid

Trying to select a 4th phone will show a popup prompting user to replace phone from existing selection

{ }

Page 14: Slatebot: Wireframe

Screen 5: Product Grid

Should Ask permission to remove phone. Clicking on remove to remove the phone from the list

{ }

Touch button to compare Selected phones { } Remove?

Page 15: Slatebot: Wireframe

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

Page 16: Slatebot: Wireframe

Screen 2: Single product details

Swipe will take you back to previous screen

Swipe up/down for scrolling { }

Page 17: Slatebot: Wireframe

Screen 3: Product comparison

Touch to view details of this product (screen 2) { } Swipe will take you back to

previous screen

Swipe up/down for scrolling { }

Page 18: Slatebot: Wireframe

Screen 3: Product comparison

When the user scrolls down, the image disappears and only product name and price are shown.