Challenge Summary
Welcome to "CEO - Table Visual Presentation Models Design Concepts Challenge". For this challenge, we need your help to build a modern, interactively rich site that will allow our consultants to guide clients (CEOs and other senior leaders) through recommended organizational structures, represented by "tables", within their own business.
We are looking for DESIGN CONCEPTS on how this site could work. What should users see and experience when using the site, how should they navigate between views.
Round 1
Initial design for our review :
01. Login Screen
02. Table Hierarchy View Screen
03. Table Details View Screen
Round 2
All requirements as stated in challenge details with client feedback applied :
01. Login Screen
02. Table Hierarchy View Screen
03. Table Details View Screen
The site UI should be intuitive and simple to use, and also visually pleasing, reflecting the provided brand standards of the CEO Works brand. Designers might consider a single page experience (once logged in).
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)
4. table-more-details.zip, contains more information about "table" requirements.
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 Direction
- For this challenge, I would like to see what each page/view looks like on a desktop and an iPhone 6.
- 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, such as http://jmpressjs.github.io/jmpress.js/#/home or http://kirkas.ch/ascensor/#Home if you provide a design that requires this kind of UI functionality.
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 C-Level Executive or Consultant viewing this application, I want :
- To view all tables and related information for my organization
- To drill down into details of each table
- To see the full table hierarchy
- To see a dashboard of tables and related information
- To view contact information for all table members
- To access certain features from my mobile device
Screen Requirements :
01. Login Screen
- The login page should allow the user to log in. Provide common login fields such as username, password, login button, sign up button, simple logo for the apps, etc.
- If the user is a CEO Works consultant, he will need to indicate select the client table presentation he wants to open (additional fields or step).
02. Table Hierarchy View Screen
- The Tables Presentation model begins with the visual idea of a table design(the kind you sit at, check "CEO.works tables 2015.02.20.pdf" page 5 for design sample).
- The intention of CEO Works is to communicate a recommended business plan by creating a table for each of their clients major business objectives.
- A table is comprised of roles (employees) who will effectively "own" and be held accountable for that business objective. Each table has a lead role.
- Tables have the ability to create a child table, based on a secondary business objective. And those child tables can create children of their own, so there may be hierarchy of tables multiple levels "deep".
- The lead of every child table is a member of the parent table that created it. So the connection between tables across levels are represented by a role (employee).
- The idea is that every business objective is being led by a table, which is being led by an individual from a parent table. This provides both a line of sight and accountability that can be easily traced to senior management.
- Table Levels :
* Level 0 CEO - Table (no real connections to Level 1 tables)
* Level 1 President - Table contains the first "ring" of tables, all of which will have "child" tables in Level 2.
* Level 2 - Every table within level 2, is the child of a table in level 1
* Level 3 + continues the parent/child table pattern, and so on...Not to exceed Level 5.
- Some tables will have multiple child tables, some will have none.
- Tables may also have a "cousin" relationship with other tables in the same level. For now, this can simply be represented by a dotted line (or something similar), and just means that they have some kind of interdependency.
- So, the idea is that the initial view will show a hierarchical representation of the corporate table structure. Web, concentric circles, tree, etc...it's up to you.
- Will the UI allow users to zoom in/out, and pan across the hierarchical view, or will it use a more traditional approach? Will you leverage off canvas panels to reveal granular information? It's up to you.
- But once a table is selected, detailed information about that table should be made visible More information about this view is detailed below.
- More details can be found on "CEO.works tables 2015.02.20.pdf"
03. Table Details View Screen
- Once the user clicks/taps on a table, he/she will expose the detailed information for that table, including:
* Table Name
* Core (Business Objective/Strategic Choices) :
** Risks/Gaps, as they relate to each Strategic Choice (lack of capability, timing, funding, etc)
** Initiatives/Tasks to carry out each Strategic Choice
* Energy Level (frequency with which the table members meet)
* Roles (seats at the table), Incumbents (people filling those roles) photo, name, title, email, phone
* Business Objective Metrics (KPIs)
* Related Tables (parent or child)
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 a desktop and mobile site (responsive).
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.