Challenge Summary
Welcome to "DSDW - Analytics Visualization Portal Responsive Design Challenge". In this challenge, we are asking the Topcoder community help to create a new and different designs and viewpoints on a variety of existing screens used by a pharmaceutical safety reporting manager. Only 3 screens are needed, so jump in now and take a look at this fun challenge!
Round 1
Initial design for client review (Desktop) :
- Dashboard Screen
- Project List Screen
- Search Screen
Round 2
All requirements as stated in challenge details with client feedback applied (Desktop + Tablet + Mobile):
- Dashboard Screen
- Project List Screen
- Search Screen
Project Overview
Drug Safety Data Warehouse (DSDW) is an analytics solution that improves the quality, transparency, and interoperability of safety data from post marketing, clinical trials as well as real-world sources such as electronic medical records and social media.
The goal of this challenge is to revamp current screen designs, get new navigation designs, and explore alternate ideas for filter and search functionality in the application. We need your help to translate those ideas into UI/UX screen designs.
Basically we are asking you to create new and different designs and viewpoints on a variety of existing screens used by a pharmaceutical safety reporting manager. The current needs include:
- An updated executive dashboard
- Revamped project catalog filtering
- Revamped project catalog search
Branding Guidelines
- Font, follow branding-guideline.png
- Colors, follow branding-guideline.png
- Style, Clean and Futuristic
- Responsive Storyboard, create it for the following devices :
* Desktop : 1280px width with height adjusting accordingly (PRIORITY!!)
* Tablet : 1024px width with height adjusting accordingly.
* Mobile : 750px width with height adjusting accordingly.
Design Considerations
- We are trying to get alternate navigation ideas and alternate filter, search and catalog functionalities. The team wants to see totally new designs!
- Focus on providing the best UI/UX for analytical capabilities.
- This apps will be built as an HTML application, explore the best and available features in web for analytical function.
- Create a clean and futuristic design.
- User should be able to identify a task that is due, a task that is currently running, and tasks that are related to the user. Once identified, a user should be able to navigate to that task and view the task detail. A user should be able to filter, search and have visual cues that help the user complete the task intuitively.
- Your design needs to cover these features :
* Ability for the safety report administrator to calendar and schedule a report creation
* Ability for the safety reporting analyst to create the case list and generate regulatory reports.
* Ability for the safety reporting analyst to do ad-hoc analysis and operational reporting.
* Ability for safety executive to monitor the progress and safety compliance.
Screen Requirements
01. Dashboard Screen
- Wireframe reference dashboard.png
- As a Report Administrator, I want to view a dashboard of my key activities so that I can easily navigate through my tasks
- Pre-condition: User needs to logged in first into the DSDW portal
- As a Reporting Administrator, I should be able to perform the following action in the dashboard So that I can easily navigate through my tasks :
-- View a dashboard of my key activities, Dashboard Sections can include : Workspace, Metrics/KPIs, Launchpad (feel free to create new sections)
-- View report progress in Workspace :
Field needed :
* Reports Due in 30 Days
* Reports in Progress
* Reports Completed within 30 Days
Rule:
* "In Progress" reports will be reflected in "reports Due in 30 Days" when they have entered a 30 day window from the login date
* Selecting a progress field will navigate the user to the specific report group, i.e. selecting "Reports Due in 30 Days" will navigate user to a project list filtered to 30 days or less
* Each progress field count will increase or decrease based on the number of reports within each section e.g. for every completed report, the “Reports Completed” count will increase by 1
-- View KPI charts
Charts:
* Case Volume by Region
* Compliance Rate Over Time
* Case Volume by Site
* Case Volume over Time
Rule:
* Selecting each chart will give the user an expanded chart view
* Each thumbnail should display accurate, condensed chart information i.e. not a static image
* Charts should be limited to 4 charts per dashboard
-- Add/Remove KPI charts from chart library
* User can add/remove charts from their KPI library to be displayed on the dashboard
Rule
* User can select and rearrange charts on their dashboard according to their preferences from a KPI library
* Removing a chart from the dashboard will not remove it from the chart library
* Users are limited to selected 4 charts for their dashboard
-- Launch Scheduling from Launchpad
Rule:
* Selecting "Calendaring/Scheduling" on the Launchpad will navigate user to the project portion of the portal.
02. Project List Screen
- Wireframe reference project-catalog.png and filter.png
- As a Report Administrator, I want to view a detailed list of calendared projects so that I can see an overview of all current projects and their progress
- Pre-condition: User has selected the "Calendaring/Scheduling" portion on their dashboard
- Actor: Report Administrator
- Functionality needed : As a Reporting Administrator, I should be able to perform the following function So that I can see a detailed overview of all current projects and their progress :
-- View a list of calendared projects
* Rules :
** Each Project should be displayed on an individual, selectable card
** Display the top 6 most recent projects and allow the user to scroll to view more
-- View project details
* Fields: Project/Report Name (e.g. DSUR Line List), Drug Name, Report Type, Users Assigned to Project, Start Date (dd-mmm-yyyy), End Date (dd-mmm-yyyy), Submission Date (dd-mmm-yyyy), Tasks Number, Task Status (Open, In Progress, Complete)
* Rules : Selecting project overview details will expose additional project details
-- View Additional Project Details
Fields :
* Project Number
* Development International Birth Date (dd-mm-yy)
* International Birth Date (dd-mm-yy)
* Reporting Period Start Date (dd-mm-yy)
* Reporting Period End Date (dd-mm-yy)
* User Group
* Report Type
* Milestones :
** First Draft Date (dd-mm-yy) – enter +/- calendar days from Reporting End date
** Approval Date (dd-mm-yy) - – enter +/- calendar days from Reporting End date
** Submission Date (dd-mm-yy) - – enter +/- calendar days from Reporting End date
** Add more milestone dates
* Details
* Scheduled/Unscheduled
* More Details
Rules:
* User can toggle between scheduled and unscheduled in order to schedule a project
* Selecting "Details" will navigate user to expand project view
-- Filter projects
* Fields: Product, Report Type, Reporting Period (Start Date, End Date), Status (Open, Started, Complete), Clear Filters
* Rules:
** Selecting filter option will open filter menu
** Each filter should have multi-select functionality
** Filters should be selected as “All” by default
** User will be able to clear all available filters at once
** "Breadcrumbs" should appear at the top of the project list based on filter criteria applied
03. Search Screen
- Wireframe reference search.png
- As a DSDW Common User, I want to perform global search so that I can quickly navigate to a specific item
- Pre-condition: User has logged into the DSDW portal
- Actor: DSDW Common User
- As a Reporting Administrator, I should be able to:
-- Input Search terms
* Field : Search Box
* Rules : Enable predictive search
-- Submit Search Term
* Field : Enter, Predictive Search Options
* Rules: Search based on provided terms when the user selects “Enter” or when the user selects a predictive text option
-- View Predictive Text Options and Categories (Advance Search)
* Fields : Project, Case, Case List, Report Template, Case List Template
* Rules : Display recommended predictive text in appropriate category (similar to Apple Spotlight Search)
-- Navigate user to selected search term
* Rule : Selecting "Enter" or the predictive text option will navigate user to the linked page
-- Create search result screen.
Important:
- Keep things consistent. This means all graphic styles should work together and follow iOS best practice.
- All of the graphics should have a similar feel and general aesthetic appearance.
Documentation
- references.zip, contains all necessary input needed in the challenge
Target Audience
- Pharmaceutical – Safety Report Administrator
- Pharmaceutical - Safety Reporting Analyst
- Pharmaceutical - Safety Manager/Executive
Judging Criteria
- How well you design the Responsive portal concept!
- Cleanliness of your graphics and design.
- Design and User Experience.
- Is your design easy to use?
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 JPG/PNG images in a zip file with all requested contest requirements stated above. Number your files (01, 02, 03, etc) this will help review them in order.
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.