Challenge Summary
Welcome to the Hermes - Cash Data Web App Design Concepts Challenge! The client for this project analyzes employee compensation to help provide their customer with benchmarks and advice on competitive salary and benefits packages to prospective employees. One of their main tasks is to collect compensation data around “cash” (salary, bonuses, and other cash related compensations such as stock/shares, long-term performance payments, car allowances, and other cash-based allowances) from their client companies for analysis and benchmarking. They are looking to simplify the current data collection process to make it easier for their customers to submit data.
In this challenge, we are asking you to come up with design concepts for the new Hermes Cash Data web application.
We look forward to seeing your creative designs!
Round 1
Round 1 will focus on the following screens / use cases:
1) Home Page
2) Dashboard Page
3) Mapping Page
4) Cash Uploading Page
NOTE: See the idea generation document (attached) to understand the screens / functionality needed for the application. If anything is unclear, please ask for clarification on the forum and we will be happy to help!
Round 2
In Round 2, you will need to include all Round 1 screens (updated based on checkpoint feedback).
1) Home Page
2) Dashboard Page
3) Mapping Page
4) Cash Uploading Page
5) Cash Upload Details Page
6) Administrator Dashboard Page
NOTE: See the idea generation document (attached) to understand the screens / functionality needed for the application. If anything is unclear, please ask for clarification on the forum and we will be happy to help!
Challenge Description:
The client for this project has decided to create a new web application to help collect “cash” data (salary, bonuses, and other cash related compensations such as stock/shares, long-term performance payments, car allowances, and other cash-based allowances) from their client companies for analysis and benchmarking.
In this challenge, we are asking you to come up with design concepts for the new Hermes Cash Data web application.
Challenge Deliverables:
In this challenge you will need to design the screens for the following pages:
1) Home Page
2) Dashboard Page
3) Mapping Page
4) Cash Uploading Page
5) Cash Upload Details Page
6) Administrator Dashboard Page
Background Details:
The Problem and the Current State:
Hermes collects large amount of “cash” data from their clients for analysis and benchmarking. Cash data includes things like salary, bonuses, and other cash related compensations such as stock/shares, long-term performance payments, car allowances, other cash-based allowances, as well as various job coding information that enables benchmarking capabilities. The current process for collecting cash data involves consuming an Excel file and loading it into a database. Clients are required to submit their data in the specific format as required by Hermes. Currently clients feel this process is cumbersome, time-consuming and detached from other parts of the systems. Our goal is to replace this process with simple, intuitive and elegant process.
The Future Process:
Hermes is building a site that will allow clients to load, map, and track their data submission. Clients will extract the “cash” data from their HR system into a spreadsheet (or tab delimited file) in a format that is convenient for them. The spreadsheet is then uploaded to the site. Once uploaded the site shows users all of their column names so they can appropriately match them to corresponding Hermes column names. The mapping process is the center piece of the site, it should be simple and intuitive to use (see "Mapping Inspiration.jpg" for some design inspiration - it's important to polish this mapping functionality). Once the mapping is complete clients will use it to transform the cash data from their format to the Hermes standard format. Clients can store multiple mappings and save it for future use.
Use Cases:
Use Case 1: The Login Screen / Dashboard
- User navigates to the site and views Login Screen
- User enters credentials
- If valid – user is navigated to the Dashboard
- If invalid – site displays an error
- Dashboard displays the name of the company and the user logged in.
- Dashboard shows the list of mappings and cash uploads created by the user and other users in the company.
- Each line item in the mapping and cash upload list displays attributes like name, date, status, and any actions (delete, copy etc.)
- User can navigate to the dashboard from any part of the site
Use Case 2: User Creates a Mapping
- Mapping is the most essential functionality in the site. It should be slick, user friendly, simple and intuitive. NOTE: See "Mapping Inspiration.jpg" for design inspiration - it shows how lines can be used to map different fields together.
- User selects "Create New Mapping” action on the Dashboard page
- User is navigated to the Mapping page and prompted to upload a spreadsheet.
- Once the spread sheet is loaded - user's spreadsheet columns appear on the left and Hermes columns on the right.
- User should be able to map their column from the left to the Hermes column on the right
- Mapping should account for data transformations. Some samples below :
- Split a column into two or more columns e.g. "First Name, Last Name" ===> "First Name” and "Last Name"
- Combine columns into one column e.g. "First Name" and "Last Name” ===> "First Name, Last Name"
- Substitutions e.g. “Male” ==> 1 and “Female” ==> 2
- Simple Arithmetic operations e.g. “Column1” + “Column2” ===> “Base Salary”
- User saves the mapping.
- Save is successful if the validations passes.
- Any error will be displayed prominent on the screen or at proper context.
- Some sample errors
- Missed Mapping – If not all Hermes columns are mapped
- Incorrect transformation rule
- User should have the option to navigate back to the dashboard page or continue to the uploading page.
Use Case 3: User views an existing Mapping
- User clicks on a mapping from the Dashboard screen
- User is navigated to the Mapping page. The details of the mapping is displayed.
- Users should be able to modify any existing mappings as specified in User Case 2
Use Case 4: Cash Uploading Data
- Once the mapping is created, users can now upload the data using this mapping.
- User selected “Upload Data” either in the cash or mapping screen
- If this action is selected from the Dashboard screen – user is prompted to upload a spreadsheet
- If this action is selected from the Mapping screen – the spreadsheet used in the mapping process is used. However, there should be ability to upload a new spreadsheet.
- Once a file is uploaded – the page displays a preview of the first 10 rows of the spreadsheet and how they are mapped to Hermes columns.
- Any error on the preview is displayed to the user
- Error in the uploaded spreadsheet – user can cancel out of the current workflow, fix their spreadsheet and upload it again
- Error in the mapping – user can cancel out of the current workflow, fix their mapping and upload the spreadsheet again
- If there are no errors in the preview stage – user can hit continue to process the entire spreadsheet
- Any error in the entire upload is reported to the user and they need to start the workflow again
- E.g. If not all Hermes columns are populated for all the rows of data
- If there are no errors – the page displays a success message and navigates the user to the cash upload detail screen. (See Use case 5)
Use Case 5: Cash Upload Detail View
- User clicks on a cash upload on the Dashboard screen
- User is navigated to the Cash Upload Detail screen
- The page should display a date, time information, and statistics about the cash upload
- User will have the ability to browse through or search all the data they submitted as part of the upload
- User will have the ability to fix data on individual records.
Use Case 6 : Hermes Administrator Dashboard
- Hermes Administrator dashboard displays stats of the cash submission in a visual manner
- Administrator has the ability to drill down the data and get to a client dashboard screen.
- Administrator also have the ability to search and pick a client from an autocomplete drop down and navigate to a client’s dashboard screen
Use Case 7: Logout
- User can log out of the site from any part of the site . They are navigated to the home page of the site.
General Requirements:
- Produce a front-end design concept (Storyboard) that can be used to demonstrate all screens / mentioned functionality as required in the challenge spec.
- Required designs are for a web-based application.
- The design should have a clean, modern, look-and-feel that follows the branding guidelines (details below).
- The design must be very easy to use and intuitive. Keep that in mind when designing your solution.
- You MUST cover all screens / functionality mentioned in the contest round details and described in the challenge spec. If there is better way to display any information, please feel free to reflect that on your design.
- Use web-safe fonts for the pages content. Please make sure to declaring your fonts according to the Studio font policies.
- Show all the hover states for all UI elements you create (buttons, hyperlinks, dropdowns, etc).
Design Guidelines:
- All submissions MUST follow the client's branding guidelines for colors, typography, etc. (attached).
- Make sure create all your graphic in 'vector' format (buttons, icons, etc), so when resize for bigger versions, graphic still look sharp!
- Creativity is also welcome!
Screen Sizes:
- Web: 1280px width and height as required for screen resolution. The web app should also be responsive and your design should be scalable for different screen sizes (note: you are only required to submit designs for the screen size listed, but please consider how your design will work on different screen sizes).
Project Documentation:
1) Branding Guidelines ("Digital-Style-Guide.pdf") - Branding Guidelines from the client. You must follow these in your design concepts.
2) Mapping Inspiration.jpg - Please use this as design inspiration for the mapping process (see how the lines are used to connect fields mapped together). This is just a rough draft so please do NOT copy this exactly, we would like you to explan on this idea.
Target User:
- Existing clients who provide cash data to Hermes..
Judging Criteria:
- Overall look-and-feel of the design.
- How well you plan the user experience and capture your ideas visually.
- How well your responsive design will work on different devices.
- Creativity and ease-of-use is key to the success of this app as it must be engaging to users.
- Any suggestions, interactions and user flows you recommend (provide any notes or comments for the client).
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.
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.
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.