Challenge Summary
Welcome to "CEO - Responsive Leadership List Dashboard Design Concepts Challenge". This challenge is focused on designing the UI of a new responsive site which will be used by CEOs to determine (at a glance) the performance status of the senior leaders within his/her company, based on their own predefined goals and metrics.
We are looking for DESIGN CONCEPTS on how this Application could work. What should the user (CEO) see and experience when using the application, how should they navigate between sections, etc.
Round 1
Submit design for initial checkpoint feedback:
a. Leadership List (overview & list of roles/employees)
b. Performance Details (role & employee details)
The design should assume a responsive friendly layout (desktop, smartphone)
Readme.jpg: Provide notes about your submission
Round 2
Submit design for final review :
- All requirements with client feedback appplied.
The design should assume a responsive friendly layout (desktop, smartphone)
Readme.jpg: Provide notes about your submission
For this challenge, we want to build a modern, easy to use, responsive site. The project goal is to provide CEO's a high level, clear visual indications into the "health" of their senior leaders, based on predefined performance goals for :
1. The company
2. Senior Leadership Roles (10-40)
3. The individual employee filling that role.
All pages should be designed with the CEO user in mind. It is intended to provide the user "at a glance" information, that will quickly allow the CEO to identify problems, and quickly “drill down" into more information.
It should be incredibly intuitive and simple to use, and also visually pleasing, reflecting the provided brand standards of the CEO Works brand.
Branding Guidelines
1. Brand guidelines and style guide (references.zip)
2. Website for reference: http://ceo.works/
3. iPhone6 PSD template (put your mobile screen mockup in the template)
Design Considerations
- Looking for modern, intuitive user interface
- We need this product to be Simple, Smart, engaging.
- Focus on the design being a great user experience, think simple but effective solutions!
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- What should the priority features be?
- Stock Photos: Feel free to use any images related to this concept.
Design Guidelines
- For this challenge, we would like to see what each page/view looks like in a desktop, and on an iPhone6 (portrait/vertical orientation).
- The site may be made accessible for mobile users in Salesforce1. You may replace your custom header/navigation with the SF1 header/nav pattern in the mobile view, but it's NOT required (you can create your own header/navigation).
- The iPhone design should be designed with a Retina Display in mind, and should utilize the provided iPhone6 PSD template, or something similar.
- Graphics (icons and otherwise) should be created in a vector (shape) format. We may convert all graphics to SVG in production.
- We may leverage a JS library in development phase, such as http://www.highcharts.com/, to develop the visualizations. So feel free to be creative!
Design Size
We need responsive designs:
- Desktop: 1280px as width and height as required
- Mobile (iPhone 6): 1334 x 750 px (portrait and landscape)
User Flow
As a CEO viewing this application, I want :
- To view the list of leadership roles I already created
- To sort the list by the available fields
- A lookup search field to filter the list by name or role
- To be able to drill down to a specific role
- Access to personal/contact information of the employee filling that role (photo, email, phone, office location)
- To view this on my computer or mobile device
Required Screens :
01. Leadership List (Landing Page)
- The Leadership List landing page will give CEO users immediate access to the following informations :
001. Global Metrics
- We would like to see a few key visualizations on the page, that summarize the overall "health" of the company's performance goals, as tracked within this site.
- The visuals should be clean and attractive, but the real estate is consumes should be appropriately balanced with the Leadership List data table (explained below).
* Company-wide performance (defined by the CEO in Salesforce)
* Role Performance Status (accumulated average of all tracked roles)
* Employee Performance Status (accumulated average of tracked senior leaders)
002. Leadership List Data Table
- The data table is the primary functional focus of the Leadership Listing page , and will contain anywhere from 5 to 40 (max) rows.
- All data will likely load on page render (pagination not required).
- The default sort will be by "Rank".
- Each row should contain the following sortable fields:
* Rank (sequential numeration, beginning with "1") default sort
* Role (President, VP, Senior Director, Director). Example: President of North America, Director of Marketing, etc...
* Role Performance Status (visual indicator red/yellow/green) with trending arrow The trending arrow should point up or down, indicating the performance is improving or falling behind.
* Incumbent (Last, First Name)
* Incumbent Performance Status (visual indicator red/yellow/green) with trending arrow
* Type ("Value Creator" or "Value Enabler")
- It's very possible that a role may indicate a red (poor) status, while the incumbent (employee) performance is green (good).
- The performance goals for the role are different than the performance metrics for the individual within that role. The idea is that a CEO can quickly identify problems and/or discrepancies by seeing the performance status indicators.
- Keep in mind that CEOs are often older adults with declining eyesight. Text should be easy to read, and data should be framed by an appropriate amount of negative space. Don't scrunch everything together just to get it all "above the fold".
- Looking for clean layouts!
02. Performance Details Page
- Once the user clicks/taps on a row in the Leadership List page, he/she will drill down to the performance detail page for that role/incumbent.
- The key metric for this page is the role, as it will continue to track performance regardless of who the incumbent is.
- The page should include the following Role data :
* The data included in the Leadership List table, as well as:
** Value at Risk: ($ Amount)
** Jobs to be Done : Listing of up to 5 Role Responsibilities, Ordered by rank, Each has a performance visualizations & score
* Overall (accumulated) Role Performance Visualization & Score
- The page should also include the following Incumbent data:
* Performance Visualization, The data informing this visualization is based on HR data.
* Current Incumbent Information such as photo, email, phone, office location
* Compensation Salary
* Reference Check? (Y/N) -> If Yes, What type? (text field)
* Background Check? (Y/N)
* Assessment Score
* Performance Evidence historical evidence (line items) the incumbent has delivered for this role.
* Successor / Candidates
- The page should include the following historical data:
* Visualization (graph) that provides historical performance data for the company, the role, the incumbent (This visual might also indicate when a new incumbent entered the role. Example Visualization: http://www.highcharts.com/demo/combomultiaxes)
References
Below are some of the dashboard references, please DO NOT COPY, use it only as references to create your design :
- https://econsultancy.com/blog/62844-24-beautifully-designed-web-dashboards-that-data-geeks-will-love/
- http://thedesigninspiration.com/articles/25-innovative-dashboard-concepts-and-designs/
Target Audience
- CEO Company, head of an organization (top level management) as in the person who presides over or is in charge of an organization.
Judging Criteria
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as dashboard application
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.