Living Progress - The Class Master - Responsive Application Design Challenge

Welcome to Living Progress - The Class Master - Responsive Application Design Challenge!

This application aims at providing real-time attendance data/information for accurate decision making.

We have provided wireframes for content references, please do not copy them!
Also please don’t just color the wireframes, we are looking for you to improve the overall layout, interaction and user experience of the this application.

This challenge is part of the HPE Living Progress Challenge Blitz Program (Secure top placements in the leaderboard to grab additional cash prizes).

Good luck and we look forward to your design!

Round 1

Submit your initial designs for Checkpoint Feedback

01 Login 
02 Navigation
03 Dashboards
04 Reports

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Your Final designs for all the required designs with all Checkpoint Feedback implemented.

01 Login 
02 Navigation
03 Dashboards
04 Reports
05 Setup/Registering Schools
06 Registering Teachers

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

The Purpose of this challenge is to come up with the the look & feel and flow for this web application. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).

Design Ideas:
- Looking for modern, intuitive user interface
- Focus on the design being a great user experience, think simple but effective solutions!
- Come up with designs that shows out-of-the-box solutions.
- Explore icons used in the education sector!
- 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
- Please make sure your capture every details in the wireframe.

Branding Guidelines:
- We have supplied the client's logo and also the color codes, feel free to explore more colors and be creative!

Design Size:
- Please have your designs of size 1280px width and height as required.

Reference:
Explore this moodboard for inspirational dashboards (DO NOT COPY): 
https://projects.invisionapp.com/boards/KQ1ZCGNDNXZA7/

Required Screens:
For this challenge, we would like you to do some design exploration to get the best UX possible!
- Dashoboard is one of the important and much used page for all types of users.
- NOTE: "System Administrator" is not in scope for this challenge.

01 Login:
- Come up with a screen for login, allow the user to enter username/password
- Show us how the error screen would look like!

02 Navigation:
- Come up with an overall navigation for this application..
- Login as “Administrator” user and use the menu items show under them!

03 Dashboards:
Reference: Ministry Official - Dashboards
- All types of users will have access to dashboards
- What should be the priority in this page?
- We need to show different views in the dashboard "Summary, Reasonwise Breakup, Classwise Breakup, Trendline Analysis, Comparative Analysis", show us how these view need to be laid and how the details within each of the views need to look like?
- In comparative Analysis: Please make sure to show us how the user will select schools that need to be compared? (Note: User will be able to select and compare multiple schools)
- Provide a way to adjust the date range for which they are viewing, would be good to allow the user to choose some pre-defined date range like 1 Year, 1 Month, 1 Week, 1 Day and custom date range that allows them to choose a specific date range!
- Need to show the exact date range for which the report is being viewed
- Provide ability to switch between graphical representation and a tabulation views
- It will be great to allow the user to view different graphs for a graphical representations
- How the tabulation view need to be shown?
- Provide ability to download/print/export of reports.
- User will have the ability to filter (see below in reports for more information on filters) and save it as a new report!

04 Reports:
Reference: Ministry Official > Reports
- This needs to show the list of reports that has already been created, looking forward to your thoughts on what need to be shown - think modern!
- The user can refine the reports by using the filters on the left for selecting regions/schools, gender, reasons or classes.
- Provide ability to download/print/export of reports.
- Should have the ability to edit, delete reports.

Create Report:
- User will choose different items in filter and then generate / saves a report..show us how we should plan to achieve this functionality..currently in the wireframe, the report pages is repeated as “Create Report” page, do you this is correct? Looking forward to your thought!

Filter:
- Allow users to filter and create reports..
- Users will have the ability to create a report!
- Where and how these filters need to be shown, please make sure it doesn’t look crowded.
- They should be able to choose the schools based on this hierarchy Counties > Sub-Counties > Wards > Schools. They should be able to select multiple items from each of these.
- As there could be many counties / sub-counties, wards / schools, please show a search and auto-recommendation drop-down as shown in the wireframe and then allow them to choose the specific item!
- Choose Gender
- Choose Reasons 
- Choose Classes

Report Details:
- On clicking on an item in "Reports" page will take them to this Report Details view
- This is almost similar to Dashboard view..
- If you have have thoughts that it needs to be different from that of the dashboard, then please feel free to show us how this need to look like?

05 Setup/Register Schools:
Reference: Administrator - Dashboard > Manage Schools
- We need to show the list of already registered schools!
- We need the ability to filter the schools, please click on 'Filter" to see the options that can be chosen...looking forward to your thoughts on how these can be shown!
- There could be many schools, so think how a pagination can be designed!
- User will be able to perform bulk operations by selecting and clicking on these action buttons (Activate Selected Schools, De-activate Selected Schools, Delete Selected Schools), how do you think these action buttons can be shown different from that of the "Register New School".
- Note: These actions can also be performed on individual schools in the table, think on how a user should perform these...
- Note: On clicking an action button will show a confirmation, think on how this need to be shown!
- Provide options to register new school, click on "Register New School" to see how the screen looks like edit a school.

Register New School:
- Capture all information as shown in the wireframe
- For Base Admin Unit: User should be able to view the hierarchy Counties > Sub-Counties > Wards
- If there are any drop-downs, date-picker, etc...please make sure to show us how it would look like!
- Show us how the sucessfully created message need to be shown?
- Show us how the error page will look like.

06 Registering Teachers:
Reference: Administrator - Dashboard > Manage Teachers
- We need to show the list of already registered teachers!
- We need the ability to filter the teachers, please click on 'Filter" to see the options that can be chosen...looking forward to your thoughts on how these can be shown!
- There could be many teachers, so think how a pagination can be designed!
- User will be able to perform bulk operations by selecting and clicking on these action buttons (Activate Selected Teachers, De-activate Selected Teachers), how do you think these action
buttons can be shown different from that of the "Register New Teacher". 
- Note: These actions can also be performed on individual schools in the table, think on how a user should perform these...
- Provide options to register new school, click on "Register New Teacher" to see how the screen looks like!

Register New Teacher:
- Capture all information as shown in the wireframe
- For Admin Unit: User should be able to view the hierarchy Counties > Sub-Counties > Wards
- If there are any drop-downs, date-picker, etc...please make sure to show us how it would look like!
- Show us how the sucessfully created message need to be shown?
- Show us how the error page will look like.

07 Style Tile:
- We would like you to create a style tile that will help developers.
- This Style Tile need to have the below at a minimum but feel free to add anything that would help developers
- Explore these references to learn more about style tiles: Reference 1, Reference 2

Links / Buttons Colors:
- Button colors (normal / hover states)
- Link colors (normal / hover states)

Typography:
We would like you to identify and define the list of fonts and the specific color, font size used:
- Headers
- Sub-headers.
- Paragraphs.
- etc.

Target Audience:
- Teachers, Head Teachers, Ministry Officials

Judging Criteria:
- Is the design styled to be appealing and desirable?
- Is the design visually resolved and does it evoke an emotional connection with the user?
- Does the design convey the function and use unambiguously and intuitively
- Does it clearly convey what the app is supposed to let you achieve / what problem it is designed to solve.
- Is the design easy to use and understand?

Stock Artwork:
- For this challenge, you can use icons from the other sources as mentioned in the stock artwork policy below!
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN

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 may 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.