Challenge Summary
Welcome to Dynamic Result Grid Design Concepts Challenge. In this challenge, we are looking for the studio community’s help to provide their creative ideas and show their great UI/UX skills design to tackle our problem.
This challenge’s goal is to create a dynamic search results design which will be use to handle large amounts of data in one single page without making the user scrolling down or navigate to other pages to see the full content.
Looking forward to see your design concepts solution!!
Round 1
Initial design concepts solution for client review
- Readme.jpg: Provide notes about your submission
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
All requirements as stated in challenge details with client feedback applied.
- Readme.jpg: Provide notes about your submission
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Background Overview:
Our applications by nature are data intensive. The users of our system need to view and analyze large amounts of data in order to investigate and make accurate business decisions in a timely fashion. The users do not want to navigate to multiple pages or perform multiple searches to analyze the data. This challenge request is simple, we need your help to think about and create design concepts for dynamic search results that are able to solve our problem and allow the user to easily analyze large amounts of data without losing their focus. This means eliminating the need to navigate to other pages, scrolling horizontally, etc.
Challenge Goals
Create a dynamic design to solve the problem of too many columns in search results and causes horizontal scrolling on a range of screens from tablet (768 pixels wide) to desktop (1500 pixels wide)
Our Current Approach:
- There are times when the user needs to analyze the same data across multiple records and in these cases we use a standard table of data with numerous columns
- The tables are currently designed to have columns represent primary data that needs to be scanned quickly.
- The data displayed within the expandable areas can't be easily scanned across rows without first expanding the area row-by-row or by implementing an "expand all" function.
- We need a way to extend the common grid functionality to aid in the ability to quickly scan primary data across multiple records.
Screen Requirements - The Result Grid Screen :
1. The Problem
- Check usecase.docx to get some ideas of how the search criteria will be done in the application.
- After the user performs a searching in the app, large amounts complex results will appear in the app. Tables with multiple columns; wider than the screen causing horizontal scroll bars.
- We need a way to extend the common grid functionality to aid in the ability to quickly scan primary data across multiple records.
- Data Content is too big for the existing screen widths.
- Viewing the additional data by scrolling horizontally and navigating to different pages is not effective and easily makes our user lose focus.
2. Existing Solutions & Ideas
Here are some UX solutions that have already been explored to tackle large data issues:
- https://www.filamentgroup.com/examples/rwd-table-patterns/
- http://www.digitalgov.gov/2014/10/28/trends-on-tuesday-8-ways-to-format-tables-for-responsive-web-design/
- https://www.liquidlight.co.uk/blog/article/tables-in-responsive-design/
- https://github.com/filamentgroup/tablesaw
3. Data
- Use the provided data set for this design challenge.
- Primary Data: PA Number, PA Status, Provider ID, Member ID, Financial Payer, Line Status
- Secondary Data: Media Type, Process Type, DUR, Emergency Supply, Primary Diagnosis, 2ndry Diagnosis, Received Date, Finalized Date, Line Item
- Third Level Data: Rendeing Provider Number, Service Code, Service Code Description, Modifier 1, Modifer 2, Modifier 3, Modifier 4, Authorized Eff Date, Authorized End Date
4. The New Solution (Challenge Deliverable)
- Design a UI around these UX concepts and Data. Explore your own UX concepts as well. This is IMPORTANT
- What would you suggest for the dynamic result grid, here are several interactions references for your consideration:
- - Expand/Collapse data content vertically and horizontally
- - Freeze column
- - Control box to manage the column
- - Grouping/Filtering
- - Show Popup/Modal window for the data detail in click action
- - Show data detail on Hover
- - Ghosted data column
- - Split View
- What else? Show us your ideas and creativity!!
- While this challenge is focusing on desktop resolutions think about how your solutions could be responsive and work across tablet and mobile devices as well.
Important:
- Keep things consistent. This means all graphic styles should work together and follow best design practices.
- All of the graphics should have a similar feel and general aesthetic appearance.
- Feel free to add new screens to explain your design interactions for the app.
Branding Guidelines
- We do not have a current brand and color scheme.
- Use a basic design style as much as possible.
- Use grayscale (or minimal colors like simple blue and gray) and a simple structure for your designs.
- Screen Resolutions: range between 768px to 1500px
Documentation
- UseCase.docx
- Challenge data.xls
Target Audience
- Business Professional, need to view and analyze large amounts of data in order to investigate and make accurate business decisions in a timely fashion.
Judging Criteria
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Creativity and ease-of-use is key to the success as it must be engaging to users.
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.
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.