Angelos Mobile Device Management Application Redesign Challenge

Welcome to the Angelos Mobile Device Management Application Redesign Challenge.  In this challenge we are looking for you to redesign our "Mobile Device Management Application". We currently have an existing application but we are looking to modernize and improve the user experience. Think of the provided downloads as wireframes... research modern application design and provide us with your graphic ideas and solutions for how we can make our application amazing! In this contest we are really looking for multiple solutions to how the interface should be designed.

In this challenge try and convery your design direction with your Checkpoint submission so we can help give you great direction for the second round. Looking forward to your solutions.

Round 1

Submit your updated screens for Checkpoint feedback:
0.  Navigation
1.  Accounts Control
2.  User Control
3.  Dashboard View
4.  Reports Results View
- Please provide us with a click diagram of your design
- Notes.jpg: 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 screens with all checkpoint feedback implemented.
0. Navigation
1.  Accounts Control
2.  User Control
3.  Dashboard View
4.  Reports Results View
5.  Report Details View
6.  RMA
7.  Help
8.  Login/Forgot Password
- Please provide us with a click diagram of your design
- Notes.jpg: Any comments about your design for the Client

Challenge Details:
The purpose of this Challenge is to redesign the Angeloe "Mobile Device Management Application". There is a current application from which we are providing screenshots and diagrams - but we want NEW (modern) interface designs - what the topcoder community is good at!

This looks like a large task - but its not...it’s pretty simple: Focus on designing a good looking, consistent design user interface that we can be used as a basis for all of the screens. Ask us  questions and we will help you as much as possible.

Challenge Resources:
- (screenshots.zip) For this challenge we are providing screenshots from the current application as design guidance for you.
- (wireframes.zip) We’re providing wireframes to help illustrate general layout, some concept details and to cover the different types of content we need in the application
- These are used as reference only focus on the outlined features at this time. 
- Do not copy - we are looking for new designs

Screen Size:
- We are looking for standard resolution for a web application such as 1024px x 768px or 1366px x 768px

Design Considerations:
1) Reference color_palette.png in new_screenshots.zip for the branding colors
2) Very important!  This is an enterprise application for use in a support environment,  not an entertainment or consumer site.  So while we do want you to be creative, it needs to be clear and usable.
3) We are looking for design consistency - very clean, modern and professional "enterprise application" - do your design research and get inspired!
4) Some elements on different screens may not be identical, but should have similar look, feel and functionality, such as “cards” on different pages - they’ll have different specific uses and interactive elements, but should feel like they’re part of the same theme and application.
5) Make sure interactive elements are clear, such as sortable columns, icons to “flip” or modify cards, customizable elements.
6) The final application is using the Bootstrap 3 Framework! This does not mean you need to understand everything about how Bootstrap 3 works, but its great research as a designers to know how these things work and how good design will work with the framework.

Design Requirements:
1) Responsive Design (think mobile first)
2) The source wireframes and design docs give the starting point for layout, interactions and UI elements, but your design should be more than just colored-in wireframes - we want something that visually fits in well as part of a larger web application.
3) To emphasize (we mention this a few times) We want your creativity! :-)  
- The wireframes show you the layout, functions, content areas and interactions, but are boring on their own!  What can you do as a designer to make this a cool looking, usable application?

Screens we are looking for:
0) Navigation
- There are always four navigation elements:
1) Dashboard (Home)
2) Reports
3) RMA
4) Help
- The wireframes show the upper part of the pages as “Logo - Horizontal Navigation - Accounts Control - Notifications -  “User Controls”
- Notifications (NOT # on the wireframes) should have an icon that’s easy to recognize with a number indicator for # of notifications, although we are not designing for the sections this item links to for this Challenge 
- You can be creative with this, focus on the best experience possible for navigation and other controls

1) Accounts Control  see wireframe: 0_1_Account_Multi-select.png
- The default view in the Navigation is an Account label or icon that is easy to understand and has an indicator for number of Accounts selected (if applicable) - Shown as Accounts(#) on the wireframes
- Currently a dropdown that shows all of the Accounts a User is allowed to see and a Search field so they can sort through them
- The selections act as a Global Filter for any cards or Reports the user can see on their Dashboard
- For example, if a user has permissions see “Artic Airways” and “Artic Airways Cargo”, the options will show up in this select menu, but if they only check “Artic Airways”, they will only see reports for that account, but not “Artic Airways Cargo.”
- A: Users have a default setting called “All Accounts”, which shows them all of the Cards/Reports in all of the accounts where they have permissions. In the example, they would be able to see everything in
“Artic Airways” and “Artic Airways Cargo” on their dashboard.
- The selections act based on the Multi-value select boxes
- Multi-Value Select Boxes. This operates and looks similar to how Gmail handles multiple email addresses (see screenshot: multi-value-select.png)
- B:  The Search field has type-ahead system allows you to choose a selection, similar to how Google gives suggestions.  
- C: The chosen elements look like labels or tags with an 'x' allowing you to unselect them.
- You do not need to show every option for these designs, just the main elements

2) User Control see wireframe: 0_2_User_control.png
- Default shows the user name
- Has 4 selections beneath it in the dropdown:  
1) Change Password
2) User Management
3) Download Manager
4) Logout

