Challenge Summary
Welcome to the Innovation Site Redesign Concepts Challenge! In this challenge we are looking for your best ideas, layouts and concepts to redesign an existing site and make it more modern, engaging and innovative. We are looking for eye catching designs and a WOW factor. We’ve included some ideas and input to get you started and thinking in the right direction.
We need you to pull it all together and create something amazing! Have fun!
Round 1
Submit your initial designs for Checkpoint Feedback
00. Main Navigation
01. Landing Screen
02. What is Innovation landing page
03. Detail Page for What is Innovation section
04. Persona Landing Screen (3 - Manager, Innovator, Leader)
05. Cards Detail Screen
06. Events Screen
07. Events Detail Screen
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required designs with all Checkpoint Feedback implemented.
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Background and Goals
- Create a digital marketplace where staff and internal thought leaders can engage to continue to build a Culture of Innovation.
- Leverage existing collateral, without re-creating/duplicating content, to promote staff awareness, buy-in/and ownership within the Firm’s Culture of Innovation, and demonstrate to staff how their actions to own such a culture impacts their clients’ success.
- Be the Center for Innovation Services
- Allow staff to engage in a continuous dialogue around what is Innovation within the Firm, and what does it mean to staff to be innovative for their teams and clients.
User Roles
Innovator:
- Find resources that help me develop an idea
- Get feedback on an idea
- Understand our products lifecycle and alternative revenue streams
- Participate in an innovation event or program
- Crowdsource a solution to a problem
Manager & Leader:
- Sell innovation to clients
- Develop an external partnership
- Understand our products or alternative revenue streams
- Invest in external opportunities
- Crowdsource a solution to a problem
- Develop critical technical talent
Branding and Design Requirements
The site has open branding. We are looking for your best modern, clean, engaging and innovative ideas. Think about unique ways to layout content and interact with it. Think about transitions/ animations and how things react when you scroll down the page or click on items.
Please use the following mood board for your design inspiration and direction. We’ve included a design direction document with screen requirments and wireframes for you to base your design off of. Remember...don’t just color in the wireframes. Look at the provided examples and expand off of the provided wireframes. We’re looking for clean modern design!
We are targeting desktop for this challenge, but think about how and make sure your designs can work in a responsive environment; tablet and mobile.
Screen Resolution
- Desktop: 1024px wide (height can expand with content)
Inspiration: (please make sure you DONT COPY)
Design Direction Site
- We’ve included a few links to some sites that we like. These has a similar look and feel and “mood” that we after. We like how the content is being displayed and presented.
Example 1: http://html5up.net/uploads/demos/overflow/
- Like how the content is displayed. This could work for more of the Content Screens
Example 2: http://html5please.com/
- Like how the search/ filtering is working in this example.
- This would be nice for the search and search results screen
Example 3: http://www.creativebloq.com/web-design/parallax-scrolling-1131762
- Maybe think about ways to utilize parallax scrolling or how content is transitioned onto the screen.
- This is not a requirement but something to think about and be inspired by
- This would probably be best utilized on the homepage where we want that WOW factor.
Example 4: http://handsome.is/Like the content spacing
- Minimal lines, content focused
- A good example of the look and feel that we like
Example 5: https://dribbble.com/shots/2234210-GYSTNow-Landing-page/attachments/416085
- Like the font
- Good example for landing page layout
https://dribbble.com/shots/2232553-ROOT/attachments/415640
- Another example of a landing page layout
Inspiration Doc: We’ve included a few other inspiration layouts and designs to get your thinking in the right direction.
- For right direction, please see example 4
Required Screens
00. Main Navigation
Should include the following high-level nav items (See Design Direction document for architecture suggestions)
- Home
- What is Innovation?
- - - Defining Innovation
- - - Innovation Programs
- - - Innovation Tools
- - - Innovation Events
- - - Playbooks & Guidebooks
- - - Innovator (Persona driven content)
- - - Manager (Persona driven content)
- - - Leader (Persona driven content)
- - - Events
- - - Search
- - - Sitemap
01. Landing Screen
This screen should be an introduction to the Innovation site. It should have a certain “wow” factor and be a dynamic scrolling page that gives a user a top level introduction to the content of the innovation site. It should include a unique UI element that allows a user to identify themselves as a Manager, Leader, or Innovator and directs them towards contextual and relevant content.
Consider a “parallax” style page and use eye catching imagery and typography to guide the user into more detailed sections of the site.
- Serves and the first screen of the site
- Should have a wow factor for the viewer
- Think of unique ways to display the content. Make sure things still remain user friendly
- We don’t have direct content for this page, but think of it as a way to serve of snippets of content that will be on the other page (What is Innovation, How to be Innovative, etc.). Should have a Learn More or Explore type of button that links deeper into the site
- Could also have upcoming events, most recent article, etc. Think of the Landing as a simple “dashboard” for the rest of the site.
- This page should be highly visual with good imagery that encourages a user to explore deeper into the site.
02. What is Innovation landing page
This page should be a secondary landing page and be an introduction into the What is Innovation section. This section of the site is mostly educational and contains rich content around innovation.
Also consider a highly visual scrolling page w/ links into the 3rd level content areas for this section.
- Example content sections: Defining Innovation, What Innovation Programs Exist, Tools that can help you innovate, plan to attend innovation events, Become Innovative thru playbooks and guidebooks
- Use the inspiration as your input/ direction
- - - http://handsome.is/why-handsome/
- - - http://handsome.is/services/
03. Detail Page for What is Innovation section
Clicking into one of the content areas for What is Innovation, the user will be taken to a detail page. We’re looking for you to design a template page for this detailed content. Include sections for images, videos, resources, contacts, tools, playbooks, and guidebooks.
- Example content sections: Defining Innovation, What Innovation Programs Exist, Tools that can help you innovate, plan to attend innovation events, Become Innovative thru playbooks and guidebooks
- This is various types of content: lists, article briefs, Links, PDFs (with cover images), Videos, etc.
04. Persona Landing Screen (3 - Manager, Innovator, Leader)
For these landing screens we are looking for you to explore the best way for our target users and personas to navigate use case scenarios that house content solutions that they are looking for. The idea behind this page is very much driven by our target users identifying with a particular use case and clicking into it to explore the content in more detail. The detailed content will include programs, tools, playbooks, contacts and other content that will solve that particular use case scenario.
- Consider using “cards” in your design section.
05. Cards Detail Screen
After a user has identified with a use case on one of the Persona Landing screens...they click a “card” or use case and is brought to a detail screen. This screen can be similar to your detail screen from the What is Innovation section. It should include similar content items.
06. Events Screen
For this screen we are looking for your innovative ideas on how to display upcoming innovation events. Are you exploring a calendar UI. Can you click on an event to get more detailed information? How are you using imagery to add to the visual appeal of the events section?
- List of events and their relative data: Title, date, time, location, etc.
- Inspiration:
- - https://dribbble.com/shots/2227334-Social-calendar-app-mobile
- - https://dribbble.com/shots/1829086-Health-App-Calendar/attachments/304293
- - Though this is a health app, I would imagine the week view to have events listed under each date
Functionality
We will be looking, in the future, to pull in social media content, such as Yammer
- Inspiration: https://dribbble.com/shots/2182993-Social-calendar-app/attachments/402539
- Would like the default view to be for the week
- View options - Day/Week/Month
- Ways to search/ filter. See Example 2 above. Really nice search functionality with dynamic updates show below the search field.
- Maybe multiple views or ways to view the events; grid view, list view, by date, etc.
- Featured events or highlighted events.
- Any other ideas of ways of displaying this type of content you have.
07. Events Detail Screen
Detail template for events detail. Description, dates, register, etc.
08. Search and Search Results
- As a universal element...it would be nice to have a site search and search results page to help users find content in the IBC site.
- Nice clean and simple search functionality.
- As a user starts to interact with the simple search, the search results dynamically start appearing on the screen.
- Results organized by content type.
09. Sitemap
- A sitemap that is based off the persona/use cases that we already have is best
- We are open to your ideas on what is the best way to display this content
- It should be concise and straightforward. The user should be able to quickly see what the content is.
- Simple is better.
Target Audience
- Innovators, managers and leaders
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.
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 file.
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.