Challenge Summary
Welcome to the TIS - IT Landing Page Wireframes contest. The goal of this wireframe contest is to design an easy-to-use, efficient browser-based application that will be used to create storyboard design and explains the page/elements flow of TIS - IT Landing page.
Round 1
Initial TIS - IT Landing Page Wireframes
1. Page Layout
2. Navigation Bar
3. Main slideshow
4. Discover Navigation
5. Page Footer
6. Comments and Feedback
Notes : Any comments about your wireframe, make sure all pages have correct flow!
Round 2
Final TIS - IT Landing Page Wireframes
1. Page Layout
2. Navigation Bar
3. Main slideshow
4. Discover Navigation
5. Page Footer
6. iPad browser
7. Comments and Feedback
8. Kontiki video
9. Detail pages
Notes : Any comments about your wireframe, make sure all pages have correct flow!
Contest Details
Our client need create IT landing page and some details pages on this wireframe contest. In the end of this contest we need get initial wireframe pages & workflow like stated more details below.
Reference Website : http://www.microsoft.com
This application will be developed using DotNetNuke
Features we would like to incorporate:
1. Page Layout
- Webpage must include a search feature at the top of the page
- This should also include a search result page
- There should be an area in the top left for a logo
- Bread crumb links on pages to navigate back to the homepage
- At Homepage, Logo, navigation, and search similar at the top of the page (5-homepage-header.png)
- Website should use 1024X768 resolution
2. Navigation Bar
Screenshot Reference: 1-nav-bar.png
- Navigation bar with expanded detail feature when clicked on
3. Main slideshow
Screenshot Reference: 2-slideshow.png
- News and Communication slideshow style banner
- Would like the banner on our site to smaller in order to save some real estate
- Include the functionality where the picture automatically rotates after 10 seconds
- Include the functionality where the user can click one of the circles in the bottom right to manually switch the picture
4. Discover Navigation
Screenshot Reference: 3-discover.png
- Would like to imitate the “Discover” navigation bar and use it as a “Quick Links” Navigation bar
5. Page Footer
- The bottom of the page should include an area for additional IT and contact information (4-footer-microsoft.png)
- First reference below is from Microsoft.com while the second is from saphana.com/docs/DOC-2897 (4-footer-saphana.png)
6. iPad browser
- Need ability to view on an iPad browser
- No flash on iPad
- Ipad navigation should be consistent with desktop/laptop navigation with no flash or critical information on hover over links.
7. Comments and Feedback
- Comments and Feedback web form that will send to a service email address
- Fields should include:
-- Subject
-- Category (Drop down list)
-- Text field
-- Submit button
-- Clear/reset button
- All fields are required
8. Kontiki video
- Need ability to embed Kontiki videos.
- Kontiki videos are similar to YouTube videos and are embedded in iframes. We will not need any special pages around creating the videos from a wireframe point of view.
- Site Reference: http://www.kontiki.com
9. Detail pages
Screenshot Reference: 6-details-page-header.png
- When the user clicks through to the detail page, the top of the website should shrink the logo and have an area for the title of that specific detail page
- Types of Detail pages: You need create separated pages:
- Single content area
- Columned content area
- Table content area
- Content area separated by rows
- Content area with a map included
- All Detailed pages should have the ability to add pictures into the text areas
- We will also have different information displayed to different users depending on their location
- Search results page
- Sample Content area
- We will be using DotNetNuke’s Blog, FAQ modules. They are provided as a plug in from DotNetNuke
- The actual content for the Blog and FAQ module are out of scope and the wireframe can just show a placeholder for now
Target Audience
- Business Employees looking for IT Service and Support Information
Judging Criteria
- Our main concern is to have great User Experience for the the TIS - IT Landing Page User Functionality.
- Completeness and accuracy of the wireframe as defined in the attached requirements.
- How well your wireframes provide a consistent user flow
- How well you implement the required data and any suggestions, interactions and user flow you recommend (provide any notes or comments for the client)
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
Wireframes should be built in HTML, Axure, MS Visio or OmniGraffle. The resulting files are not critical in this contest. The most important point is that all the content is listed and the pages are linked together to show page flow. Keep your source files out from this submission folder.
Source Files
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file.
Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths.
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.