3) Dashboard View
see wireframe: 1_0_Dashboard.png
- This is supposed to be a grid showing “cards”.  These cards display charts or other data to show reports on a high level 
- These cards can be various sizes as based on the grid
- The basic design of the cards: we are picturing a small header with the title of the card, flip-icon-control in the upper right
- The header area can be used to drag the cards to be re-ordered in the Dashboard view within the grid
- If dragged to reorder, the other cards rearrange to accommodate the new location of the dragged card
- There is no limit on the number of cards that can be displayed, but they will always start at a default size and appear in space number 1 in the cards grid when made new
- There should be a very obvious button for “Add Card”.  We were thinking in the upper right above the card grid, but use your best design judgement.  It should always be visible above the fold
- We also want to have UI elements which indicate the user can drag, reorder or resize the cards on their Dashboard like widgets.  Consider best practices for this as done on other websites, and in certain operating systems like Windows 8 or Mac OSX.
- Charts:  various sorts of charts can be displayed.   If a user clicks on a specific part of a chart, such as a wedge in a pie chart, they will be taken to the report which shows them detailed info filtering for the data point they clicked on -
- Because the charts can represent different types of data, we want some subtle but visible aspect of the cards to indicate when the information was last refreshed - sometimes it’s weekly, daily, at a time of day or “real time”
- see screenshot Dashboard Overview.png for examples
- The cards should be flippable on this page activated by the user clicking on the appropriate flip-icon on the respective card
see wireframe: 1_1_Dashboard-card.png
- There’s not a standard “flip” icon that we could find that couldn’t be easily confused with other actions like “refresh” or “back” - We need an icon designed that is easy to understand and slick icon  to show the user they can flip the card
- This view is given to show details of the individual card - it is still shown in the location as shown on 1_1_Dashboard-card.png
- The chart shown on this example wireframe is just a sample - please use a placeholder chart in your designs
see wireframe: 1_1_Dashboard-card.png label A
-  On the back are controls for that card such as “Duplicate”, “Delete”, “Resize”, “Settings”, plus a flip icon shown in the same relative position as the front of the card..  - The title of the Dashboard cards can be edited when flipped to their back sides
- Duplicate produces a copy of the current card that the user can edit as the basis for a new card
- Delete removes the card from the Dashboard view
- Resize allows the user to resize the card as it displays in the Dashboard view - the resizing should be done in a fashion related to the grid of the card layouts - e.g. if default size of a Dashboard card is 2 unit of measure wide by 1 unit of measure high, cards sizes are based off of these measure, such as 1 x 1, 2 x 2, 2 x 4, etc.  Content within the cards should scale appropriately within the card in a Responsive-like manner
- Resizing Dashboard Cards also makes the other cards rearrange around the newly resized card so things still fit within the grid
see wireframe: 1_1_Dashboard-card.png label B 

4) Reports Overview
see wireframe: 2_0_Reports_Overview.png
- A Report is a list of Assets, their attributes and important data
- The Reports View is a grid of Cards which represent the Reports the user can see based on their Accounts permissions, and the selected Accounts in the Accounts Control selected as above.
- This view should have an “Add Report” button of similar look/feel to the “Add Card” button of the Dashboard
- Report Cards:
see wireframe: 2_1_Reports_Overview_card.png
-- The Report Cards should also have a similar design to the Dashboard Cards, but in a way that makes sense for the content
-- Report Cards should also have the “flip-icon” discussed in the Dashboard section
-- On the back of the Report Cards are controls for that card: “Duplicate” and “Delete”,  plus a flip icon shown in the same relative position as the front of the card..   
-- Label C: If a Report Card is “pinned” or otherwise set to always be available, there will be a link right above the card grid which says “Show Hidden Reports (x)” where x = the number of Reports which are pinned, but do not belong to one of the accounts being filtered for in the Accounts Control mentioned above
-- If a Report Card is “pinned” or “shared”, it should have an icon, label or other visual indicator
-- When the “Show Hidden Reports (x)” link is clicked, the Reports that the Accounts Control is filtering for are shown along with the Reports that were pinned - see wireframe: 2_2_Reports_Overview_Hidden.png
- We need a solution designed for this scenario - if the filtered Accounts Reports are showing and Show Hidden Reports is clicked, how do we distinguish between the filtered Reports and the (previously) Hidden Reports if they’re from different Accounts?  This also applies if we have the Accounts Control set as “All Accounts”
- Hidden Report Cards can be positioned at any point within the grid of cards

