Tiger - DViz Dashboard Viewer Responsive Web App Refinement Design Challenge

Welcome to "Tiger - DViz Dashboard Viewer Refinement Design Challenge"!

We recently completed a DViz design challenge that allows users to view data and dashboards that has been aggregated from various areas of the organization. The goal is to pull all of these assets/displays/data into one place. Through this NEW DViz viewer, we allow employees to find the right content based on their day-to-day roles and business function.

In this challenge, we are looking to continue designing and refining based on the outcomes of the first challenge. We are looking for you to refine and update the design based on the feedback and direction below. 

Good Luck!

Round 1

Submit your initial design for a Checkpoint Feedback
- 00 Overall Changes (Desktop + Mobile)
- 01 Dashboard (Desktop + Mobile)
- 02 Settings, Profile View (Desktop)
- 03 Notifications (Desktop)
- 04 Specific Mobile Screen Changes (Mobile)
- 05 User Scenarios (Desktop)

As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please include the MarvelApp URL in the comments while uploading your submission
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates
- 00 Overall Changes (Desktop + Mobile)
- 01 Dashboard (Desktop + Mobile)
- 02 Settings, Profile View (Desktop + Mobile)
- 03 Notifications (Desktop + Mobile):
- 04 Specific Mobile Screen Changes (Mobile)
- 05 User Scenarios (Desktop + Mobile)

As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please include the MarvelApp URL in the comments while uploading your submission
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)

This challenge is focused on creating a responsive web app that aims to align our organization around a core set of business performance metrics and standardize the delivery of and access to data and analytics needed to manage the business. In the first challenge, we focused on "design concepts" so in this challenge we want to push and refine the results into a complete design and user experience.

Challenge Assets:
- We are providing you with the design assets from the previous design challenge (you can find it in forums), please use the source files from “01-264999” as a base for this challenge.
- The provided source file is in the .sketch format, we prefer sketch but it is fine to use any other design software mentioned under source file requirements in the challenge spec (right sidebar).

Application Design Considerations:

• We are looking for modern & clean designs (think FLAT, futuristic). Note preferences in the provided designs.
• The app should be styled more like a consumer-facing app: Netflix, Xfinity, etc. (not like an internal employee app)
• Have your designs of size: 
  • 1366 x 768px (desktop)
  • 750 x 1334px (mobile)

Required Dashboard Viewer:
This responsive web app will be used by all employees regardless of Region, Business Unit, or Function for standardized reporting and analytics.
NOTE: Please make sure the changes that you are making to the desktop screens also reflect on the mobile screens.

00 Overall Changes (Desktop + Mobile)

• Include the ability for an employee to select between light and dark mode.
• Dark mode: Improve the shade of black used for the background color. Currently looks too washed out - doesn't seem sharp.
• Persona Selection: We do not need the "Choose Role" screens for selecting a persona within the main application. This should be done in the setting/profile area. A user will not be changing their Persona (options) only if they need to change it as it relates to their profile. Assume default to one persona and only change through profile settings.
• We want to make sure to organize content by information workstream and not persona as is currently done.

01 Dashboard (Desktop + Mobile)

• Grid View: The tiles in the current design are HUGE, please reduce the size so that more will fit on the screen to limit scrolling. (See design 02-265000 as a reference)
• Include the ability to add favorites by using a heart for favorite dashboards (this will work across both desktop and mobile)
• View Switcher: The user should be able to switch between Grid and List view. List view could have a small thumbnail and text for title/description etc. of the dashboard. Please allow the user to be able to select between 5 - 6 different layout views in your design.  Be creative.
• Grid View: We would like to be able to select a grid view/layout of the grid view
• Use color as a way to group related dashboards by category and user persona.
• Search: Utilize the Search Dashboards feature in design 02-265000.  Also, include Recent Searches and Recommended Dashboards.

02 Settings, Profile View (Desktop + Mobile)

• Keep the navigation pane to the left (See design 01-264999 as a reference)
• We would like to see examples of actions that can be taken in the settings, profile view, and notifications
• Settings: Show how the user can change the persona.  Show more of the interactions that take place in the Settings menu.
• Show what it looks like when the different menu options are clicked on.
• We are open to your thoughts on what each of the pages needs to show.

03 Notifications (Desktop + Mobile):

• Design how the notifications are shown and responded to.

04 Specific Mobile Screen Changes (Mobile):

• Similar to the Desktop version.  The user should only be able to work within one persona. The current screen layout is fine, but organize the tiles by the information workstream and not the persona. 
• Show designs for when a device is in landscape mode.  
• Show what happens when we switch from landscape to portrait and back.

05 User Scenarios (Desktop + Mobile):

• Design a few scenarios for when the user is opening the app, selecting content, rendering content, and moving from one piece of content to another.
• Need to solve for how we toggle between dashboards that are opened. Should this happen within the application or should additional browser tabs be opened for new content? You have the freedom to decide. Show how content is opened on the screen and cycling through different dashboards.

 
Important:

• Keep things consistent. This means all graphics styles should work together.
• All of the graphics should have a similar feel and general aesthetic appearance
• Focus on User Experience / how the user interacts within the dashboard.

MarvelApp Prototype

• We need you to upload your screens to MarvelApp.
• Please send your Marvel app request to csystic@gmail.com
• You MUST include your Marvel app URL in notes /comments while uploading (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).

Target Audience:
Internal Employees

Judging Criteria:

• How well you plan the user experience and capture your ideas visually.
• Cleanliness of your graphics and design.
• Overall design, UI and user experience.
• Consistency across the UX/UI
• How well you interpret the example screens (business relevance) and show us new ideas and concepts.

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
- Submit MarvelApp as part of your submission.

Source Files:
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as the layered PSD file, or Adobe Illustrator as a layered AI file or Adobe XD or Sketch!

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.