SIA - Smart Investment Advisor Mobile Web App Design Challenge

Welcome to "SIA - Smart Investment Advisor Mobile Web App Design Challenge". In this challenge, we are looking for your help to create the best possible UI/UX for our new smart investment advisor application that empowers users of financial/brokerage sites to explore, design, optimize and trade their portfolios.

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Round 1

Submit your initial design for a Checkpoint Feedback:
1) Build Page
2) Trade Page
3) Report Page

• As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt. 
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates:
1) Build Page
2) Trade Page
3) Report Page
4) Help Page

• As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

BACKGROUND OVERVIEW

• We are building a Smart Investment Advisor platform that empowers users of financial/brokerage sites to back-test, find new ideas for, optimize and trade their portfolios, based on proven theories pioneered by Nobel Prize-winning economists
• Traditional financial/brokerage sites only allow users to see price charts and other data of individual stocks, but do not provide a holistic view of the portfolio
• Typical "robo-advisors" in the market offer only generic financial budgeting and one-size-fits-all products, but do not offer any portfolio analytics tailored to the user’s own stock ideas
• On the other hand, professional asset managers enjoy the advantage of analytical tools that help them understand the interactions of stocks in a portfolio context, thereby creating an optimal portfolio structure that achieves the best risk-adjusted return.  However, such capabilities have not been available to retail investors
• We aim to bring this power to retail investors, whether they are users of financial news portals or account holders of online brokerages.  We will make these tools intuitive, simple and enjoyable to use
• The platform is offered as a B2B2C model, as we enable our financial/brokerage site partners to offer such analytics to their users/customers
• The initial market is Hong Kong, but this app will support multiple securities markets in multiple currencies.  Securities may be equities, ETFs, or any instrument with a ticker code. Implementation will be based on html5

USER FLOW

• The Smart Investment Advisor platform is hosted in the cloud and delivered as a web app that enables individual users/investors to:
• Explore how the portfolio would have performed under various market scenarios ("what-if" stress tests based on historical bear, base and bull market scenarios)
• Understand the factor exposure of their portfolio, relative to benchmarks
• Perform screening to identify stock ideas that are favorable under various criteria (e.g. good fundamentals, good momentum)
• Understand current market risk sentiment based on established risk indicators
• Add, remove or change the weight of securities and see how this would affect overall portfolio return/risk profile; securities are imported from the user’s actual brokerage account
• Optimize the portfolio according to the "Modern Portfolio Theory", showing what combinations and weights of securities may achieve the best return/risk for the portfolio
• Automatically generate a trading list to execute all necessary trades to achieve the target portfolio composition, taking into account constraints such as available cash, trading costs, round-lot requirements, etc.
• Customize key parameters through a settings page - this includes, for example, min/max number of securities in the portfolio, min/max weight of each security, min percent change in securities weight to perform rebalancing trade (to avoid excessive trading), assumed transaction cost, default price limit (as percent above/below market price), etc.
• This platform will be fully integrated with an existing web-based financial portaL/trading platform. The app will obtain portfolio information from, and send trading instructions to, an existing trading system via API
• Operationally, every day the portfolio advisor engine takes a data feed from the data vendor (e.g. Reuters, Bloomberg), perform a set of proprietary calculations on such data, and store the data in a database to be hosted in a server.  The app obtains data from this database to power the portfolio analysis for the web app.  The engine also provides an algorithm admin portal where authorized staff may input custom snippets of code that perform proprietary calculations in C#, C++, Python.  This ensures that certain analytics IP will be secure.  It is expected that the portfolio analytics will be implemented in C#, C++, Python, using various analytics libraries.  We have researched how to perform such portfolio analytics, and developed a detailed methodology for how all the calculations should be done, as exemplified with an Excel spreadsheet and/or C#, C++, Python code.

CHALLENGE GOAL

• The goal of this challenge is to define and develop the best UI/UX screens for our new Smart Investment Advisor mobile app. 

DESIGN CONSIDERATION

