Challenge Summary
Welcome to "Aerohive - Responsive Demo App Design Concepts Challenge". In this challenge, we are looking for your help to design a responsive web app that can demo API calls of our products for a retail clothing store. We want you to focus on the UI/UX interactions and bring a clean and simple (creative) solution to how this application should work. What should the user see and experience when using the application!
Landing Screen
Use Case : VIP Notification
- Dashboard
- Add a customer screen
- Customer Profile screen
Use Case : Store Surge
- Dashboard
- Admin screen
- Notifications Screen
Use Case : Geofencing
- Dashboard
- Add a device screen
- Device Detail Screen (w/ ability to edit)
- Notification screen
Landing Screen
Use Case : VIP Notification
- Dashboard
- Add a customer screen
- Customer Profile screen
Use Case : Store Surge
- Dashboard
- Admin screen
- Notifications Screen
Use Case : Geofencing
- Dashboard
- Add a device screen
- Device Detail Screen (w/ ability to edit)
- Notification screen
Background information
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 the topcoder design Community to help us design a responsive design for our application that able to demonstrate API calls from our products. We'll need tablet and desktop version.
Screen Requirements
- There are 3 use case scenario that needs to be simulated and should have their own screen creations, they are :
01. Use Case : VIP Notification
- 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
- Screens Needed:
-- Dashboard w/ a list of VIP customers, customers in the store, and a “add a customer” button, and identify a customer as a VIP
-- Add a customer screen with some basic customer information fields (Name, Email, Phone Number, Country, VIP toggle)
-- Notification of a VIP customer coming to the store
-- Customer profile details (name, email, phone, country) which could include purchase history, and a custom field for notes for when a customer has purchased something online and is coming into the store for an in-store pick up. Also nice to have would be show product recommendations.
02. Use Case : Store Surge
- 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.
- Screens Needed:
-- 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)
-- 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
-- Notification screen when there has been a customer surge with option to alert ALL employees
03. Use Case : Geofencing
- 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.
- Screens Creation Needed:
-- Dashboard w/ a list of devices with associated names
-- Device details with device name, owner name, type, and setting for RSSI range (0-32) to set the physical boundary for the device. **Could be interesting to have a visualization for the diameter of the RSSI range. Perhaps a pinch and zoom UI element to set the boundary.
-- Ability to add a device with fields for device type, device name, device owner
-- Notification of when a device leaves the designated area, or disconnects from the system
Each of these demo's will be accessible from a main landing screen which consists of three buttons:
- VIP Notification
- Store Surge
- Geofencing
Notifications Screens:
- Notification screens can be a simple SMS notification on the users device or laptop. Please use the following text for each of the use case scenario notifications:
VIP Alert:
Hello, <managername>,
Your customer:
<customername>
<cusotmerdetails>
Has arrived at <timedate> in <locationname> [OPTIONAL] to pick up their <productname>
Surge Alert:
A significant increase in traffic has occurred in <locationname>, you will want to prepare to open a new register and encourage your salespeople to engage with the new surge of customers
Geofencing:
ALERT!
<companyname> mobile device <devicename> has left the premises.
Please alert security and staff!
IMPORTANT
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
Design Considerations:
- The interface needs to be simple, clean, easy and intuitive to navigate.
- Consider adding in a main navigation that allows the user to jump back and forth between product demos or be able to get back to the landing page to switch demo’s
- Focus on the design being a great user experience, think simple but effective solutions!
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
Create it as responsive design :
This app will be responsive and design elements should be easily translate to working on different device sizes.
- Desktop: 1280px width with height adjusting accordingly
- Tablet: 1536 px X 2048 px
Branding Guidelines :
- Please follow Provided Branding guidelines: https://projects.invisionapp.com/boards/3H1RFJ5TCJZ6R/
- The demo application is branded with the retail store logo and brought to you by Aerohive.
- The retail store branding should be the primary brand
- Somewhere in your design you should show “brought to you by Aerohive” and include their logo. Most likely the landing page is the best spot for this.
Documentation :
- documentation.zip (contains screenshot of aerohive dashboard for references)
Target Audience
- Retail Clothing Store Owner
Judging Criteria
- The overall functionality of your concepts - how well do your ideas work for the apps. We are looking for an app that is easy-to-use
- Your ideas and concepts!
- How well does your design align with the objectives of the challenge
- Cleanliness of your graphics and design.
- Overall Design and User Experience.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you will be asked to update the style tile to reflect any new elements that you have added to the design. You may also be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Round 1
Initial design for client reviewLanding Screen
Use Case : VIP Notification
- Dashboard
- Add a customer screen
- Customer Profile screen
Use Case : Store Surge
- Dashboard
- Admin screen
- Notifications Screen
Use Case : Geofencing
- Dashboard
- Add a device screen
- Device Detail Screen (w/ ability to edit)
- Notification screen
Round 2
All requirements like stated in challenge details with client feedback applied.Landing Screen
Use Case : VIP Notification
- Dashboard
- Add a customer screen
- Customer Profile screen
Use Case : Store Surge
- Dashboard
- Admin screen
- Notifications Screen
Use Case : Geofencing
- Dashboard
- Add a device screen
- Device Detail Screen (w/ ability to edit)
- Notification screen
Background information
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 the topcoder design Community to help us design a responsive design for our application that able to demonstrate API calls from our products. We'll need tablet and desktop version.
Screen Requirements
- There are 3 use case scenario that needs to be simulated and should have their own screen creations, they are :
01. Use Case : VIP Notification
- 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
- Screens Needed:
-- Dashboard w/ a list of VIP customers, customers in the store, and a “add a customer” button, and identify a customer as a VIP
-- Add a customer screen with some basic customer information fields (Name, Email, Phone Number, Country, VIP toggle)
-- Notification of a VIP customer coming to the store
-- Customer profile details (name, email, phone, country) which could include purchase history, and a custom field for notes for when a customer has purchased something online and is coming into the store for an in-store pick up. Also nice to have would be show product recommendations.
02. Use Case : Store Surge
- 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.
- Screens Needed:
-- 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)
-- 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
-- Notification screen when there has been a customer surge with option to alert ALL employees
03. Use Case : Geofencing
- 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.
- Screens Creation Needed:
-- Dashboard w/ a list of devices with associated names
-- Device details with device name, owner name, type, and setting for RSSI range (0-32) to set the physical boundary for the device. **Could be interesting to have a visualization for the diameter of the RSSI range. Perhaps a pinch and zoom UI element to set the boundary.
-- Ability to add a device with fields for device type, device name, device owner
-- Notification of when a device leaves the designated area, or disconnects from the system
Each of these demo's will be accessible from a main landing screen which consists of three buttons:
- VIP Notification
- Store Surge
- Geofencing
Notifications Screens:
- Notification screens can be a simple SMS notification on the users device or laptop. Please use the following text for each of the use case scenario notifications:
VIP Alert:
Hello, <managername>,
Your customer:
<customername>
<cusotmerdetails>
Has arrived at <timedate> in <locationname> [OPTIONAL] to pick up their <productname>
Surge Alert:
A significant increase in traffic has occurred in <locationname>, you will want to prepare to open a new register and encourage your salespeople to engage with the new surge of customers
Geofencing:
ALERT!
<companyname> mobile device <devicename> has left the premises.
Please alert security and staff!
IMPORTANT
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
Design Considerations:
- The interface needs to be simple, clean, easy and intuitive to navigate.
- Consider adding in a main navigation that allows the user to jump back and forth between product demos or be able to get back to the landing page to switch demo’s
- Focus on the design being a great user experience, think simple but effective solutions!
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
Create it as responsive design :
This app will be responsive and design elements should be easily translate to working on different device sizes.
- Desktop: 1280px width with height adjusting accordingly
- Tablet: 1536 px X 2048 px
Branding Guidelines :
- Please follow Provided Branding guidelines: https://projects.invisionapp.com/boards/3H1RFJ5TCJZ6R/
- The demo application is branded with the retail store logo and brought to you by Aerohive.
- The retail store branding should be the primary brand
- Somewhere in your design you should show “brought to you by Aerohive” and include their logo. Most likely the landing page is the best spot for this.
Documentation :
- documentation.zip (contains screenshot of aerohive dashboard for references)
Target Audience
- Retail Clothing Store Owner
Judging Criteria
- The overall functionality of your concepts - how well do your ideas work for the apps. We are looking for an app that is easy-to-use
- Your ideas and concepts!
- How well does your design align with the objectives of the challenge
- Cleanliness of your graphics and design.
- Overall Design and User Experience.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you will be asked to update the style tile to reflect any new elements that you have added to the design. You may also be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.