Challenge Summary
Welcome to Order Management Tool Dashboard Tablet and Mobile UX Concepts Design Challenge
In this challenge we want to see your ideas how you recreate existing desktop web application on Tablet and Mobile screen sizes. Our first focus is to give best user experience on Tablet and Mobile layout before revamp all existing desktop application.
Please read the specification details below and let us know if you have questions
0).Navigation
1). Order Management Tool Dashboard
2). Manage My Favourites Profiles
3). Select / Search Profile
4). Select / Search Profile Organization
Note: Feel free to submit more screens for early feedback
0).Navigation
1). Order Management Tool Dashboard
2). Manage My Favourites Profiles
3). Select / Search Profile
4). Select / Search Profile Organization
5). Dashboard Dropdown List
6). Add List
7). Drill Down List
About Order Management Tool
Order Management Tool Management Tool is an intuitive and effective backlog management tool by moving away from the traditional batch reports to online and realtime dashboards/alerts processes.
(BEFORE)
- Traditional spreadsheet report
- Outdated batch reports
- Manual report preparations
- Users manage backlog using spreadsheets
- Need effort to aggregate dashboard views
- Need effort to integrate non-ERP data
(NEW) Order Management Tool
- Real Time data
- Backlog data always available online
- User manage backlog online, no more spreadsheets!
- Provide both dashboard rollup and order drill down views
- Comprehensive data sourcing that includes non-ERP data e.g. shipment information, customer/product reference data
- Flexible profile, dashboard, alert and display customizations
- Additional features e.g. block code management, communication notes, workflow integration etc
Downloadable Files
https://drive.google.com/drive/folders/1b0A3ocm-MxNHV-DGkRUCZVLXM-H3bL-K?usp=sharing
Let us know if you need access the file.
General Requirements
- For this challenge we need you to create brand new look how the Tablet and Mobile layout
- Think about the best user experience how to represent this application on Tablet and Mobile layout
- Follow existing data text from existing screenshots
- We also provided you with client expected icons. As possible please use client icons.
- The design must cover mobile and tablets. The design must take into consideration that it will be developed as a Progressive Web App.
- Principally the design must align with Client’s mobile first design strategy Mobile_First_Guidelines.pdf (attached in the drive), but not mandatory.
- Design /Branding guidelines should be followed strictly as client will rate submission based on that.
Foundational Design Elements
Responsive breakpoints
http://s3-us-west-1.amazonaws.com/hp-ux-prototypes/ux-guidelines/breakpoints.html
Typography
http://s3-us-west-1.amazonaws.com/hp-ux-prototypes/ux-guidelines/typography.html
Grid system
http://s3-us-west-1.amazonaws.com/hp-ux-prototypes/ux-guidelines/grid-system.html
Iconography
All Icons used in the design must be chosen from the attached client icon set.
Color Palette
Any indicative colors must be used from the attached client's color palette.
Submissions Guidelines
Adherence to Design Instructions
All submissions will be pre-screened for adherence to design instructions
Coverage of Functionality
Submissions must cover all functionalities described in the challenge overview and related materials. For the purpose of initial reviews, partial submissions can be made – but must contain at least one aspect of backlog management.
Explanation of Design Thinking
Submissions made preferably have a write up of the designers thought process, for the reviewers to better understand motivations, as well as provide feedback.
Presentation
All submissions made must be emulation friendly on Marvel App over multiple orientations.
Submissions Requirements
Mobile/Tablet Navigation
The navigation must contain these basic elements, with the home page defaulting to backlog management.
- Backlog Management
- Search Orders
- Reporting
- Current User
- Help & FAQ
1). Order Management Tool Dashboard
Screenshot: backlog1.png
- Order Management Tool is an intuitive and effective backlog management that displays client’s online and realtime dashboards/alerts processes.
- The backlog management tool is divided into 3 main sections:
-- On the top left will be for My Orders Profiles
-- Below the filter that will be placed Alert Dashboard with optional ad-hoc filter
-- On the right side is Order list
- On this screen, user Click the My Orders dropdown ts to configure the profile to define the scope of orders based on role‘s responsibility. With the my orders drop down user gets to setup his profile to filter for certain orders
2). Manage My Favourites Profiles
Screenshot: backlog2.png
- Clicking manage my favorites menu item in the drop down user gets to select his favorite profile from a wide search list and save it for future reference
3). Select / Search Profile
Screenshot: backlog3.png
- Clicking the select/search menu item from my orders drop down opens up a pop window which allows one to search among all the existing profiles and choose one
4). Select / Search Profile Organization
Screenshot: backlog4.png
- Click Browse allows users to add additional profile from “ Named Accounts and Partners” or “Organization” folders. You also get to search for a particular folder/profile from the listed item.
5). Dashboard Dropdown List
Screenshot: backlog5.png
- Dashboard drop down list provides the selections of alert dashboard which were created by Super Users. The different selection will impact the display of Alert/Bucket in the Alert Table section
6). Add List
Screenshot: backlog6.png
- Adhoc filter allows user to customize the filters in the dashboard to constrain the data and show only the records that are relevant to the business needs. Adhoc filter can be specified for each dashboard individually and this step is optional
- Adhoc filter is applied with the search field. When user types text in ad hoc filter field, the relevant values will appear in the drop down menu
7). Drill Down List
Screenshot: Backlog7.png
- Clicking the refresh button for a chosen profile and Alert Dashboard, Alert table displays the results per each alert row. The numbers reflected in the Alert Table is determined by considering 3 elements: Selected profile definition, Alert definition and Adhoc filters.
- Whenever user clicks a specific figure in the Alert Table, system will automatically refresh the drilldown list to the right.
Design Submission Formats:
a). Screen Sizes:
- Tablet Screen Size: 1536px(w) × 2048px(h) up to your design
- Mobile Screen Size: 750px(w) × 1334px(h) up to your design
b). Design theme, colors, typography.
- Design Branding: Follow Client Branding
- Fonts: Use client font
- Color palette: Follow Client Color Palette
- Icon: As possible reuse the existing client icons
c). Submission Design Presentation
- As part of your submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- You MUST create Hotspot click flow on your MarvelApp
- If you need an MarvelApp Project, send email OR via challenge forum to this following email address: lunarkid@copilots.topcoder.com
- Important! Make sure to include a URL/Link to your MarvelApp within your submission notes
Target User
- Order Management Tool Internal Employees
Judging Criteria
- How well you recreate better User experience for Order Management Tool Dashboard on Tablet and Mobile version
- Cleanliness of your graphics and design.
- 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 image files based on Challenge submission requirements stated above.
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Photoshop, Illustrator or Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
In this challenge we want to see your ideas how you recreate existing desktop web application on Tablet and Mobile screen sizes. Our first focus is to give best user experience on Tablet and Mobile layout before revamp all existing desktop application.
Please read the specification details below and let us know if you have questions
Round 1
Initial Order Management Tool Dashboard Application for these following features on Tablet/Mobile screen size0).Navigation
1). Order Management Tool Dashboard
2). Manage My Favourites Profiles
3). Select / Search Profile
4). Select / Search Profile Organization
Note: Feel free to submit more screens for early feedback
Round 2
Final Order Management Tool Dashboard Application for these following features on Tablet/Mobile screen size combined with Checkpoint Feedback0).Navigation
1). Order Management Tool Dashboard
2). Manage My Favourites Profiles
3). Select / Search Profile
4). Select / Search Profile Organization
5). Dashboard Dropdown List
6). Add List
7). Drill Down List
About Order Management Tool
Order Management Tool Management Tool is an intuitive and effective backlog management tool by moving away from the traditional batch reports to online and realtime dashboards/alerts processes.
(BEFORE)
- Traditional spreadsheet report
- Outdated batch reports
- Manual report preparations
- Users manage backlog using spreadsheets
- Need effort to aggregate dashboard views
- Need effort to integrate non-ERP data
(NEW) Order Management Tool
- Real Time data
- Backlog data always available online
- User manage backlog online, no more spreadsheets!
- Provide both dashboard rollup and order drill down views
- Comprehensive data sourcing that includes non-ERP data e.g. shipment information, customer/product reference data
- Flexible profile, dashboard, alert and display customizations
- Additional features e.g. block code management, communication notes, workflow integration etc
Downloadable Files
https://drive.google.com/drive/folders/1b0A3ocm-MxNHV-DGkRUCZVLXM-H3bL-K?usp=sharing
Let us know if you need access the file.
General Requirements
- For this challenge we need you to create brand new look how the Tablet and Mobile layout
- Think about the best user experience how to represent this application on Tablet and Mobile layout
- Follow existing data text from existing screenshots
- We also provided you with client expected icons. As possible please use client icons.
- The design must cover mobile and tablets. The design must take into consideration that it will be developed as a Progressive Web App.
- Principally the design must align with Client’s mobile first design strategy Mobile_First_Guidelines.pdf (attached in the drive), but not mandatory.
- Design /Branding guidelines should be followed strictly as client will rate submission based on that.
Foundational Design Elements
Responsive breakpoints
http://s3-us-west-1.amazonaws.com/hp-ux-prototypes/ux-guidelines/breakpoints.html
Typography
http://s3-us-west-1.amazonaws.com/hp-ux-prototypes/ux-guidelines/typography.html
Grid system
http://s3-us-west-1.amazonaws.com/hp-ux-prototypes/ux-guidelines/grid-system.html
Iconography
All Icons used in the design must be chosen from the attached client icon set.
Color Palette
Any indicative colors must be used from the attached client's color palette.
Submissions Guidelines
Adherence to Design Instructions
All submissions will be pre-screened for adherence to design instructions
Coverage of Functionality
Submissions must cover all functionalities described in the challenge overview and related materials. For the purpose of initial reviews, partial submissions can be made – but must contain at least one aspect of backlog management.
Explanation of Design Thinking
Submissions made preferably have a write up of the designers thought process, for the reviewers to better understand motivations, as well as provide feedback.
Presentation
All submissions made must be emulation friendly on Marvel App over multiple orientations.
Submissions Requirements
Mobile/Tablet Navigation
The navigation must contain these basic elements, with the home page defaulting to backlog management.
- Backlog Management
- Search Orders
- Reporting
- Current User
- Help & FAQ
1). Order Management Tool Dashboard
Screenshot: backlog1.png
- Order Management Tool is an intuitive and effective backlog management that displays client’s online and realtime dashboards/alerts processes.
- The backlog management tool is divided into 3 main sections:
-- On the top left will be for My Orders Profiles
-- Below the filter that will be placed Alert Dashboard with optional ad-hoc filter
-- On the right side is Order list
- On this screen, user Click the My Orders dropdown ts to configure the profile to define the scope of orders based on role‘s responsibility. With the my orders drop down user gets to setup his profile to filter for certain orders
2). Manage My Favourites Profiles
Screenshot: backlog2.png
- Clicking manage my favorites menu item in the drop down user gets to select his favorite profile from a wide search list and save it for future reference
3). Select / Search Profile
Screenshot: backlog3.png
- Clicking the select/search menu item from my orders drop down opens up a pop window which allows one to search among all the existing profiles and choose one
4). Select / Search Profile Organization
Screenshot: backlog4.png
- Click Browse allows users to add additional profile from “ Named Accounts and Partners” or “Organization” folders. You also get to search for a particular folder/profile from the listed item.
5). Dashboard Dropdown List
Screenshot: backlog5.png
- Dashboard drop down list provides the selections of alert dashboard which were created by Super Users. The different selection will impact the display of Alert/Bucket in the Alert Table section
6). Add List
Screenshot: backlog6.png
- Adhoc filter allows user to customize the filters in the dashboard to constrain the data and show only the records that are relevant to the business needs. Adhoc filter can be specified for each dashboard individually and this step is optional
- Adhoc filter is applied with the search field. When user types text in ad hoc filter field, the relevant values will appear in the drop down menu
7). Drill Down List
Screenshot: Backlog7.png
- Clicking the refresh button for a chosen profile and Alert Dashboard, Alert table displays the results per each alert row. The numbers reflected in the Alert Table is determined by considering 3 elements: Selected profile definition, Alert definition and Adhoc filters.
- Whenever user clicks a specific figure in the Alert Table, system will automatically refresh the drilldown list to the right.
Design Submission Formats:
a). Screen Sizes:
- Tablet Screen Size: 1536px(w) × 2048px(h) up to your design
- Mobile Screen Size: 750px(w) × 1334px(h) up to your design
b). Design theme, colors, typography.
- Design Branding: Follow Client Branding
- Fonts: Use client font
- Color palette: Follow Client Color Palette
- Icon: As possible reuse the existing client icons
c). Submission Design Presentation
- As part of your submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- You MUST create Hotspot click flow on your MarvelApp
- If you need an MarvelApp Project, send email OR via challenge forum to this following email address: lunarkid@copilots.topcoder.com
- Important! Make sure to include a URL/Link to your MarvelApp within your submission notes
Target User
- Order Management Tool Internal Employees
Judging Criteria
- How well you recreate better User experience for Order Management Tool Dashboard on Tablet and Mobile version
- Cleanliness of your graphics and design.
- 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 image files based on Challenge submission requirements stated above.
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Photoshop, Illustrator or Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.