• Convey a TRUSTWORTHY image - professional, institution-grade, reliable
• DELIGHT the user - intuitive, simple, clean look-and-feel, offer thoughtful touches
• EMPOWER the user - give the user confidence to “do-it-myself”, experiment and be in control
• Keep the user ENGAGED - entice frequent visit, make it habitual to use the app daily
• Best Practice for Mobile Web App
• Easy to navigate the investment process, encourage iterative experimentation
• Intuitive for the user; should never be left asking "what do I do next?"
• Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)

CHALLENGE FORUM

• If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum: https://apps.topcoder.com/forums/?module=ThreadList&forumID=680571

SCREEN REQUIREMENTS
For this challenge, we need you to create 4 main screens:

1. Build Page, is one vertical scrolling page that shows capabilities for the user to 'Explore', 'Design' and 'Optimize' their portfolio analysis process using a different variation of modules available in the application and easily move back and forth since the portfolio analysis process is iterative. Modules needed in this page is from  01 - 09
2. Trade Page, is one page where after the user happy with the finalized portfolio they were doing in the Build page, they can go to this page to execute his trades in real life. Modules needed in this page is from 10 - 11
3. Report Page, this page will use Module 12 mentioned below and this is for our internal use 
4. Help Page, this page will use Module 13 mentioned below and this help module could appear on any other pages above as needed

MODULE REQUIREMENTS
For this challenge, we are looking for the below modules to be designed/considered in your concepts. The module functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.

00) General Requirements

• We will need to create a UI Design Kit for the application (You just need to extract each design you've created and put them into one single page as UI KIT)  
• Easy to customize (Needs to support the color/font of different partner sites - Generic feeling)
• The design should be robust, modular and scalable
• Each screen is a vertically scrolled page that consists of multiple modules
• Different modules must show a consistent look-and-feel
• Each module has its own expand/collapse mechanism – either always shown, manual expand/collapse, or auto expand/collapse
• Header bar includes top-level menu, partner logo and user profile icons
• Help widget tells the user what to do next if user is stuck
• Help icon to show additional information as needed
• Keep things consistent. This means all graphics styles should work together
• All of the graphics should have a similar feel and general aesthetic appearance
• Please create the following chart types as part of your design and UI Kit:
  • Test Portfolio - line chart
  • Monitor Market Risk - bar or column chart or other UX display
  • Generate Ideas - XY scatter chart
  • Optimize Portfolio - line chart (with scatter chart overlay)
  • Adjust Portfolio - bar chart (but need to support drag-and-drop, so perhaps not a real chart)
  • View Exposure - bar chart

01) View Alert
See alerts and hints on next steps

• Short message area shows 1-2 key alerts, which may be comments about the portfolio, or what the user should do next
• Message area is displayed only when there is a message available; the area automatically collapses when user scrolls down the screen, and only shows up when at the very top of the screen

02) Test Portfolio - required for 1st Round
Stress-test a portfolio to see historical and forecasted performance

• Chart shows back-test performance (percent growth of portfolio value) for selected time frame, and a forecast during a forecasting period (equal to 1/5 of historical time frame)
• Chart includes chart title, chart labels (horizontal axis = years; vertical axis = percent) and legend for each line; vertical axis should be shown on the right side
• Chart displays up to 3 lines (sets of data) of differentiable colors – for the initial portfolio, revised portfolio, and benchmark
• Forecast period shows possible range of value for two levels of probability (lighter shade = lower probability; darker shade = higher probability)
• User can select which period in history to use as basis for forecasting if the base case scenario is selected (default is the entire history); this is done by touching the chart area to specify beginning and ending point of period; selected period should be highlighted
• User can customize time frame (e.g. 1, 2, 3, 5, 10, 15 years)
• Summary shows key performance data (return, volatility, Sharpe ratio) for each of the initial portfolio, revised portfolio and benchmark; color of fonts should match that of chart lines for easy reference

03) Monitor Market Risk
View risk indicators to assess market risk environment

• Chart shows risk score for 4-6 risk indicators
• Each indicator's score may range from 0 (low risk) to 5 (high risk)
• Summary score shows average score of all indicators
• User can click on each metric to see expanded view showing some text to explain how the score is determined

