Challenge Overview
Challenge Introduction:
Welcome to Retailer Loyalty Android Mobile Application UI Prototype Challenge. In this challenge we are looking for your help to create a prototype for an android mobile application.
As part of this challenge we need you to document your HTML5 and CSS3 (using best practices). We are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development. We will allow documentation updates during final fixes (but still required).
At the of this challenge, we need a solid UI prototype using best coding practice/solutions. Good luck and we’re looking forward to your submissions!
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
UI Prototype Considerations:
- Ensure your submission is clear of validation errors and warnings (HTML & CSS).
- Style.css - use this name for all custom css.
- Please use proper id’s and classes in your naming conventions.
- This prototype is being targeted for android devices (mobiles), will be viewed / tested in android mobile browser, so need to make sure your prototype works well in current versions of Chrome mobile, Opera browser
- This prototype will later will be converted to ionic app
- Please find all required assets in the forums!
- General consideration for screens that has a scrollable list of items, for these screens - please show upto 10 items!
- At the top, we don't need to show the status bar as shown in the designs.
- Need to make sure header is fixed while scrolling.
- You can use google font or font-face, either way is fine.
- For the charts within the dashboard, feel free to use any 3rd party charts (you can use www.highcharts.com).
- Please use css preprocessors (SCSS / SASS) and use JSON for dummy data!
Required Screens:
We need below screens and interactions in the prototype
Splash Screen:
Reference: 00 - Splash Screen.jpg
- On launch, it needs to show the splash screen for the a few seconds (say 5 sec) and then move to the next screens
- You can show a simulation of the percentage loading from 0 to 100% and then move to 00_0 - Introducing.jpg
Intro Screens:
Reference: 00_0 - Introducing.jpg
- After splash screen, we show this 00_0 - Introducing.jpg, Tapping on “next” shows 00_0_1 - Introducing.jpg, Tapping “next” again shows 00_0_2 - Introducing.jpg, Tapping on “Get Started” will show 00_1 - App Start.jpg
- Tapping on “skip” in any of the intro screens will directly show 00_1 - App Start.jpg
- In the intro screen we need to support swipe left or right action as well.
App Start:
Reference: 00_1 - App Start.jpg
- User will first see the option to login, signup
- Login: take user to 01_5 - Login.jpg
- Sign up: take user to 01_1_.jpg, they will choose “Agent or Retailer” in it and whatever is chosen will take them to 01_2 - Sign Up.jpg
Sign up:
Reference: 01_2 - Sign Up.jpg
- In the top Tapping on the left arrow will take them back to 01_1_.jpg
- Have the social logins as “dummy/dead” links
- “Sign up” based on what the user chooses in the previous step the corresponding user is shown here.
- Show how the error screen will look like, maybe Tapping on “Sign up” should show the error screen 01_3 - Sign Up Error.jpg and Tapping “sign up” again in 01_3 - Sign Up Error.jpg should show modal 01_4 - Sign Up Success.jpg
- No need validation for the fields.
- Clicking on "Ok" in success message screen will take user to login screen (01_5 - Login.jpg)
Login:
Reference: 01_5 - Login.jpg
- We need some validation in this screen..
- If user enters "retailer" in the username, and then tapping on "Login" will take them to 03 - Retailer Dashboard.jpg
- If user enters "agent" in the username, and then tapping on "Login" will then take them to 07 - Agent Dashboard.jpg
- for both the cases, password should not be required fields..so just entering the username will take them to corresponding dashboard.
- Have the social logins as “dummy/dead” links
- Tapping on “Sign up” will show 01_1_.jpg
A. Retailer
Retailer Dashboard:
Reference: 03 - Retailer Dashboard.jpg
- In the top left (hamburger - 3 lines icon): Tapping on it shows the menu as in 03_1 - Navigation.jpg
- In the top right: we have notification icon, take the user to 08 - Notifications.jpg.
- In the top right: we have settings icon, Tapping on it shows options to edit the sections in dashboard 03_0_3_.jpg
- All sections (My profile, my agent, statistics, recent inventory) in dashboard will be collapsible, just Tapping on the “- section name” will collapse it like this 03_.jpg, 03_0 - Retailer Dashboard Collapse.jpg
- Tapping on “Edit” in my profile - will take them to 03_2 - Edit Profile.jpg
- Tapping on the orange icon in the right (within this section) will take the user to “My Inventory” (04_0 - Retailer Inventory.jpg)
- My Agent: Any icons within this will be a deadlink
- Tapping on any of the items in “Recent Inventory” will take the user to 05_3 - Product Preview.jpg
Manage Dashboard:
- When a user clicks on “settings” icon in the header, they see options in each of the section to manage it
- At the top, we see two links “+Add” and “Done”, Tapping on “+ Add” will show the options as in 03_0_4 - Add Widget.jpg, Tapping “Done” will take the user back to 03 - Retailer Dashboard.jpg
- Options in each section include, a toggle switch to turn it on / off..when it is “off”, color of it is greyed out like 03_0_2 - Manage Retailer Dashboard.jpg...by default all sections will be “on” and will have the move icon - Tapping and dragging will allow them to move it up or down within the dashboard (03_0_1 - Manage Retailer Dashboard.jpg) - looking for your help to simulate this!
Edit Profile:
Reference: 03_2 - Edit Profile.jpg
- Top left arrow icon will take them back to dashboard.
- Tapping on “Save” will take them back to dashboard.
- Make the profile image a dummy link
- All details in the page will be editable (except "Register as" field won't be editable).
Retailer Inventory:
Reference: 04_0 - Retailer Inventory.jpg
- Top right we have 3 icons:
- - - first icon is the filter - Tapping on it will show the filter as in 04_7 - Filter.jpg (Tapping “Apply, Reset or back icon” within filter will take back to 04_0 - Retailer Inventory.jpg)
- - - second icon the sort - Tapping on it will show these options 04_4 - Retailer Inventory Filter.jpg (clicking on any option will hide it)
- - - third icon changes the view - Tapping on it change the view and icon to 04_6 - Change Preview Mode of List Inventory.jpg
- Below that we have 3 tabs:
- - - All (04_0 - Retailer Inventory.jpg): Tapping on product should take them to 05_3 - Product Preview.jpg
- - - Stock (04_1 - Retailer Stock Inventory.jpg): Tapping on product should take them to 05_3 - Product Preview.jpg
- - - Sold (04_2 - Retailer Sold Inventory.jpg): Tapping on product should take them to 05_3 - Product Preview.jpg
- Please include search bar in all the 3 tabs as shown in 04_0 - Retailer Inventory.jpg, tapping in the search bar will allow them to type and search for products, see search results here: 04_9.jpg...clear all / back icon in search results will take them to previous screen...other options in search results page will work similar to Retailer inventory screen.
- Tapping on the 3 vertical dots icon in each product will show 04_3 - Retailer Inventory Produk Options.jpg, clicking on the options will just hide these options.
- Tapping on “+” icon at the bottom will show the floating menu like 04_10 - Floating Button.jpg but have these as options "Add Inventory", "Sell Product"...clicking on both these will show 05 - Barcode Scanning.jpg with appropriate tab selected, Add Inventory will show the incoming tab and sell product will show sold tab.
Barcode Scanning:
Reference: 05 - Barcode Scanning.jpg
- At the top left arrow will take the user back to “My Inventory” screen
- In the top right, first icon is the option that allows user to enter barcode, tapping on it will take user to 05_1 - Barcode Manual Input.jpg, second icon allows the user to view the scan activity 05_2 - Scanning History.jpg
- This will show two tabs “incoming and Sold”, user will be able to choose between these two!
- Both tabs will show the barcode scanner as shown in 05 - Barcode Scanning.jpg
- At the bottom we have button that allows the user to scan through the product - on click in the button will show the scanning success message (05_1_ - Successfully Scan Notification.jpg), this scanning success message should disappear automatically.
- If the barcode is not scanned properly it shows the error 05_0 - Barcode Scanning Failed.jpg with two buttons, “Scan Another” will show this view 05 - Barcode Scanning.jpg, “Contact Agent” will show 05_4 - Write Inquiry.jpg...to show this error screen..in the initial scan show the failed screen (05_0 - Barcode Scanning Failed.jpg) and tapping on “Scan Another” shows the success message as in 05_1_ - Successfully Scan Notification.jpg
Scan History:
Reference: 05_2 - Scanning History.jpg
- Within the scan history, user will be able to view the list of scanned products - each product will have an icon indicating whether they are synched
- - - the grey icon on tap will show a message “Not Synced Yet”
- - - green icon on tap will show a message “Successfully Synced”
- Clicking on a product will take the user to 05_3 - Product Preview.jpg
Product Details:
Reference: 05_3 - Product Preview.jpg
- This shows the details about the product
- Tapping on left arrow icon shown in top left will take the user previous page
- Three dots icon in the right: Have it as a dummy link
- Tapping on “Contact Agent for Inquiry” will take them to 05_4 - Write Inquiry.jpg
Inquiry:
Reference: 05_4 - Write Inquiry.jpg
- Top left arrow will take them back to previous page from where they clicked contact agent
- Top right three dot icon, will show the options as in 05_4_2 - Ask Inquiry Options.jpg (Tapping on any options will hide it)
- Tapping on submit will show 05_4_2_ - Inquiry Submitted.jpg
- Tapping on “Okay” within the success message will hide the model and take them to 03 - Retailer Dashboard.jpg
Retailer Navigation:
Reference: 03_1 - Navigation.jpg
- Tapping on the hamburger icon in any agent screen will show this navigation.
- Tapping on “Edit” under the profile image, should take the user to edit profile screen similar to 03_2 - Edit Profile.jpg
- Dashboard: Takes user to 03 - Retailer Dashboard.jpg
- Notifications: Takes user to 08 - Notifications.jpg
- My Inventory: Takes user to 04 - Retailer Inventory.jpg
- Scan Barcode: Takes user to 05 - Barcode Scanning.jpg
- Scan Activity: Takes user to 05_2 - Scanning History.jpg
- Logout: Will take the user to “Login” screen 01_5 - Login.jpg
B. Agent:
Agent Dashboard:
Reference: 07 - Agent Dashboard.jpg
- Overall functioning of the dashboard is similar to retailer’s dashboard, so all interactions explained for that is applicable here as well..please make sure to capture all as required.
- In my profile section, we have two green icons on either side of the profile image - on the left it takes the user to 07_0_1.jpg (my retailers) and tapping on the icon in the right will take them to leaderboard (
- Note in addition to notification and settings icon in the top we have export icon in the center, tapping it will show the options as in 07_0 - Export Options.jpg
- Recent Inquiries Section, tapping on “All retailers” will show 07_0_.jpg
- My Retailers: Tapping on “All Retailers” will show my retailers screens 07_0_1.jpg
- Leaderboard: tapping on “All Leaderboard” will show the leaderboard 10_Leaderboard.jpg
- Tapping on any of the items in “My Retailers” or “Leaderboard” will take them to retailer details (07_1 - Retailer Detail.jpg)
My Retailers:
Reference: 07_0_1.jpg
- This page will show the list of retailers
- At the top right, we have list of options - 1st icon will show a filter screen similar to 04_7 - Filter.jpg but within that filter screen, we will just have “date range and keyword” and remove item type and quantity range., 2nd icon will show the options as shown in
- Tapping on any of the retailer will take them to retailer details screen (07_1 - Retailer Detail.jpg)
- Make the “+” icon at the bottom a dummy link for now
Retailer Details
Reference: 07_1 - Retailer Detail.jpg
- This shows the retailer details, we have 3 tabs in this page
- - - About: Follow the storyboard, make all links as dead links
- - - Inquiry: Follow the contents from this screen (07_2 - Retailer Detail.jpg), tapping on an item will show 07_3 - Inquiry Detail.jpg, and tapping on 3 vertical dots icon within each inquiry will show options as in 07_2_.jpg (clicking on any option will hide it).
- - - Points: This will show the points 07_5 - Retailer Detail.jpg, tapping on the drop-down above the graph will show the options as in 07_7 - Retailer Detail.jpg and selecting “Sold quantity will change the graph as shown in 07_8 - Retailer Detail.jpg, selecting “Points” again in the drop-down will change it back to …..swiping the list will show the time when they were scanned as in 07_5_.jpg
Inquiry Details:
Reference: 07_3 - Inquiry Detail.jpg
- This shows the inquiry details
- At the bottom, we have 2 buttons - “Reply” and “Solved”, for tapping on reply we don’t have a screen but if you can just show a modal window a text box and 2 buttons to “Reply” and “Cancel”...tapping on any of these buttons will hide the modal window.
Notifications:
Reference: 08 - Notifications.jpg
- Settings icon make it a dead link
- Tapping on each of the notification item will take the user to 07_3 - Inquiry Detail.jpg
- We have 2 tabs, “All and Inquiry” should be able to switch between tabs and contents for both the tabs will be as in 08 - Notifications.jpg
- Tapping on 3 vertical dots icon within each notification will show options as in 07_2_.jpg (clicking on any option will hide it)
Agent Navigation:
Reference: 09 - Navigation.jpg
- Tapping on the hamburger icon in any agent screen will show this navigation.
- Tapping on “Edit” under the profile image, should take the user to edit profile screen similar to 03_2 - Edit Profile.jpg
- Dashboard: Takes user to 07 - Agent Dashboard.jpg
- Notifications: Takes user to 08 - Notifications.jpg
- My Retailers: Takes user to 07_0_1.jpg
- Logout: Will take the user to “Login” screen 01_5 - Login.jpg
Leaderboard:
Reference: 10_Leaderboard.jpg
- This will show the list of retailer ranking based on their points
- Tapping on each of the retailer will show the retailer details 07_1 - Retailer Detail.jpg
- Tapping back will take them back to the previous screen
- At the top right, we have the share icon, make this a dead link
Client Priorities (The items that are considered highest prototype priorities)
- Code Documentation
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
Specific HTML/CSS/JavaScript Requirements
HTML/HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
Device Requirements:
- Chrome, Safari browsers for Android
Provided Assets:
- Storyboard and Screenshots are provided in challenge forums.
- Invision Link to the prototype
Final Submission Guidelines
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.