Challenge Summary
Welcome back to HTC! We have new web application that we are looking for a sharp looking user interface using the provided design style guide. We are providing you with our simple wireframe and need your help in turning this application around so we can get it prototyped!
Humana and TopCoder (HTC) have teamed up to build cutting-edge applications and design modern user interfaces/user experiences. This is one of several contests looking to solve a user experience/user interface design problem through the Studio Community.
Please note the FAST!! timeline - get your milestone submissions in and let us know if you have any questions!
Round 1
Provide the listed screens for Milestone feedback
1) Launcher
2) Asset Table
3) Asset Detail
- Provide additional screens if you have time
Number your files! (01,02,03,04 etc)
Round 2
Final Design:
All final screens plus Milestone feedback/adjustments
Number your files! (01,02,03,04 etc)
Project Background
EAPM is an internal application that manages software assets. Every software asset will have an EAPM ID, a set of metadata, and optional relationship(s) of various types with other software assets.
Each EAPM ID (i.e. each EAPM software asset) has an associated IT Owner (aka Product Owner). This project is intended to provide a way for each IT Owner to be presented with a view of all of their EAPM assets and to give them the ability to EFFICIENTLY AND QUICKLY update a sections of critical information on each.
Speed of using this application is very important - IT Owners (in the example, “Mark Griffith”) are typically managers who will have limited time so efficient and effective user interface is key.
Each IT Owner should be given a URL that will render their landing page/asset table to review and update (i.e. the first screen in the wireframe). This "Launcher" UI page needs to allow IT Owners to select their name so they can arrive at their landing page.
This "Asset Review and Update" UI will be a standalone web application and not integrated / constrained by the existing EAPM UI.
Design Problem
Download the provided wireframe (EAPM-Update-WireFrame-v4.pptx)
We are looking for you to design a new user interface for the listed wireframe screens based on the provided style guide (HTC-Design-Guidelines-11.18.pdf). The wireframe presents our objective. As the designer you have latitude to suggest to suggest the best user interface for this application. However, fields shown in the wireframe must be visible in some way, and named as shown.
Screen 1) Launcher
Launcher is a simple UI to allow the user to type in name of an IT Owner (type-ahead search box) so they can arrive at their landing page (Asset Inventory Table).
Screen 2) Asset Inventory Table
- Make sure those icons match the style guide design
- Match table content like the provided wireframe
- This "Select All" need change to ‘Clear All‘ when multiple items selected. How should this look?
- Checkboxes would use standard browser style
- Suggest zebra strips/alternate background on the rows. Once again, re-use color theme from provided design
- "Confirm" and "Submit" button must prominent on page.
- Need error message if user click this button but not select/edit any checkboxes yet.
- Create separate page for hover style for the UI elements
- Edit button need renamed to “Review/Update”
- Click Edit button need show the Asset Detail
- Confirm and Submit only applies to selected/checked records. It does not apply to all records in the Asset Table. So, if there are 10 software assets that Mark Griffith is the IT Owner for, and only 9 are selected at the time of clicking Confirm and Submit – then only 9 will be sent to EAPM as updates and stored for audit purposes.
- The asset inventory table should have one way of highlighting assets that have a "Last Verified By" date greater than a certain # of months.
- You should also display the Last Verified By user name and timestamp for each asset.
Screen 3) Asset Detail
- This can be a modal dialog, or a new page, or dynamic show/hide within screen 1, or suggest us any ideas to help the user interaction speed
- Match form content like provided wireframe
- Use standard browser style for input, checkboxes and textarea.
- Need required mark on some fields.
- Design proper layout/width/placement on form content.
- There will be option to rename the Asset title.
- "Application CAS" need ability to find items to select. If user change their mind, how to delete selected data?
- "Line of Business", "Business Domain", "IT Domain", "Status" and "Data Classification" are multi-select.
- If "What's an application" is checked, display alert stating that most applications should be considered as part of a “commonly known applications such as Enrollment Center, CCP2, etc.
- "Apply" and "Cancel" button must prominent there.
- Click "Apply" button will updated row in grid.
- Need validation error design. How do errors look on this screen.
Screen 4) Confirmation
- Design the confirmation screen
Think about the user interacting with the application and review the provided style guide to provide a simple and clean user experience.
Design Requirements
- Users will have 1024x768 screen size or larger. So the table will need to be fluid.
- Leverage the style guide provided…and think in terms of “How does the user get through their list as fast as possible?”
Branding Guidelines
- Follow the provided Style Guide (HTC-Design-Guidelines-11.18.pdf)
Target Audience
- Internal Users
Judging Criteria
- Our main concern is to get great user Experience for the IT Owners who have to confirm to these critical pieces of information about their software assets
- While this is a small piece of the application we want it to look and work well!
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Please upload PNG/JPEG images in a zip file with all requested contest requirements stated above.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (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.