Challenge Summary
Welcome to The Risk-Adjusted Relationship Profitability Analysis Tool Design Concepts Challenge!
In this challenge, we are looking for your help in coming up with the initial design concepts for a responsive app that provides a user-centered experience.
We are providing you with wireframes and some look-and-feel samples which should help you in getting started with the designs! In this challenge, we are looking for DESIGN CONCEPTS on how this application could work, styled in accordance with our sample designs.??
Note: Please do not submit a colored version of wireframes as they are just meant to guide you, outline necessary screens, and further explain the application basics. You are highly encouraged to enhance the wireframes with your own design style / ideas / solutions during this design challenge.
Round 1
Submit your design for a Checkpoint feedback:
1. Accounts landing page. (Mobile + Desktop)
2. Accounts detail view. (Mobile + Desktop)
3. Recent Activity. (Mobile + Desktop)
7. Success/error/warning message. (Mobile + Desktop)
- 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. Accounts landing page. (Mobile + Desktop)
2. Accounts detail view. (Mobile + Desktop)
3. Recent Activity. (Mobile + Desktop)
4. Draft Runs landing page. (Mobile + Desktop)
5. Draft Runs detail. (Mobile + Desktop)
6. Draft Runs edit. (Mobile + Desktop)
7. Success/error/warning message. (Mobile + Desktop)
- 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:
A large financial institution needs a risk-adjusted relationship profitability analysis tool to feature a fluid interface that supports real-time edits and feedback, so that users can assess potential scenarios relating to projected risk-adjusted returns for potential clients and existing customers.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Content to include (shown on wireframe but detailed here):
- Header to include Logo, Account owner name (assume an already logged-in view), Global links to the application, User Manual, Methodology Reference Guide, and Additional Resources.
- User will be able to type in key inputs and will see totals adjusting in real-time as numbers are calculated.
- “Recent Activity” - user can view previous runs.
- Draft Runs – view of all the drafts.
- Draft Runs Detail – Draft runs can individually be edited, duplicated, saved, printed, and deleted.
- Draft Runs Detail edit – The intent is for users to click into each line item and change numbers to see how different factors impact the calculation. Users can add notes.
- Provide error/warning/success/system messages. These can be displayed over any screen in your design. As an example, feel free to place a success message on a screen to which the user just saved updates.
Design Considerations:
- Your design needs to be responsive; please consider that while designing the pages.
- Focus on the user experience of each page and make sure each page has a complete flow.
- Give importance to the overall layout and think about how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path, so we can see how the interactions fit together in the application.
- Please DO NOT COPY the layout as shown in the given wireframe; it is just a reference for content.
- Client is looking for an aesthetically pleasing interface consistent with look and feel samples.
- Easy, intuitive navigation between information screens, calculation screens, etc.
- For your reference, customer has provided an existing design that this app should match for a seamless experience across a suite of apps.
Supporting Documents:
- Wireframe (wireframe.zip).
- Font to use (bree-serif.zip).
- Style Examples (Style-Examples.zip).
Screen Sizes:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
- Desktop Resolution: Design for 1280px width and height as required.
Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp! It will be great if you can provide the landscape version.
Required Screens:
Please refer to wireframes before you start designing your solution.
1. Accounts Landing Page:
Please refer to accounts.html
-- User will be able to logout.
-- User will be able to view global links:
-- User Manual.
-- Methodology Reference Guide.
-- Additional Resources.
-- User will be able to type in key inputs, and will see totals adjusting in real-time as numbers are calculated.
Accounts table will have:
-- Account Name, if clicked it will show account detail view.
-- Exposure.
-- Outstanding Credit.
-- Last Run.
2. Account Detail View:
Please refer to account_detail.html
- From this view user will be able to see detailed information about the account Runs:
-- Runs, if clicked it will show Draft Run Detail view.
-- Date.
-- Owner.
-- Actions.
3. Recent Activity:
Please refer to recent_activity.html
- User will be able to view:
-- Run Name.
-- Account Name.
-- Account Owner.
-- Date Modified.
-- Actions, if user clicks on edit he will be redirected to Draft Run Detail edit.
4. Draft Runs:
Please refer to draft_runs.html
- User will be able to view:
-- Run Name, if clicked it will show Draft Run Detail view.
-- Revenue.
-- Expenses.
-- Expected Loss.
-- Taxes.
-- Capital.
-- Return on Capital
5. Draft Run Detail View:
Please refer to draft_run_detail.html
- User will be able to view:
-- Run Name; this can be edited here.
-- Revenue, if clicked user will be redirected to Draft Run Detail Edit view.
-- Expenses.
-- Expected Loss.
-- Taxes.
-- Capital.
-- Return on Capital.
-- User will be able to add his notes.
6. Draft Run Detail Edit View:
Please refer to draft_run_detail_edit.html
- Same as Run Detail view but user will be able to edit Revenue Filed:
-- Apply filters.
-- Enter Items data.
-- Save and cancel changes.
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 Audience:
- Senior commercial bankers at a large financial institution, typically a person who supports the customer’s relationship manager and is responsible for using the output of this tool to inform transaction structuring and relationship management decisions.
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.