Challenge Summary
Welcome to the Wiki Layout and Navigation Design Concept Challenge!
As you may have already seen, IBM has been running several projects here in our community - and the designs have been spectacular. We have a very straight-forward task for you: Design a Wiki Page Layout and Navigation. The community has stepped up and shown amazing creativity providing spectacular designs. Let's do it again!!
Round 1
01. Overview Screen
02. Data Center of the Future Screen
03. Collaborative Innovation Screen
04. System of Insight Screen
Round 2
01. Overview Screen
02. Data Center of the Future Screen
03. Collaborative Innovation Screen
04. System of Insight Screen
05. Digital Empowerment Screen
Other Pages (Templates Only) :
06. Project Dashboards Screen
07. Viewpoint Papers Screen
08. Our Accomplishment Screen
09. How We Work Screen
10. The Team Screen
Challenge Goals
In this challenge, we want to create a compelling design for IBM's Wiki page with particular focus on navigation. Let's face it, most Wiki's are somewhat dull (boring). Let's change that and deliver your best concept (Color, Layout, and Navigation). You can see our old WIKI pages in "old wiki screenshot.zip" attached in this challenge details page.
Design Concept Goals
- How should this WIKI screens graphically look and function well in our old WIKI engine?
- Review the brand - make sure your design is embracing their colors and brand - so it looks correct to the WIKI user
- Look through the listed screens and think about the user experience
- As a user of the WIKI - what should the priority features be?
- How quickly (when opening the application) could a user find what they are looking for?
- Put your Focus and Priority to the Navigation items / icons in this challenge.
Branding Guidelines
- Font, Colors, Style : Needs to follow the CIOLab design style.
- Size : 1024px with height adjusting accordingly.
- IMPORTANT!! This is for older Wiki application, so put into your consideration that your design should able to handle the following issues :
* No CSS supported in the WIKI
* Navigation must be Active and Inactive images/icons
* Colors should be kept in a text doc (background, etc. for final deliverables)
General Screen Layout and Content Requirements
- Request for a design for a Wiki page with navigation.
- The top page (overview screen) is a short overview with navigation to other pages with more detail (through tabs, or icons or other visuals, we prefer icons!!). The overview page needs to incorporate our logo.
- Pages 1-5 should each have an image or icon in addition to the text provided in each details, and perhaps also background images, so they don't appear too boring. Each should have its own distinct palette.
- The rest of the pages do not need images, just some color.
Screen Requirements :
01. Overview Screen
- Needs to incorporate our CIOLab logo somewhere on the page.
- Sub title, "The CIOLab is the innovation arm of IBM’s CIO"
- First Content :
"Our mission is to inspire innovation across the enterprise to advance IBM's strategic goals of cloud, data, and engagement :
* We invent novel solutions to solve IBM business problems.
* We apply new technologies to build the smarter enterprise.
* We cultivate and enable a culture of innovation for IBM."
- Second Content :
"Our strategic focus areas are:
* Data Center of the future, deploying a hybrid cloud model
* Collaborative innovation, accelerating innovation into
* Systems of insight, providing IBMers with intelligent assistance
* Digital empowerment, enabling the Internet of Things and a secure mobile infrastructure"
- Additional text (dummy) and links to other pages follow
02. Data Center of the Future Screen
- First Content :
"We lead the enterprise move to the cloud, leveraging Bluemix as a platform for creating composable solutions on the cloud. We are :
* Working with Software Group to develop the appropriate adoption models for Bluemix in the enterprise
* Creating governance tools and automation to enhance the consumability of the environment
* Serving as a model for the enterprise and for our clients"
- Second Content :
"We guide IBM on how to maximize the benefits of IaaS for a mixed portfolio of applications.
* Developing selection criteria and an approach to move the appropriate workload to Softlayer
* Creating a hybrid Cloud environment that utilizes both on-premise and off-premise data centers."
- Additional text (dummy) and links to other pages follow
03. Collaborative innovation Screen
- Content :
"We enable others to speed innovations into action by
* Accelerating the shift to Systems of Engagement by building 150+ mobile applications for IBMers
* Flipping IT upside down and letting the crowd decide what to fund
* Scaling development through fast development tools and creative models, including crowdsourcing and university collaboration"
- Additional text (dummy) and links to other pages follow
04. Systems of insight Screen
- Content :
"We provide IBMers with intelligence on the intranet by
* Transferring Watson Sales Assistant to the business, with support from the Watson business unit
* Providing personalized and contextual IT support through IT Help Central
* Enabling the w3 home page through an intelligent assistant"
- Additional text (dummy) and links to other pages follow
05. Digital Empowerment Screen
- Content :
"We make the environment secure, smart and interactive to help IBMers work better on IBM campuses and when mobile by
* Building Internet-of-Things (IoT) applications and infrastructure and preparing IBM for opportunites with IoT
* Continuing to enhance the IBM mobile eco-system, infrastructure and capabilities
* Continuing to improve IBM's security posture against new threats"
- Additional text (dummy) and links to other pages follow
Other Pages (Templates Design Only, please includes some dummy content) :
06. Project Dashboards Screen
07. Viewpoint Papers Screen
08. Our Accomplishment Screen
09. How We Work Screen
10. The Team Screen
Attachment :
- client_logo.zip
- old wiki screenshot.zip
Important Design Considerations:
- Keep things consistent. This means all graphic styles should work together.
- Pay attention to the suggested brand and colors
- All of the graphics should have a similar feel and general aesthetic appearance.
Target User
- IBM employees and Customer world wide.
Judging Criteria
- Concepts! How well you think about this application and graphically show us your ideas.
- Cleanliness of your graphics and design
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.