Challenge Summary
The goal of this contest is to create a pleasing and intuitive design for a web application that allows a user the ability to generate documents. Users will pick from template-based documents and can choose to use pre-defined data tables, charts and other elements to create the perfect proposal.
Your job is to design the look and feel of seven (7) specific application pages so that the prototype team can use your styles and apply them to the entire application. Your focus should be to create a professional, clean interface.
Primary Goal & Design Considerations
For this contest, you will use the provided PDF wireframe as your layout guide. Design considerations to keep in mind:
- You are NOT designing charts, graphs, etc. We have provided pre-defined data (tables and charts) for you to just drop into your application design as placeholders. Download "documentsamples.zip".
- Users will be interacting with drag and drop modules, so the design will be configurable.
- Editing, previewing and inserting documentation elements should be intuitive and easy.
- Please disregard the A, B, C circled alphabet notations on the wireframe as they do not apply to this contest.
- We need consistency with buttons, borders, arrows, etc. The wireframe does NOT represent the styling we want. Please give consistent, clean UI interface elements.
- Please stay close to the colors and general button style found in the "style.jpg" file.
Requirements:
IMPORTANT: Each of your seven screens must have a header, left-hand navigation and menu bars as defined on page 4 of the PDF. All modals will sit on top of this base-page and all standard screens will be embedded next to the left-hand nav.
Modals - 3 screens:
1. PDF page 6: "Select template"
- Template icon should be recreated from the example in the wireframe and used for all four template options.
- Use a placeholder for the preview document.
2. PDF page 7: "Select Document"
- Your design only needs to include 2 rows of data. We're just looking for styles of the row header, sort icons and scroll.
3. PDF page 8: "Select goals from predefined list"
Results Pages - 3 screens:
Each of these screens will use the layout from PDF page 9. Please use a thumbnail of this page as your "page preview" on the right, just as the wireframe example shows. Just drop in the provided placeholder graphs, data and tables from "document samples.zip". The content for each screen is detailed below.
1. Goals and Recommendations: Using the layout of PDF page 9, please show all of the content provided in PDF page 13.
2. General Information: Using the layout of PDF page 9, please show all of the content (including the page break element) provided in PDF page 10. Ignore the “notes” at the bottom of the page.
3. Goals Summary: using the layout of PDF page 9, please show all of the content provided in PDF page 11.
Rich Text Editor - 1 screen:
1. Text editor shown on PDF page 12.
- All text editing will have a RTE (rich text editor) interface, and you need to provide this design. You should redesign the icons but they do not need to look that different from what you see here. We’re not concerned with new/improved icons - just make them clean.
Target Audience
The target audience will be Financial Advisors.
Judging Criteria
Your submission will be judged on the following criteria:
- Overall, the client wants to look simple, clean, light, and impressive storyboard.
- User Experience
- Completeness and accuracy of the storyboard as defined in the requirements.
- The quality of your design as well as following the provided guidelines.
- How well you follow wireframes layout OR provides new idea about how the screen must looks.
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
All requested Contest Requirements stated above in PNG files.
Source Files
All layered, editable PSD, AI or EPS source files from the submitted design.
Final Fix
As part of the final fixes phase you may be asked to modify your storyboard.
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.