Challenge Summary
Welcome to Styx - Key Management Administration Storyboard Design Contest. Recently we ran a few wireframe contest to get the wireframes for key management administration. In this contest, we need your help in coming up with the initial responsive designs based on the created wireframes.
About the Client:
Styx is the codename of the client, they are the leading global provider of key management systems. It offers innovative solutions for real estate, property management, automotive, and industrial sectors.
Round 1
You Initial Designs for review.
- All Mentioned Screens in Desktop View
Notes.jpg: Any comments about your design for the Client
NUMBER YOUR SCREENS (01, 02, 03 etc.) - it’s easier to review with the client.
Round 2
Final Designs (with all required feedback implemented) for review.
- All Mentioned Screens in Desktop View and iPad Portrait View
Notes.jpg: Any comments about your design for the Client
NUMBER YOUR SCREENS (01, 02, 03 etc.) - it’s easier to review with the client.
The Key Management System provides an interface for administrators to distribute our product and get information. There are thousands of administrators across the U.S., Canada, and international. These administrators are expected to: maintain all data, distribute inventory, gather payments, and provide informational reports to executives. Millions of people use the inventory that administrators distribute.
In this contest, we are looking for your help in creating responsive designs based on the below requirments...
IMPORTANT!! Design Considerations:
- The overall design should convey: warm, inviting, and professional.
- It should have lots of white space, blues, and muted greys for a more industrial look, along with a sprinkling of bright colors in distinct places (like buttons and icons) to make the page come alive by being both professional and warm/inviting.
- Buttons and action link color palate should maintain a flow that represents feelings or actions (For example: Green would mean positive (Add user), Grey would mean cautionary or inaction (Cancel), and red means negative (delete)
- Please avoid: Clutter (fill with lot of information without leaving any space), too busy, too small to see, distracting elements (like flashing or scrolling), inconsistent styles and colors.
- We are looking for you to design the Desktop View (1024 x 768 px) and iPad Portrait View (768 x 1024 px).
General Requirements:
Header & Navigation:
- We are looking for consistent header design to be used across the site, please use the attached logo in your headers.
- We would like to see icons used for every major features of the site like 'Keyholders should show a person, keyboxes should look like a padlock, office should show a group of people …etc...
- Do you think, we should have icons at the top-navigation level? Shows us your ideas here...
Icons:
- Icons should be cartoon style, clean, and obvious.
- We would like to see consistent icons used for every major features of the site (Keyholders should show a person, keyboxes should look like a padlock, office should show a group of people …).
Buttons:
- All Button designs should be Clean, rounded corners, and obvious
- For the actions (Search, Add New, Save, Cancel, Delete, Done, Skip, Filter, Print, Action to perform on selected buttons...etc...) that are repeated across the site, please use an icon before the button text (see the attached references to get an idea).
Page Requirements:
Below are the pages to be designed from the attached wireframe...
Login (Login.html):
- This is page where a user can login into the application, design this page.
- In your designs, please change the name of Message Channel box to "Messages".
- Click on "Login > Case 2: Login Error" and show the error view.
Home (Home.html):
- The is is main landing page after login, please design this default home view.
- Click on "All Activities" TAB and design this view.
- The "Messages" which is shown as the last block, please continue to use a placeholder for this.
Keyholder (Keyholders.html):
- In the top navigation, mouse over on "Keyholders" and click "View" to see this page, design this default view.
- Click on "Search" button to see the results - with the search results displayed, please show your designs in collapsed and expanded view (i.e. collapse/expand the search shown above the table).
Keyholder Details (Keyholder_Details.html):
- In the top navigation, mouse over on "Keyholders" and click "View" > click on "Search" > Click on any link in the displayed results.
- Please design a view with the default "Details" TAB selected.
- Click on "Edit" button to view the editing page, please design this editing view, come up with consistent styles for "Save, Cancel and Edit" buttons.
- Click on "Keys" TAB, design this view and click on "Action to perform on selected", please plan on how to design these action links shown within the drop-down.
- Please design the modal window that is shown on click in "Add Cooperating Key".
Reports (Reports.html):
- Click on "Reports" in the Top Navigation to see its landing page
- Please design this view with the 2nd Tab (Saved Reports) activated.
Report > Activity Report (Report___Activity.html):
- In the top-navigation, mouse over on "Reports" and select "Activity", please design this view.
- Click on "Search Tips" link shown in the filters and create this pop-up.
- Click on "Schedule" and create the modal window.
- Click Run > select "Case 1: If NO records are found" and design the error page view.
- Click Run > select "Case 2: If records are found" and design this view.
UI Elements:
Please create a page with all the below mentioned UI elements...
- Top Navigation with hover and selected style.
- Top Navigation with a drop-down and also show hover and selected style for the drop-down menus.
- "Commonly used buttons" with icon styles ("Search, Add New, Save, Cancel, Delete, Done, Skip, Filter, Print, Action to perform on selected" buttons etc).
- Show "Action Items" button/drop-down styles (hover, selected styles).
- Tabs (hover, selected styles).
- All form elements like text box, drop-downs, drop-down list view and list item hover, list box, checkboxes, radio buttons.
- Include "Search Tips" pop-up as shown in Reports > Activity Reports page.
Branding Guidelines
- Please use the attached logo in your designs (it is a png version).
- It should have lots of white space, blues, and muted greys for a more industrial look, along with a sprinkling of bright colors in distinct places (like buttons and icons) to make the page come alive by being both professional and warm/inviting.
Target User
- Administrators who manages the Key Management System
Judging Criteria
- How well you create your designs based on the wireframes.
- Cleanliness of your graphics and design.
- Design looks and User Experience.
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.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (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.