Challenge Summary
Welcome to BrandX - Web Design Concepts Challenge! In this challenge, we are looking for [topcoder] community to help create set of interfaces for our new application. We are providing wireframes to help get you going. Help us to create look and feel for our intranet website.
In this challenge we are looking for DESIGN CONCEPTS on how this Application could work. What should the user see and experience when using the application?
Round 1
Submit your design for a Checkpoint feedback:
1. Dashboard.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final Design plus any Checkpoint feedback:
1. Dashboard.
2. Content Detail Page.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Description:
For this challenge we need your help in developing UI/UX design concepts for our new intranet page. Intranet means organization internal website, and its used to organize employees desktop so he can be more productive.
Note: BrandX is a codename for the client.
Supporting Documents:
- Branding Guideline (guidelines.pdf.zip)
- Logo (logo.eps.zip)
- Click thru wireframe (Prototype.zip)
Design Considerations:
- Please go through branding guidelines given.
- The App should be easy to use.
- The logo we have is a placeholder logo.
- REMEMBER: DO NOT COPY the wireframes exactly - The wireframes are meant to help guide you and let you understand the application the audience would like to see designed. Think about the user
experience/user interactions and show us your solutions! You can do something different or whatever you think make sense of this mobile application.
- Review the wireframes - they are very detailed and will help, but do not copy 100% the layout, be creative!
Screen Size:
Desktop: 1440px x 900px
Required Screens:
We have provided a click thru wireframe for you to use for this challenge in addition to the branding guideline document. Please do not copy the wireframes exactly.
01. Dashboard
dashboard.html
Header consists of the following elements:
- Logo.
- Search bar with autocomplete functionality.
- My Bookmarks:
-- Show how clicking outside the panel and an icon inside the panel closes the panel
-- Notice you have 2 kinds of bookmarks:
--- Intranet Pages
--- External Pages.
-- You can add a new bookmark.
-- You can edit an existing bookmark.
-- You can delete an existing bookmark.
- User identifier:
-- User photo
-- Welcome message with first name and last name.
- Main Menu:
-- My Dashboard
-- Communities
-- Channels
-- My Subscriptions
-- Employee Center
-- Manager Center
-- Help
Dashboard consists of the following elements:
- Breadcrumbs
- Alerts widget:
-- You can close alerts be clicking on x icon.
- News Widget
- Trending Topics Widget
- Community Updates Widget
- Channels Widget
Footer consists of the following elements:
- Copyright
- Terms of Use link
- Help link
02. Content Detail Page
content_page_with_image_video_gadgets.html
Detail page consists of the following elements:
- Breadcrumbs.
- Submenu:
-- Home
-- Blogs
-- Discussions
-- Members
-- More
- Page title
- Page Owner:
-- Username
-- email
- Options:
-- Share
-- Like
-- Comment
-- Bookmark
-- Subscribe
-- Subscribers
- Left Side Column:
-- About Widget (Optional)
-- Sitemap Widget
-- Members Widget
-- What else can we add here?
- Main Area:
-- Page content Widget
-- Condensed content widget
-- Blog Aggregator Widget
-- Gdrive folder name Widget
-- Comment Post Area
-- Comments Area
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Target User:
- BrandX employees.
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 mobile application
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.