5) Report Results View
see wireframe: 3_0_Report_Results_View.png
- Report Results View is a listing of the Assets of a Report in a sortable table - this looks complicated, but at the base, it's just a data table with some controls
- This is a sub-section under Reports in the Navigation
-- Column headers are attributes for the Assets beneath it, like Model Name, Model Number, Serial Number, etc.
-- Column headers are sortable by clicking on them and need to be obvious when sorted
-- We need to explore ways to make the table more useful
- There are three icons in the top right corner of the table
-- Current Icons: Export (download/export type icon), Settings (a gear icon), Bookmark (bookmark icon)
-- Label A: Clicking the Export icon takes the user to the Download Manager flow (not a part of this Challenge) -
-- Label B: Settings brings up an overlay layer that lets adjust the columns - both which columns are being shown and the order in which the columns are presented in the table - see screenshot Report Column
Selection.png for the current application’s design - checked boxes are displayed columns, the order of the boxes are the order of the columns
-- Label C: Bookmark saves the displayed Report as a “pinned” Report for the Reports Overview page
-- Label D: The current application uses basic numerical pagination to show when there are more lines in the report than are being shown on a single page.  
-- We need you to design an effective solution to handle pagination - both to show many pages, but also a way for the user to get to an individual page within the series of total pages
- Column controls and sorting - this is to show details for what the user can do with the columns of the table displayed on this page - see wireframe: 3_1_Report_Results_Column.png
-- Clicking the column header produces a drop-down with the displayed select options - label A
-- This Sorts, Filters or Hides the columns based on user selection
-- If the user chooses Add Filter, it produces an application modal shown in - label B
-- When a Filter is applied from the Add Filter action, it is shown in the Filter row above the table as shown with the part labeled “C” on the wireframe
-- When a column is sorted from the column header, the sorting choice is indicated in the upper right of the table as shown by the label “D”

6) Report Result Details View
-- This is given as an example of what happens when a user clicks on a line within a Report Results table (item 5 above)
-- Design this in a way that fits in with your overall design, and make sure it fits within the general navigation and layout you’ve given for the other pages, since the layout only shows the content area

7) RMA
see wireframe: 4_0_RMA_Entry.png
- This section is a user creating a Request for the return, repair or disposition of a mobile device in a customer’s inventory.
- The current process is illustrated here as a Wizard-like Step-by-Step:
see wireframe: 4_1_RMA_Entry_Flow.png
- When designing for this, if another  metaphor for the design besides Wizard will make for a better User Experience, that’s great!
- We do want design examples of Wizard steps,even if you do not use a Wizard as this solution,since a Wizard may be used for other elements of the Application
- The Steps of the process should have a similar design feel as the Dashboard and Report Cards, even if they do not look exactly like them
-- User chooses to Create RMA (Returned Materials Authorization)
-- They can Look Up Asset, which is done by a search field with a select menu.  (Step A)
-- The select menu has different fields within the appropriate Report the user wishes to search by, such as Serial #, Make, Model, etc.
-- A Go/Search button is pushed which makes a panel beneath the Search appear with Assets that meet the Search criteria.  (Step B)
-- The user then verifies the Asset which matches their need to create an RMA by clicking a verify button, or Searches again at the top.
---The Asset will have visible attributes displayed: Account #, Description, Hem #, Serial #, Asset Tag, Status, Location and others
-- When the verify button is clicked, another panel appears beneath titled Return Action
---There are two options: Repair Needed and No Repair Needed (Step C)
--Repair Needed being clicked opens another panel with the title Problem Summary
--- Beneath that there are the following info (Step D):
--- Type (dropdown menu with types of problems listed), Referrer (text input for the person reporting the problem), Processing, Shipping Address (with Lookup Address option), Contact Email and  Verify button
--- The Verify button goes to Email Notifications step 

8) Login/Forgot Password
- Login/Forgot password (see screenshots: login.png and forgot.png)
- No wireframes provided for these, but give us examples so we can incorporate them into the application where needed

Bootstrap 3 theme inspiration:
- We are including screenshots (bootstrap.zip) of sample themes from Bootstrap theme libraries to help you get ideas on how to approach your design for this application.
- Do NOT copy these themes - they're included to show you some approaches and provide inspiration only - we want ORIGINAL designs that make for a great application.

IMPORTANT:
- We are providing you with the current design serve as the background into which these features fit - if as part of your designing for these features you enhance the design of the framing elements of these pages, that’s fine, but the purpose is to focus on the features in this challenge.

Target Users:
- Technical support with Angelos helping a customer deal with their mobile device inventory.
- Technical support within the Angelos customer’s company dealing with their own mobile device inventory.
- Technical management overseeing the processes and progress for the mobile device management.

Judging Criteria:
- How well you translate the wireframes and source designs into an attractive and usable design.
- Cleanliness of your graphics and design.
- 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 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.