Challenge Summary
Welcome to "Grant Applications and Awards Tracker Design Challenge". In this challenge, we are asking for topcoder community helps to comes up with a new look and feel for our Grant web applications. The project is for a Grant tracking application that we will build into Salesforce.com. At the end of this challenge, we are looking for a nice and professional design that able to improve the UI/UX of this apps. Join Us NOW!
Round 1
01. Login Screen
02. Grant Manager - Dashboard Screen
03. Staff Member - Dashboard Screen
04. Manage Proposal Screens
05. Manager Award Details
Round 2
01. Login Screen
02. Grant Manager - Dashboard Screen
03. Staff Member - Dashboard Screen
04. Manage Proposal Screens
05. Manager Award Details Screen
06. Manager Proposal Support Screen
07. Manager Proposal Article Screen
08. Manager Add Article Screen
09. Manager Grant Reporting Analysis Screen
10. Manager Search Result Screen
11. GUI Kit Asset Screen
The project is for a Grant tracking application that we will build into Salesforce.com. This application will help users track grant applications and awards. We already have wireframes for this application from our previous challenge and now need your help to create the look and feel.
User story:
- Bob is a Grant Manager, he should have the ability to see various cuts of information regarding submitted proposals and Awards made, specifically a view that describes all proposals submitted against their respective purview (specialization).
- Adam is a staff member, he can share and collaborate on articles or the proposal process in realtime, develop and share contents.
Branding Guidelines
- No branding guidelines, feel free to use your creativity here.
- We would like to see you to come up with nice color schemes.
Screen Sizes
- Desktop : 1280px width and height as required.
- Tablet : 1024px width and height as required.
Screen Requirements :
01. Login Screen
- Wireframes reference "Login"
- Provide usual form for login.
- Provide design for login error condition
- Think the best UI/UX for this screen.
02. Grant Manager - Dashboard Screen
- Wireframe reference "Grant Manager Dashboard"
- Needs great graphic creation for the graph in this screen.
- Feel free to propose new graph/chart design that sufficient for this kind of layout but still use the chart content from wf.
- Alert and Reminders icon needs to be create professional so user can be aware of these once view the screen.
- Think the best UI/UX for this screen.
03. Staff Member - Dashboard Screen
- Wireframe reference "Staff - Knowledge Base"
- Staff member will see all articles for the knowledge base in this screen.
- Don't forget to provide the filter design and sort section (click the buttons to see the layout).
- Create dummy placeholder image in case the articles don't have any images to be inserted. Provide small and big dummy images placeholder in your design.
- Think the best UI/UX for this screen.
04. Manage Proposal Screens
- Wireframe reference "Manager - Proposal - Table" and "Manager - Proposal - Tile"
- We need both table and tile view created for this screen.
- Don't forget to create filter section and any popup necessary for this screen.
- Flags and Support Request have additional layout when being hover, please provide design for these interactions.
- Think the best UI/UX for this screen.
05. Manager Award Details Screen
- Wireframe reference "Manager - Award Details"
- There are 5 tab design needs to be create in this screen, they are :
* Award Details
* Support Requests
* Compliance Issues
* Collaboration - Knowledge Base
* Comments
- Under support and collaboration tabs, there are several additional popup needs to be create such as for resolve request, reject request (support request tab), add article and remove article (knowledge base tab)
- Think the best UI/UX for this screen.
06. Manager Proposal Support Screen
- Wireframe reference "Manager - Proposal - Support Request"
- Needs better layout arrangement to showcase the comments section.
- Resolve and Reject request buttons got popup interactions that needs to be create.
- Think the best UI/UX for this screen.
07. Manager Proposal Article Screen
- Wireframe reference "Manager - Proposal - Article"
- Needs better design for comment section so user can navigate the comments part easily.
- Think the best UI/UX for this screen.
08. Manager Add Article Screen
- Wireframe reference "Manager - Add Article"
- Please provide error condition for this screen.
- Think the best UI/UX for this screen.
09. Manager Grant Reporting Analysis Screen
- Wireframe reference "Manager - Grant Reporting Analysis"
- Please create several graph creation for this screen, navigate the wireframes to see several graph layout ideas(budget status report, grant reporting status)
- Think the best UI/UX for this screen.
10. Manager Search Result Screen
- Wireframe reference "Manager - Search Results"
- User will be able to see search result in this screen.
- Feel free to create alternative layout for the search result if you think it can improve the UI/UX part.
11. GUI Kit Asset Screen
- We need you to capture and save all design elements in one external file called GUI-asset.psd
- All form elements (input, checkbox, radiobox, selectbox, button, link, etc), table header, heading and text, etc needs to be added here as guidance in next development phase
Important:
- Keep things consistent. This means all graphic styles should work together.
- Make sure you design the mobile and tablets using Grid system.
- All of the graphics should have a similar feel and general aesthetic appearance.
Documentation :
- Wireframes.zip
Target Audience:
- Grant managers or Program Officers.
- Grants Staff.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
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.