Challenge Summary
Welcome to "ADM Investor Services Portal Web Application Design Challenge" In the following challenge we are looking to your design expertise and skills to think and conceptualize a portal web application which will provide account level functionalities to end users, show comparison between different investments for future date, current holdings, statements and provide research materials which can upgrade the overall knowledge base for end user to make better and profitable investment.
2) Landing Page
3) Account Snapshot
3.1) Account Snapshot: OAKTrading
3.2) Account Snapshot: Trade Action Simple & Trade Action Multiple
3.3) Account Snapshot: Sub/Related Accounts
4) Map
7) Statements
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype for Desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1) Enterprise Login
2) Landing Page
3) Account Snapshot
3.1) Account Snapshot: OAKTrading
3.2) Account Snapshot: Trade Action Simple & Trade Action Multiple
3.3) Account Snapshot: Sub/Related Accounts
4) Map
5) Research
6) Customer Center
7) Statements
8) Cash Managers
- Important: As part of your final submission, you must update your MarvelApp link from the Checkpoint.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Project Background
The portal web application will be developed for investors and admin users to keep track of their portfolio. This tool will be used by investors to maximize the return by managing the investments and performing SWOT analysis (Strength, weakness, opportunities and threat) at a given point of time.
This application will be developed as a responsive web application. So while this 1st challenge is focused on desktop, keep in mind that the winning design will be used as base design for next challenges which we will focus on mobile devices.
Consider that we are providing some very detailed wireframes that have been developed to provide the best possible UX, so use these wireframes as your main reference and stick to them as much as possible. Avoid changing too drastic the layout presented on the wireframes. This is a key requirement for this challenge, so stick as much as possible to the provided wireframes.
Screens/Features
Note: Please follow the wireframes as closely as possible. We are providing the screen features description as extra guidance and understanding, but don’t stray too far away from the way the wireframes provided are layed out. Also use the mock data in the provided materials to help know where data should be placed.
Please make sure your design includes the following screens:
1) Enterprise Login
- User to provide registered username and password in respective field
- Click on submit button to access the website
2) Landing Page
- This is the screen where users arrive once they successfully access this application.
3) Account Snapshot
- User Login into application, Landing page will be displayed and Click on Account snapshot icon from landing page or menu grid icon from menu bar.
3.1) Account Snapshot: OAKTrading
- OAK Trading will open up the popup.
- We have changed Buy/Sell as a Toggle switch, which take less cognitive load to capture what the user wants to do.
- Consider Office and Account as read only fields, we changed those to just labels without fields
Please refer to pages 9 and 10 in the wireframes for content reference.
3.2) Account Snapshot: Trade Action Simple & Trade Action Multiple
Simple:
- Here the user can click on more icons (the one with 3 vertical spheres) and choose the desired action. The option in a callout open opportunity is to add more options in the future
Multiple:
- The moment the user selects the checkbox, it triggers the multiple selection option (even if they select 1 checkbox) on checkbox selection we will enable the top right more action options, taking actions for all of those selected trades. The option in a callout open opportunity is to add more options in the future. While we enable the global more icon on top, it will disable all single line item options
Please refer to pages 11 and 12 in the wireframes for content reference.
3.3) Account Snapshot: Sub/Related Accounts
- Will open as a callout and show all the account relations.
- Each account will be clickable, user can go to any parent account from the callout
Please refer to page 13 in the wireframes for content reference.
4) Map
- Current account displayed on menu bar can be made favorite and removed as favorite by clicking on favorite icon
- Favorite account can be further accessed via the drop down menu in menu bar
- By clicking on menu grid icon various modules icon are shown which represents various modules in applications and clicking on these icon user will be redirected to respective module
- Sidebar switch button can be toggled for displaying the left side account menu
- When we search any account in side menu list of account is generated in the side menu which can be further selected to show detailed information.
- Theme of application will change when user toggle the theme switch button from avatar icon
- User can reset global and local setting by clicking the respective button from avatar icon
- Sign out option is provided to user in expanded avatar icon
- When user select any account from side menu or favorite icon on the menu bar, we see settled, current and net value of the investments within that account
- The information is in tabular format with rows:
- Settled row will have previous day settled information about the account which will be calculated once a day after the market closes
- Current row will show latest information of the account to the user
- Net row will show any positive or negative deviation between settled and current rows
- Map page also contains a table which reflects the information of account and investments done in that account. Transactions will be displayed. User can edit the amount in this table and forecast his holdings in future.
- Add Position button provides option for user to add or remove any investment which will help users predict his future account summary and net value.
Please refer to pages 14 and 15 in the wireframes for content reference.
5) Research
- By clicking on ADMIS icon will go to landing page
- Search bar can be used for searching various information like audio, video, text, research book, etc. about various commodities
- By clicking on menu icon various icons are shown which represents various modules in applications and clicking on these icon user will be redirected to respective module
- Theme of application will change when user toggle the theme switch button from avatar icon
- User can reset global and local setting by clicking respective button from avatar icon
- Sign out option is provided to user in expanded avatar icon
- By clicking on various commodity icon icons user will be redirected to respective commodity page which will contain various research materials about that commodity
- Future leader list can be toggled by:
6) Customer Center
- By clicking on ADMIS icon will go to landing page
- Menu list will show options like: or Profile or Account
- When an account is displayed on the text in menu bar favorite icon can be clicked to mark it favorite and not favorite
- Favorite account can be further accessed via the drop down menu in menu bar
- By clicking on menu icon various icons of various modules in applications are shown to end user and clicking on these icon user will be redirected to respective module
- Sidebar switch button can be toggled for displaying the left side account menu
- When we search any account in side menu list of account is generated in the side menu which can be further selected to show detailed information.
- User can reset local settings by clicking on reset local setting button in the user avatar
- Theme of application will change when user toggle the switch button from avatar icon
- User can reset global setting by clicking the button from avatar icon
- Sign out option is provided to the user in expanded avatar icon
- User can change some information when the account is selected from the menu list, when the user changes information it will be sent to the backend team for approval and status of the request will be shown in the list below this information
- When profile option is selected from the menu list, then general information like name and email address will be shown on screen. Any change in this information will generate a request to backend team and pending list will show these requests
- While selecting banking from the menu list, bank details are shown on the screen. These rows can be further expanded to see detailed information of the bank. Change will follow the same process which are required for change in customer center
Please refer to pages 25 and 28 in the wireframes for content reference.
7) Statements
- By clicking on ADMIS icon will go to landing page
- User has the option to select various reports from dropdown menu:
- Favorite account can be further accessed via the drop down menu in menu bar
- By clicking on menu icon various icons of various modules in applications are shown to end user and clicking on these icon user will be redirected to respective module
- Date picker can be used to see reports which are of previous days and months
- Sidebar switch button can be toggled for displaying the left side account menu
- When we search any account in side menu list of account is generated in the side menu which can be further selected to show detailed information.
- User can reset local settings by clicking on reset local setting button in the user avatar
- Theme of application will change when user toggle the switch button from avatar icon
- User can reset global setting by clicking the button from avatar icon
- Sign out option is provided to user in expanded avatar icon
Please refer to pages 29 and 30 in the wireframes for content reference.
8) Cash Managers
- For content and layout reference please refer to the provided supporting material.
Please refer to pages 31 and 33 in the wireframes for content reference.
Users/Roles
- Admins: Access to all Customers/Brokers, Admin’s are responsible for uploading Research documents, support, etc.
- Direct Customers: Direct Customer usually have 1 account and do the transactions accordingly. In another scenario Direct Customers can have multi accounts for Family members, etc.
- Brokers: Brokers handle Multiple accounts for various customers
Form Factors
- Please make sure your design supports these form factors:
- In-scope
Operating Systems
- Web Browsers.
Supporting Material
- We are providing very detailed wireframes, you should stick to them as much as possible. We are providing Mockup Data so you can use real information in your designs.
https://drive.google.com/open?id=1q6AxqXU0a7zV94Vs8Zb_A2gwxnrIQd48
- Please use the following branding material. Feel free to add any new colors that complement these:
https://drive.google.com/open?id=1Fof5pNH6gCy6RrFHkJwcCMf2fqZuDVOt
Final Deliverables
- All original source files.
- Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or as a layered AI file, Sketch or XD.
- Marvel Prototype
Round 1
For the first round provide the initial designs for the following screens:2) Landing Page
3) Account Snapshot
3.1) Account Snapshot: OAKTrading
3.2) Account Snapshot: Trade Action Simple & Trade Action Multiple
3.3) Account Snapshot: Sub/Related Accounts
4) Map
7) Statements
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype for Desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
For the final round provide the final designs for the following screens:1) Enterprise Login
2) Landing Page
3) Account Snapshot
3.1) Account Snapshot: OAKTrading
3.2) Account Snapshot: Trade Action Simple & Trade Action Multiple
3.3) Account Snapshot: Sub/Related Accounts
4) Map
5) Research
6) Customer Center
7) Statements
8) Cash Managers
- Important: As part of your final submission, you must update your MarvelApp link from the Checkpoint.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Project Background
The portal web application will be developed for investors and admin users to keep track of their portfolio. This tool will be used by investors to maximize the return by managing the investments and performing SWOT analysis (Strength, weakness, opportunities and threat) at a given point of time.
This application will be developed as a responsive web application. So while this 1st challenge is focused on desktop, keep in mind that the winning design will be used as base design for next challenges which we will focus on mobile devices.
Consider that we are providing some very detailed wireframes that have been developed to provide the best possible UX, so use these wireframes as your main reference and stick to them as much as possible. Avoid changing too drastic the layout presented on the wireframes. This is a key requirement for this challenge, so stick as much as possible to the provided wireframes.
Screens/Features
Note: Please follow the wireframes as closely as possible. We are providing the screen features description as extra guidance and understanding, but don’t stray too far away from the way the wireframes provided are layed out. Also use the mock data in the provided materials to help know where data should be placed.
Please make sure your design includes the following screens:
1) Enterprise Login
- User to provide registered username and password in respective field
- Click on submit button to access the website
- Email Address-(Text field)
- Password-(Text field)
- Keep me signed in-(Check Box)
- Forgot your password?-(Link)
- Sign in-(Button)
- Don’t have an account? Sign up now-(Link)
2) Landing Page
- This is the screen where users arrive once they successfully access this application.
- By clicking on ADMIS icon user will navigate back to landing page
- By clicking on menu icon various icons of various modules in applications are shown to the end user and by clicking on these icons the user will be redirected to respective modules
- Theme of application will change when user toggles the Theme switch button from avatar icon
- User can reset global setting by clicking the button from avatar icon
- Sign out option is provided to user in expanded avatar icon
- User can visit the respective module when he/she clicks on the various modules icon in the landing page
3) Account Snapshot
- User Login into application, Landing page will be displayed and Click on Account snapshot icon from landing page or menu grid icon from menu bar.
- When an account is displayed on the text in the menu bar, the favorite icon can be clicked to mark it as favorite or not favorite
- Favorite accounts can be further accessed via the drop down menu in menu bar
- When selecting particular currencies from the currency dropdown, the user will be shown all investments which are available in selected currency
- By clicking on menu icon, various icons of various modules in applications are shown to the end user and when clicking on these icons, the user will be redirected to respective module
- Sidebar switch button can be toggled for displaying the left side account menu
- When we search any account in side menu list of account is generated in the side menu which can be further selected to show detailed information.
- User can reset local settings by clicking on reset local setting button in the user avatar
- Theme of application will change when the user toggles the switch button from the avatar icon
- User can reset global setting by clicking the button from avatar icon
- Sign out option is provided to user in expanded avatar icon • User can see detailed information about the account by selecting the account from side menu search or his favorite accounts from menu bar
- Account information will contain settled, current and net value of the investments within that account
- Settled row will have previous day settled information about the account which will be calculated once a day after the market closes
- Current row will show latest information of the account to the user
- Net row will show any positive or negative deviation between settled and current rows
- When user hover over the column above detailed formula and description of column is provided to the user
- Table below this will have information about investments sorted by time and if any new investment is observed then content of that row will be emphasized by showing it in bold
- Each row in the list is expandable and when expanded will show all investment details in expanded transaction
3.1) Account Snapshot: OAKTrading
- OAK Trading will open up the popup.
- We have changed Buy/Sell as a Toggle switch, which take less cognitive load to capture what the user wants to do.
- Consider Office and Account as read only fields, we changed those to just labels without fields
Please refer to pages 9 and 10 in the wireframes for content reference.
3.2) Account Snapshot: Trade Action Simple & Trade Action Multiple
Simple:
- Here the user can click on more icons (the one with 3 vertical spheres) and choose the desired action. The option in a callout open opportunity is to add more options in the future
Multiple:
- The moment the user selects the checkbox, it triggers the multiple selection option (even if they select 1 checkbox) on checkbox selection we will enable the top right more action options, taking actions for all of those selected trades. The option in a callout open opportunity is to add more options in the future. While we enable the global more icon on top, it will disable all single line item options
Please refer to pages 11 and 12 in the wireframes for content reference.
3.3) Account Snapshot: Sub/Related Accounts
- Will open as a callout and show all the account relations.
- Each account will be clickable, user can go to any parent account from the callout
Please refer to page 13 in the wireframes for content reference.
4) Map
- Current account displayed on menu bar can be made favorite and removed as favorite by clicking on favorite icon
- Favorite account can be further accessed via the drop down menu in menu bar
- By clicking on menu grid icon various modules icon are shown which represents various modules in applications and clicking on these icon user will be redirected to respective module
- Sidebar switch button can be toggled for displaying the left side account menu
- When we search any account in side menu list of account is generated in the side menu which can be further selected to show detailed information.
- Theme of application will change when user toggle the theme switch button from avatar icon
- User can reset global and local setting by clicking the respective button from avatar icon
- Sign out option is provided to user in expanded avatar icon
- When user select any account from side menu or favorite icon on the menu bar, we see settled, current and net value of the investments within that account
- The information is in tabular format with rows:
- Balance (Balance of account)
- OTE (Open trade equity is for all future positions)
- TE (Total Equity is Cash balance + OTE)
- SOD (Securities On deposit)
- LV (Liquid value is TE + NOV)
- ME/MD (Margin Excess / Deficit is TE – FIR(Only Firm A) )
- LOV (Long Option Value)
- SOV (Short Option Value)
- NOV (Net Option value is LOV + SOV)
- FIR (Future Initial Margin Requirements)
- FMR (Futures Maintenance Margin Requirements)
- Settled row will have previous day settled information about the account which will be calculated once a day after the market closes
- Current row will show latest information of the account to the user
- Net row will show any positive or negative deviation between settled and current rows
- Map page also contains a table which reflects the information of account and investments done in that account. Transactions will be displayed. User can edit the amount in this table and forecast his holdings in future.
- Add Position button provides option for user to add or remove any investment which will help users predict his future account summary and net value.
Please refer to pages 14 and 15 in the wireframes for content reference.
5) Research
- By clicking on ADMIS icon will go to landing page
- Search bar can be used for searching various information like audio, video, text, research book, etc. about various commodities
- By clicking on menu icon various icons are shown which represents various modules in applications and clicking on these icon user will be redirected to respective module
- Theme of application will change when user toggle the theme switch button from avatar icon
- User can reset global and local setting by clicking respective button from avatar icon
- Sign out option is provided to user in expanded avatar icon
- By clicking on various commodity icon icons user will be redirected to respective commodity page which will contain various research materials about that commodity
- Future leader list can be toggled by:
- Volume
- Percentage Change
- Metals
- Energies
- Grains
- Indices
- Softs
- Meats
- Rates
- Currencies
- Full List
6) Customer Center
- By clicking on ADMIS icon will go to landing page
- Menu list will show options like: or Profile or Account
- When an account is displayed on the text in menu bar favorite icon can be clicked to mark it favorite and not favorite
- Favorite account can be further accessed via the drop down menu in menu bar
- By clicking on menu icon various icons of various modules in applications are shown to end user and clicking on these icon user will be redirected to respective module
- Sidebar switch button can be toggled for displaying the left side account menu
- When we search any account in side menu list of account is generated in the side menu which can be further selected to show detailed information.
- User can reset local settings by clicking on reset local setting button in the user avatar
- Theme of application will change when user toggle the switch button from avatar icon
- User can reset global setting by clicking the button from avatar icon
- Sign out option is provided to the user in expanded avatar icon
- User can change some information when the account is selected from the menu list, when the user changes information it will be sent to the backend team for approval and status of the request will be shown in the list below this information
- When profile option is selected from the menu list, then general information like name and email address will be shown on screen. Any change in this information will generate a request to backend team and pending list will show these requests
- While selecting banking from the menu list, bank details are shown on the screen. These rows can be further expanded to see detailed information of the bank. Change will follow the same process which are required for change in customer center
Please refer to pages 25 and 28 in the wireframes for content reference.
7) Statements
- By clicking on ADMIS icon will go to landing page
- User has the option to select various reports from dropdown menu:
- 1099s
- Equities
- Daily Statements
- Monthly Statements
- Favorite account can be further accessed via the drop down menu in menu bar
- By clicking on menu icon various icons of various modules in applications are shown to end user and clicking on these icon user will be redirected to respective module
- Date picker can be used to see reports which are of previous days and months
- Sidebar switch button can be toggled for displaying the left side account menu
- When we search any account in side menu list of account is generated in the side menu which can be further selected to show detailed information.
- User can reset local settings by clicking on reset local setting button in the user avatar
- Theme of application will change when user toggle the switch button from avatar icon
- User can reset global setting by clicking the button from avatar icon
- Sign out option is provided to user in expanded avatar icon
Please refer to pages 29 and 30 in the wireframes for content reference.
8) Cash Managers
- For content and layout reference please refer to the provided supporting material.
Please refer to pages 31 and 33 in the wireframes for content reference.
Users/Roles
- Admins: Access to all Customers/Brokers, Admin’s are responsible for uploading Research documents, support, etc.
- Direct Customers: Direct Customer usually have 1 account and do the transactions accordingly. In another scenario Direct Customers can have multi accounts for Family members, etc.
- Brokers: Brokers handle Multiple accounts for various customers
Form Factors
- Please make sure your design supports these form factors:
- In-scope
- Desktop Web Browsers
- Tablet portrait and landscape
- Mobile portrait and landscape
Operating Systems
- Web Browsers.
Supporting Material
- We are providing very detailed wireframes, you should stick to them as much as possible. We are providing Mockup Data so you can use real information in your designs.
https://drive.google.com/open?id=1q6AxqXU0a7zV94Vs8Zb_A2gwxnrIQd48
- Please use the following branding material. Feel free to add any new colors that complement these:
https://drive.google.com/open?id=1Fof5pNH6gCy6RrFHkJwcCMf2fqZuDVOt
Final Deliverables
- All original source files.
- Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or as a layered AI file, Sketch or XD.
- Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please check forum for proper MarvelApp requests.
- You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).
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.