04) Generate Ideas - required for 1st Round
Generate new ideas using a factor screening tool

• There are two views of the chart – normal view and expanded view
• Normal view chart shows results of factor screen as a scatter plot (horizontal axis = fundamental factor, vertical axis = momentum factor), with the center (0,0 coordinate) equal to the 50th percentile for both axis
• User can select which fundamental factor to use (choose one from 5-10 choices in a menu)
• User can select which momentum factor to use (chose one from 5-10 choices in a menu)
• Chosen fundamental and momentum factor should be indicated on its respective axis
• Each dot (or equivalent) represents one security; security ticker may be placed next to dot or inside small text box
• Different colors indicate type of position (e.g. position within existing portfolio, portfolio composite, selected position)
• User can click upper-right hand corner (i.e. the top 10 percentile area, indicated by some highlight icon) of scatter plot to show expanded view chart
• Expanded view chart shows both positions within existing portfolio (if any) plus new securities not currently in portfolio (use a new color to indicate these)
• Expanded view chart still supports the two menus to choose fundamental factor and momentum factor, plus an extra menu to choose Sector (which is a screening mechanism to reduce the number of results)
• Action to show expanded view or return to normal view should be intuitive (using animation to show expansion of upper-right corner to occupy full chart)
• There may be many overlapping positions – need a way to resolve potential overlaps
• User can click any securities on scatter plot to see details of that security in summary module
• User can select any new securities (i.e. not in current portfolio) to add to portfolio; added position shows up in Portfolio Weight module
• Analogy: a factor screening tool is a kind of filter – the idea is to apply a filter to reduce many securities into a smaller number to display based on the user’s preferences; design of this feature may draw inspiration from other apps where filters are used (e.g. hotel booking site, Instagram filters, etc.)
• Summary shows the ticker, name and score of the selected security; score consists of two values, one for each of the chosen factor across the fundamental and momentum categories

 
05) Optimize Portfolio - required for 1st Round
Automatically refine position weights to achieve best return/risk

• User selects one of several options – "Max Sharpe", "Max Volatility", "Limit Volatility", "Required Return"
• Chart shows the “efficient frontier” curve – this is the optimal portfolio performance at various portfolio weight combinations (horizontal axis = expected volatility, vertical axis = expected return)
• Each point represents the best return / risk tradeoff
• Chart shows points representing the current portfolio, revised portfolio (if user changes weights of securities within this page), and optimized portfolio
• If user chooses “Max Sharpe”, the optimized portfolio automatically moves to that point on the curve (where Return/Volatility is highest)
• If user chooses “Min Volatility”, the optimized portfolio automatically moves to the left-most point on the curve (where volatility is the lowest)
• If user chooses “Limit Volatility”, a vertical boundary intersects the horizontal axis; user can slide the boundary to specify the acceptable volatility level (i.e. highest acceptable volatility); the optimized portfolio moves to the intersect of the boundary and the curve
• If user chooses “Required Return”, a horizontal boundary intersects the vertical axis; user can slide the boundary to specify the acceptable return level (i.e. lowest acceptable return); the optimized portfolio moves to the intersect of the boundary and the curve
• Summary shows the annual return, annual volatility and Sharpe ratio of the optimized portfolio, compared with the current and revised portfolio
• Color of fonts should match that of plotted points for easy reference
• Optimize function is computationally intensive; therefore, data does not automatically refresh, but require user to click something to request optimization calculation
• After optimization calculation, the existing revised portfolio takes on position weights of the optimized portfolio; other modules are updated automatically

 
06) Adjust Portfolio - required for 1st Round
Manually adjust position weights or add/remove positions

