Challenge Overview
Welcome to "FAST!! 72Hrs Aerohive - Responsive Demo App UI Prototype Challenge". In this challenge, we need your help to create responsive HTML5 prototype for our new demo apps that will be able to demonstrate API calls of our products for a retail clothing store. We've got FAST Submission phase, Join with us NOW!!
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
Aerohive believes in a connected experience. Aerohive delivers an open mobility platform that simplifies and transforms the Connected Experience, through information, insights, and applications. Aerohive's Connected Experience is built on three core solutions that unlock the potential of mobility, and make networks easier to design, deploy, and manage:
Cloud Networking
Unified management designed to simplify administration with enhanced visibility and control, smarter troubleshooting, and flexible deployments through public, private, and on-premises solutions.
Great Wi-Fi
A fully distributed control architecture increases speed, scale, and resiliency, providing a foundation for connectivity that is supported by access layer switches and branch routers.
Applications & Insights
Business and IT applications that increase engagement and fuel business intelligence, powered by APIs, big data, and a partner ecosystem.
Importantly as a result, Aerohive has uniquely been able to create a rich and growing set of open RESTful APIs and a development platform to provide a foundation for Apps that showcase key insights and analytics via data collected while moving across the network on users and device behaviors and enable the ability to enact on that behavior. This is where developers come in! We love developers and encourage the very best and innovative Apps to grow on our platform and in return get visibility to over 30,000 end customers worldwide!
For this challenge we will be exploring a responsive demo for a retail clothing customer. The demo will contain three different Applications that our retail clothing store owners use. Although there will be a lot more functionality for each of these three APPs that will need to be explored, we are only focussing in on three specific use cases for this design challenge.
Primary Goal
We are looking for your help to help us create responsive UI Prototype (front end only) for our application that able to demonstrate API calls from our products. We'll need tablet and desktop version.
Competition Task Overview
The main task of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Key Requirements
- Test in all the required browsers (including Safari and Chrome for tablet).
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
Screen Requirements
- There are 3 use case scenario that needs to be simulated and should have their own screen creations, they are :
General Screen:
- Screen References (0.0_welcome_screen.jpg to 0.1_login_screen.jpg)
- User needs to login first to be able use the apps.
- Provide simple error scenario if user enter wrong credential.
- Once user successfully logged in to the apps, each of API demo's will be accessible from main navigation which consists of three buttons:
- VIP Notification
- Store Surge
- Geofencing
01. Use Case : VIP Notification
- Screen References 1.0.1_coming_VIP_Profile_.jpg to 1.3_Add_new_customers.jpg
- A retail clothing store would like to be notified when its best customers walk into the store so that sales staff can give them A+ treatment and assistance.
- When a VIP walks into the store, the store manager should receive a notification, and information on the VIP, such as name and status, should show up within the app.
- Customer detail may or may not be available for a customer
- User Scenario Needed:
-- In left side menus, there will be 3 main navigations available :
---- VIP Customers (1.1.0_VIP_customers_list.jpg), to see only VIP customer (customer that ever made big purchase or doing regular purchase in the store)
---- In Store Customers (1.2_In_Store_customers.jpg), to see all registered customers that currently in the store (with notification about how many new customer coming to the store)
---- Add a Customer (1.3_Add_new_customers.jpg), will bring user to add new customer page to register new customer.
-- By Default, show "In store customer" screen (1.2_In_Store_customers.jpg)
-- When VIP customer coming, notify user (store manager) about incoming VIP customer (1.0_VIP_Notification_Alert.jpg)
-- User can view VIP profile details (1.0.1_coming_VIP_Profile_.jpg) via View Customer Profiles button, while clicking "Remind me later" will bring user back to Store customer page (1.2_In_Store_customers.jpg).
-- User can find/filter customer via their name or doing free text search in the customer list screen (VIP and All customer screens).
-- In each customer list (VIP and All customer screens), user will be able to drilled down customer profiles details information.
-- Clicking "+" button will bring user to add a customer screen where user can register new customer (1.3_Add_new_customers.jpg).
-- Clickin "Purchase Recommendation" button will open purchase recommendations for the customer based on their interest (1.1.1_VIP_customers_list_purchase_recommendation.jpg)
02. Use Case : Store Surge
- Screen References 2.0_Store_surge_alarm.jpg to 2.2_Store_Surge_Admin.jpg
- A retail clothing store would like to be notified in advance of needing additional checkout clerks.
- When there is a sudden increase in shoppers present in the store, the store manager should be notified of a surge so that he can open more registers by the time those shoppers are ready to pay for their purchases.
- In the app, we should show the ability to set threshold definitions for a surge (ie, X number of people enter the store within Y minutes), and probably the number of people currently in the store.
- User Scenario Needed:
-- By default show store activity (2.1_Store_surge.jpg), Dashboard w/ current metrics for store activity (number of people in the store), time of day, historical data for store traffic for past week, month, and year
-- If there is a sudden traffic increase in the store, alerts and notify the store manager about the situation so they will aware and able to open more register/counter (2.0_Store_surge_alarm.jpg) - Notification screen when there has been a customer surge with option to alert ALL employees
-- Needs an admin screen to set the alerts and notifications settings (Key screen, set parameter for the Store surge condition. For example setting the number of customers in the store that would trigger the notification)
03. Use Case : Geofencing
- Screen References 3.0_Geofencing_alert.jpg to 3.2_Geofencing_add_new_device.jpg
- A retail clothing store provides tablets to sales staff to help them sell additional styles and accessories that may not be available on the shelf.
- They do not want these tablets to "walk out" of the store.
- Within the app, we should show a list of geofenced devices. If a device leaves the store range, the store manager should receive a notification, and the device should show as missing/lost/out-of-range in the app.
- User Scenario Needed:
-- By default, show dashboard w/ a list of devices with associated names.
-- User can view the dashboard in two different views, list (3.1.0_Geofencing_device_list.jpg) and maps (3.1.1_Geofencing_device_map.jpg)
-- In the same screen, User can drilled down on each devices list and see the device details with device name, owner name, type, and setting for RSSI range (0-32) to set the physical boundary for the device.
-- Ability to add a device with fields for device type, device name, device owner (3.2_Geofencing_add_new_device.jpg)
-- Notification of when a device leaves the designated area, or disconnects from the system (3.0_Geofencing_alert.jpg)
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any 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.
- You are allowed to use AngularJS, JQuery and Bootstrap for this challenge.
Browsers Requirements:
- IE11 above
- Latest Firefox, Safari & Chrome Browsers
- Tablet Browser (Landscape version).
Documentation Provided:
Storyboard and All necessary flow documents can be found in forum!
- 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.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
Aerohive believes in a connected experience. Aerohive delivers an open mobility platform that simplifies and transforms the Connected Experience, through information, insights, and applications. Aerohive's Connected Experience is built on three core solutions that unlock the potential of mobility, and make networks easier to design, deploy, and manage:
Cloud Networking
Unified management designed to simplify administration with enhanced visibility and control, smarter troubleshooting, and flexible deployments through public, private, and on-premises solutions.
Great Wi-Fi
A fully distributed control architecture increases speed, scale, and resiliency, providing a foundation for connectivity that is supported by access layer switches and branch routers.
Applications & Insights
Business and IT applications that increase engagement and fuel business intelligence, powered by APIs, big data, and a partner ecosystem.
Importantly as a result, Aerohive has uniquely been able to create a rich and growing set of open RESTful APIs and a development platform to provide a foundation for Apps that showcase key insights and analytics via data collected while moving across the network on users and device behaviors and enable the ability to enact on that behavior. This is where developers come in! We love developers and encourage the very best and innovative Apps to grow on our platform and in return get visibility to over 30,000 end customers worldwide!
For this challenge we will be exploring a responsive demo for a retail clothing customer. The demo will contain three different Applications that our retail clothing store owners use. Although there will be a lot more functionality for each of these three APPs that will need to be explored, we are only focussing in on three specific use cases for this design challenge.
Primary Goal
We are looking for your help to help us create responsive UI Prototype (front end only) for our application that able to demonstrate API calls from our products. We'll need tablet and desktop version.
Competition Task Overview
The main task of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Key Requirements
- Test in all the required browsers (including Safari and Chrome for tablet).
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
Screen Requirements
- There are 3 use case scenario that needs to be simulated and should have their own screen creations, they are :
General Screen:
- Screen References (0.0_welcome_screen.jpg to 0.1_login_screen.jpg)
- User needs to login first to be able use the apps.
- Provide simple error scenario if user enter wrong credential.
- Once user successfully logged in to the apps, each of API demo's will be accessible from main navigation which consists of three buttons:
- VIP Notification
- Store Surge
- Geofencing
01. Use Case : VIP Notification
- Screen References 1.0.1_coming_VIP_Profile_.jpg to 1.3_Add_new_customers.jpg
- A retail clothing store would like to be notified when its best customers walk into the store so that sales staff can give them A+ treatment and assistance.
- When a VIP walks into the store, the store manager should receive a notification, and information on the VIP, such as name and status, should show up within the app.
- Customer detail may or may not be available for a customer
- User Scenario Needed:
-- In left side menus, there will be 3 main navigations available :
---- VIP Customers (1.1.0_VIP_customers_list.jpg), to see only VIP customer (customer that ever made big purchase or doing regular purchase in the store)
---- In Store Customers (1.2_In_Store_customers.jpg), to see all registered customers that currently in the store (with notification about how many new customer coming to the store)
---- Add a Customer (1.3_Add_new_customers.jpg), will bring user to add new customer page to register new customer.
-- By Default, show "In store customer" screen (1.2_In_Store_customers.jpg)
-- When VIP customer coming, notify user (store manager) about incoming VIP customer (1.0_VIP_Notification_Alert.jpg)
-- User can view VIP profile details (1.0.1_coming_VIP_Profile_.jpg) via View Customer Profiles button, while clicking "Remind me later" will bring user back to Store customer page (1.2_In_Store_customers.jpg).
-- User can find/filter customer via their name or doing free text search in the customer list screen (VIP and All customer screens).
-- In each customer list (VIP and All customer screens), user will be able to drilled down customer profiles details information.
-- Clicking "+" button will bring user to add a customer screen where user can register new customer (1.3_Add_new_customers.jpg).
-- Clickin "Purchase Recommendation" button will open purchase recommendations for the customer based on their interest (1.1.1_VIP_customers_list_purchase_recommendation.jpg)
02. Use Case : Store Surge
- Screen References 2.0_Store_surge_alarm.jpg to 2.2_Store_Surge_Admin.jpg
- A retail clothing store would like to be notified in advance of needing additional checkout clerks.
- When there is a sudden increase in shoppers present in the store, the store manager should be notified of a surge so that he can open more registers by the time those shoppers are ready to pay for their purchases.
- In the app, we should show the ability to set threshold definitions for a surge (ie, X number of people enter the store within Y minutes), and probably the number of people currently in the store.
- User Scenario Needed:
-- By default show store activity (2.1_Store_surge.jpg), Dashboard w/ current metrics for store activity (number of people in the store), time of day, historical data for store traffic for past week, month, and year
-- If there is a sudden traffic increase in the store, alerts and notify the store manager about the situation so they will aware and able to open more register/counter (2.0_Store_surge_alarm.jpg) - Notification screen when there has been a customer surge with option to alert ALL employees
-- Needs an admin screen to set the alerts and notifications settings (Key screen, set parameter for the Store surge condition. For example setting the number of customers in the store that would trigger the notification)
03. Use Case : Geofencing
- Screen References 3.0_Geofencing_alert.jpg to 3.2_Geofencing_add_new_device.jpg
- A retail clothing store provides tablets to sales staff to help them sell additional styles and accessories that may not be available on the shelf.
- They do not want these tablets to "walk out" of the store.
- Within the app, we should show a list of geofenced devices. If a device leaves the store range, the store manager should receive a notification, and the device should show as missing/lost/out-of-range in the app.
- User Scenario Needed:
-- By default, show dashboard w/ a list of devices with associated names.
-- User can view the dashboard in two different views, list (3.1.0_Geofencing_device_list.jpg) and maps (3.1.1_Geofencing_device_map.jpg)
-- In the same screen, User can drilled down on each devices list and see the device details with device name, owner name, type, and setting for RSSI range (0-32) to set the physical boundary for the device.
-- Ability to add a device with fields for device type, device name, device owner (3.2_Geofencing_add_new_device.jpg)
-- Notification of when a device leaves the designated area, or disconnects from the system (3.0_Geofencing_alert.jpg)
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any 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.
- You are allowed to use AngularJS, JQuery and Bootstrap for this challenge.
Browsers Requirements:
- IE11 above
- Latest Firefox, Safari & Chrome Browsers
- Tablet Browser (Landscape version).
Documentation Provided:
Storyboard and All necessary flow documents can be found in forum!
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.