Challenge Summary
Welcome to Gerber KOL Customer Community Storyboard challenge. Gerber, a subsidiary of Nestlé is looking to the community to create an application that allows companies and expert speakers to interact with each other. It allows users to share files and have discussions within the community. In this challenge we need your help to design the storyboards of the application.
Round 1
Following are required screen on Checkpoint Round:
- Home
- Upload Presentation
Round 2
All required screens including feedback on Checkpoint Round.
CHALLENGE OVERVIEW
The purpose of this challenge is storyboard production of the provided wireframe screens for the user’s desktop experience, based on the provided style guide. You do NOT need to provide mobile screens, however, keep in mind that the design should be modular/work well for a responsive/mobile-friendly website. We are looking for the Topcoder Design Community to help us develop our best user experience (UX).
DESIGN CONSIDERATIONS
We would like you to consider the following while creating your design.
General
This is a work application, where users login and perform daily work tasks, so keep the feel clean and professional. With this in mind, also design specifically for a work environment, including these key concepts:
- Generous use of whitespace.
- No photography, banners or other distractions (stock art may be used for user photo thumbnails on chatter, profile, etc only).
- Strong/clear concepts.
- Common/easily recognized icon concepts, where applicable.
- Minimalistic design elements.
- Crisp/clean text.
- Show the example of hover state on each button and link.
Wireframes
We are providing wireframe screens for all screens, however you do NOT have to simply “skin” the wireframes/you are free to use different ways to display elements, so long as it is logical and easy to use.
REQUIRED SCREENS
We need the following nine (9) screens to be designed for this challenge (below). Wireframes are provided for each.
1. Login. This is the landing page of the application where the user input the credential to login to the system. Create a screen that shows the message when the login is unsuccessful.
2. Recover Password. This screen is use to recover the password. Create a screen that shows the message when recovering password is unsuccessful (username/email is not found on the system).
3. Home. This is the landing page when the user successfully login to the system. Create a screen that shows the popular article with and without thumbnail.
4. Knowledge. This screens will list number of articles that is called the Knowledge. Shows the example how the list looks with and without thumbnail. Because there could be lots of articles, please create the pagination on this page.
5. Article Detail. This screen shows details of articles from Knowledge.
6. Speaker Decks/Chatter. This screen will use external widget. Just create a placeholder for it.
7. Upload Presentation. This screen shows the presentation that has been upload by the user. It also allows user to upload new presentation. Create a screen that shows the message when the presentation file successfully uploaded.
8. Profile. This is the profile of the user. Create two screens that shows profile in preview mode and editing mode. User is editing existing info here, so show some data in some of the fields - at the very least first name, last name and email address.
9. Search Result. This screen shows the search result of a query. The result will be vary from articles, users, chatter and files. Despite there is no example in the wireframe, create the screens that shows how the users and files will be shown in the search result page.
While we are only requiring 9 screens, feel free to provide additional screens to illustrate your concept.
BRANDING GUIDELINES
Size
Design the desktop screens at 1466px (W) by 768px (H) at 72dpi, where the content area is centered and you can see 50px of "white space" to both the left and right of the main content area (ie main content area is 1366px wide, centered in a 1466px screen).
Colors
You may use the client’s brand colors in these specific ways:
- Primary blue: #084b8e May be used for primary text and/or page elements.
- Secondary Blue: #9ab6d2 May be used for secondary text and/or page elements.
- Green: #1ab15d May be used only for clickable text and clickable page elements (links items).
- You may use white, black and all shades of gray however you choose.
- The overall feel of the site should be light and not dark - see the provided style guide for visual examples.
Typography
- Use Arial fonts for all content OTHER than logo.
- For the text logo, you may use Univers or another font, which is visually similar.
- Use variations in font size & all caps vs first letter capitalized for hierarchy.
- Avoid the use of bold text.
- Where there are "chunks" of text to be read (excerpts, paragraphs, etc), please use white or very light gray backgrounds and GRAY (not black) text, to reduce eye strain.
- Gray for text is best in the #333 to #666 range.
- Use comfortable padding on all text for a feel that is not "crowded".
TARGET AUDIENCE
Business professionals who are visiting the site for resources, as well as advice and related communication from colleagues.
JUDGING CRITERIA
- How well you cover the content included in the wireframes.
- How well you adhere to the brand guidelines overall look & feel.
- How clearly you give the user a sense of where to go/what to do next.
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 will be asked to update the style tile to reflect any new elements that you have added to the design. You may also 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.