• There are two views of the portfolio list – Weight view and Expected Return view
• Both views show (the superset of) all positions in the initial and revised portfolios
• Each position includes the ticker (e.g. AAPL), market (e.g. US), name (e.g. Apple Inc), and a value (what value is displayed depends on which view we are in)
• In the Weight view, for each position, a set of bars show the weights of that position in the initial and revised portfolio, along with the percentage value for both
• User can easily change weight of each security by touching the bar for the revised portfolio (without typing numbers)
• User can add new securities and remove existing securities from the portfolio
• User can re-scale portfolio weights so that total weight adds up to 100%
• In the Expected Return view, for each position, only show the percentage value for the position’s expected annual return; this number is already populated with a default value, but advanced users can still customize it if they want, or click an icon to return to the default value
• Need a mechanism to switch between the two views intuitively
• Typical number of securities in each portfolio: around 10~30
• Securities may include different types (equities, bonds, ETFs, etc.) in different markets – need a unified way to indicate type and market for each security
• One list of securities is shown for both the initial and revised portfolios – need a way to easily show initial weight and revised weight; some positions may exist only for the initial portfolio, some positions may exist only for the revised portfolio, and other positions exist for both portfolios
• Each position must clearly show ticker, market, name of securities, and position weight (both graphic and numeric)

 
07) View Exposure
View sector exposure, country exposure and asset class exposure data

• Sector Exposure list shows sector exposure of portfolio across 10 sectors for both the initial and revised portfolios
• Country Exposure list shows country exposure of portfolio across several countries for both the initial and revised portfolios
• Asset Class Exposure list shows asset class exposure (e.g. equities, fixed income, commodities, ETFs, etc.) for both the initial and revised portfolios
• View Exposure module should support manual expand/collapse, and should be collapsed by default

 
08) Change Settings
Edit parameter settings and specify expected return for each position

• Each setting box consists of a description of the setting and a value
• User can click on the value to change it, or reset to default
• Change Settings module should support manual expand/collapse, and should be collapsed by default

 
09) Act
Click action button to perform one-click optimization or one-click trade

• If revised portfolio has not been optimized, button shows “Optimize”; clicking this button jumps to Optimize Portfolio page and perform optimization calculation
• If revised portfolio has been optimized, button shows “Trade”; clicking this button jumps to Trade screen
• Action button should be accessible even when user has scrolled away from the Act module, but possibly minimized to save space

10) Review Trades - required for 1st Round
Review or adjust trade tickets

• Each trade ticket consists of security ticker, exchange, security name, buy/sell action, number of shares, price, gross amount, type of trade, and date
• Each trade ticket must be displayed as one box; separate trade tickets occupy separate boxes
• User can click on any trade ticket to modify specific fields – number of shares, price, type of trade and date
• User can click an icon to return to Build screen

11) Confirm Trades
Send trades to broker site

• Action button to confirm trade execution
• This module is static and always in view

12) Report Page - required for 1st Round
We would like to collect user pattern data:

• Added and deleted securities
• Screens visited (time stamp, time duration)
• Clicks registered

13) Help Page

• The application needs a help page to explain financial concepts and available features
• This could be a small pop-up and/or video demo

DOCUMENTATION

• Project SIA - Illustration of Modules.pdf, to illustrate which modules goes to which page and showing the core content for the modules

MARVEL PROTOTYPE

• We need you to upload your screens to Marvel App
• Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot) 
• You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).

 
BRANDING GUIDELINES

• We will be partnering with many different financial sites, so we need a generic look-and-feel that can easily be adapted to different styles

TARGET DEVICE

• Responsive Mobile Design:  750px x 1334px (iPhone 8 - Portrait)
• Assume vertically scrolling page consisting of many modules vertically stacked on each other

TARGET AUDIENCES

• End User: Either the visitor to a financial website or the account holder of an online broker site
• Administrator: Staff at our company and/or at a partner financial institution (Out Of Scope)

JUDGING CRITERIA

• Your submission will be judged on the following criteria:
  • Overall idea and execution of concepts
  • How well does your design align with the objectives of the challenge
  • Execution and thoughtfulness put into solving the problem
  • Overall design and user experience
  • Cleanliness of screen design and user flow
  • Ease of use

 
SUBMISSION AND 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 image files based on Challenge submission requirements stated above
MarvelApp link for review and to provide feedback
 
Source Files
All source files of all graphics created in Sketch (Most Preferable), XD, or Photoshop and saved as an editable layer
 
FINAL FIXES
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. You will also need to create/extract SVG version of all design elements in your winning design as part of the final deliverables.