Challenge Summary
The goal for this challenge is UX / UI design exploration, and concepts around general look-and-feel direction. The Analytics Dashboard site will serve as a tool for users to build, configure and monitor a dashboard of data, statistics and analytics for their specific industry. We are focusing on a small area of the overall dashboard and have supplied you wireframes that explain the user flow. We’re looking for a broad range of creative ideas to move forward with and refine in future design challenges. Show us your best UI design and User Experience ideas!
In this challenge you are provided with an opportunity to show digital leaders just how good your user interface and user experience (UI/UX) design skills are. This will be a fun challenge with high prizes! We want to be WOWED!
Round 1
Submit your design for a Checkpoint feedback:
00. Login (Desktop and Mobile)
01 Dashboard (Desktop and Mobile)
02 Add Widget (Desktop and Mobile)
03 Dashboard - Edit Mode (Desktop and Mobile)
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Final Design plus any Checkpoint feedback:
00. Login (Desktop and Mobile)
01 Dashboard (Desktop and Mobile)
02 Add Widget (Desktop and Mobile)
03 Dashboard - Edit Mode (Desktop and Mobile)
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The Analytics Dashboard will be used by industry professionals to configure, modify and monitor a series of pages and dashboards. These dashboards will contain charts, graphs, analytics, statistics, etc. that will allow the user to make more informed decisions and monitor trends throughout their specific industry. The dashboard will be designed around a series of user configurable widgets. We are focusing on the aspect of the dashboard that allows the user to see their dashboard and add, configure and edit a new widget. We are also focusing on the overall UI design and user experience (UX).
We have provided you with a set of wireframes to get you started. This includes the type of content that should be included on the screens and the relative user flow. However, we are looking for your help in defining what is the best overall UI and UX. DO NOT just simply color in the wireframes. Reinterpret their designs and layouts to make a more engaging, streamlined and visually appealing UI/UX. We want to see new ideas and ways to think and interact with the content. Your design should remain HIGHLY functional and user friendly.
Description of Assignment:
We are looking for your most innovative and interactive UI designs. We want you to think outside the box and create something that is visually stunning yet professional and engaging. We are looking for your UI designs and concepts for this user configurable dashboard tool.
Screen Size Requirements:
We are targeting desktop and mobile designs, with a focus on responsive design. Your designs should work across all devices.
Desktop: 1280px width
Mobile: 640px width
Required Screens:
00 Login (Desktop and Mobile)
-- Simple and intuitive login page
-- This should be eye catching and appealing for the user
01 Dashboard (Desktop and Mobile)
-- This the main screen for the user and where they will the majority of their time on the site. It needs to be extremely functional with a great user experience, but also visually engaging.
-- The wireframe will be your guide for the overall content, however, the layout is open for you to change.
-- Remember, we are only focusing on very small section of the dashboard. The future of the dashboard will be made up of numerous different kinds of widgets. Make sure your designs are adaptable and flexible in handling these future states.
-- The main dashboard area is divided into various dashboard “pages”. These are contained within a Carousel that the user can move back and forth between. This is unintuitive to the user. Think about moving away from the carousel and doing some kind of sub-nav mechanic OR make the carousel more functional. Give the user context of what the dashboard pages are and which one they are currently on. This could be in the form of hover states, creative labeling, etc. We are looking for your ideas here. NOTE: we are not asking you to design the user flow/ functionality of adding/removing dashboard pages, but this will be possible in a future phase. Think about the placement of these options in your designs.
-- Make sure you are capturing the required information and functionality included in the wireframes.
02 Add Widget (Desktop and Mobile)
-- Clicking on the “Add Widget” button takes you to the Add Widget section
-- The wireframes show this an overlay/ modal window. We are looking for the best user experience here that is as streamlined, simple and fast as possible.
-- Use the wireframes as your guide for the types of content and functionality required. We are looking for your ideas for the best layout and overall UX of this area.
03 Dashboard - Edit Mode (Desktop and Mobile)
-- After the user has selected, made edits and confirmed their new widget they are taken back to the dashboard in Edit Mode.
-- Show us what the dashboard looks like when the new widget has been added
-- From here they can configure their dashboard as needed. Configuring widgets, adjusting their sizes, etc.
-- You can also get to this Edit Mode through the “Gear” icon on the Dashboard.
-- Show us some great and intuitive ways for the user to reconfigure and create their ideal dashboard layout.
-- Once the user has confirmed their layout, show us what the finished Dashboard layout looks like in “View Mode”
Included Documents:
-- Design Direction Site: This site includes Wireframe click throughs, inspiration and suggested branding.
-- Wireframes: Use these wireframes as your guide when designing your screens. You DO NOT have to follow these wireframes exactly. If you see opportunities to improve the user experience and UI, PLEASE show us. You will see red highlights throughout that signify a clickable area. This is the best way to navigate the wireframes. There are also really good notes and insights into how things work. Make sure that you understand the wireframes and user flows. If not, please ask questions in the forum. Wireframes are found on the Design Direction Site.
Branding Guidelines:
We’ve included some branding guidelines, colors and fonts, in our Design Direction Site.
Target Audience:
Industry leaders and decision makers
Judging Criteria:
- How well does your design align with the objectives of the challenge
- Cleanliness of your graphics and design.
- Overall Design and User Experience
- New ideas and concepts
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 images in a zip file with all requested contest requirements stated above. Number and Name your files appropriately to aid in the review process. This is very important.
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.