Challenge Summary
Welcome Back to SQuIDs! This time, we need design adjustments to the Reporting Page layout based on listed requirements.
SQuIDS is an existing web application that is used to support test case creation/planning and defect management. The goal of this contest is to focus on the "Reporting Page" and help us create a professional user experience around how a user interacts with the SQuIDs application.
Note: We have a "Bonus Prize" for the Studio Member who wins the most SQuIDs2 Studio Contests! We are looking for the Studio Community to help us innovate the user interface/experience of the SQuIDs Application.
For this contest we already have the user interface/graphic design done! (download the provided PSD source files). We are looking for you to focus on the Reporting fields/forms and plan/design an improved user experience.
Round 1
We would like to see your intitial design concepts for these items:
- Reporting Landing Page
- Update Left Column
- Update Middle Section
- Reports Page Update
Note: Provide as many solutions (even beyond the listed pages) during the milestone so we can provide you with useful feedback.
Round 2
Final Design plus Milestone Feedback
- All requsted redesigns - Final design
Contest Details
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.
Contest Resources
Download the provided screens/graphic files (Get familiar with the existing design before making you updates):
Squids2-Common-Pages-PSD.zip - Storyboard of all common pages design (Existing "Reporting" placed inside this file, you should re-use them as base of your design updates)
Squids2-PSD-Lib-Assignment.zip - Storyboard of "Test Labs & Defects".
Squids2-Prototype.zip - Squids2 Prototype (Learn how the applicatin works/user click-paths)
Note: Your solutions need to make sense. Think about the user interacting with the application and what enhancements make sense. You only need to focus on the "Reporting" page for this contest.
The Design Problem
"Currently we have around 10 types of reports that users can run in the application. The user selects one of the reports, then has to fill in their specific details (Team, Project, Suite, etc.) to run the report. The user can then save these details to run the reports again at a later time without having to re-enter all the details again. The problem is how these reports are delivered/displayed to the user. Currently it's just a drop-down menu of the reports. The user has to view the reports seperately and then pick a saved version. It's just not a very good delivery system. We need to keep the ability for a new or one-off users to be able to quickly run one of the 10 reports, but also want to provide a better delivery system for saved reports."
1) Left Column Update
reference: 1.left-page-update.jpg
- We would like this left column redesigned. We still would like the left column but its boring and the functionality needs to be improved. We think the left column just doesn't look very good in its current design/user experience.
- We need an area on the left side of the screen that allows a user to launch a reports page.
- Each report link should include an icon which is a sample image of the report plus the name
- The existing Reports "look/icon" take up a lot of room.
Here are the different type of reports
--- Project Summary
--- Test Case Plan vs Actual
--- Test Case Status
--- Test Plan per Day
--- Defects By Impact
--- VersionOne Traceability
--- Go/Delay, and
--- Advanced Traceability matrix.
Left Column Functionality
- A user can directly launch a report page by clicking the image or title on the left side for the report they are interested in.
- Clicking on the report will launch the reports page with no filters filled in
- They then would pick their criteria and run the report.
2) Reports Page Update
reference: 2.reports-page-update.jpg
- We need to be able to compress this page more (top area has a lot of white space)
- When viewing this page we can barely see the top of the Report
Reports Page Functionality
- The Reports page will open into a new browser window (not a modal window)
- The user will need to have more then one Report open at a time
3) Right/Middle Column Update
reference: 3.right-page-update.jpg
- Remove the top Filter section
- Rename the middle section to “My Reports”
- Add a control that allows the user to toggle the view between Icon/thumbnail view detail/list view.
Right/Middle Column Icon view:
- Icon view would be more like a dashboard. Each of the pre-saved reports would show as an icon of that report with the name underneath.
- The user can hover on report icon to see more details about that specific report.
- The user can click the gear icon at the top of the page and drag and drop the icons in the order that they would like them (See the home page design for similar idea of how this would work).
- Think about how page would look if contains more data, need pagination?
Right/Middle Column List view:
- Similar to what is in the current pre-saved report section of the prototype (Squids2-Prototype.zip) with the below changes.
- Make the icon much smaller should be about the size of the text.
- Change the date to be mm/dd/yy format to save space.
- Allow user to sort by and filter by each column.
- Allow user to add / remove general report fields that show in the detail grid by clicking the gear icon at the top of the table (i.e. Suite, phase, app)
Right/Middle Column Functionality
A user can create and save a new report two ways
1. The user can click on the "Add New Report" button which opens the add report page. The user fills out the criteria, runs and saves the report
2. The user can launch an existing saved report, change the criteria and save the report with a new name. This new report will now show up in the right column in either icon or list view
- This way the user can now just come to the main report page and launch any of their saved reports by clicking one link and not have to fill in all the criteria every time.
4) Add New Report Page
reference: 4.new-report-update.jpg
- We need to be able to compress this page more it has a lot of vertical spacing (top area has a lot of white space)
- If you make any design changes to the other parts of the report (spacing etc) make sure to also update this window
New Report Page Functionality
- The user clicks on Add New Report and they see this modal window
Branding Guidelines
- Follow the provided source storyboards/graphics
Target Audience
- Internal Resources
Judging Criteria
- How well you redesign the Reporting Page
- Creative yet efficient solutions
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 or Illustrator and saved as layered PSD/AI 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.