BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to "SIA - Mobile Web App Design Refinement Challenge". SIA (Smart Investment Advisor) is an application that empowers users of financial/brokerage sites to explore, design, optimize and trade their portfolios. In our previous challenge, we have created the base design for the application and now we need your help to refine the look and feel to meet with the client’s latest request.

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:
  • 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:
  • 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
  • In our previous design challenge, we already define the look and feel for the SIA application
  • After some iterations process in the dev phase, we realize some refinement needed in the application to make it more intuitive
  • We need your help to simplify and rearrange the app flow to make the user experience more intuitive

CHALLENGE GOAL
  • The goal of this challenge is to update and refine the existing UI/UX screens from our SIA app to match with client latest request and make the application user experience more intuitive

REFINEMENT REQUEST
01) General Updates Request
  • Change the application behavior from vertical scrolling to page by page (tabs)
  • Instead of modules, please split the entire investment process into 5 areas: 
    • Input
    • View
    • Add
    • Test
    • Trade
  • Optimize the screen "real estate", make things tight but legible
  • We need to change the overall color schemes, it needs to be more generic and easily customizable for our customers later
  • "Text Localization", the application needs to be able to support multiple languages like English, Traditional Chinese, and Simplified Chinese - Please consider that in your submission
  • Add the ability to manage multiple accounts
  • More details can be found at the "Revised User Flow Design v1.4.pdf" page 1

02) Input Screen
  • Needs a bulk input mechanism to populate values for the Current Portfolio. This is intended for users who do not come to this site via a financial institution/website partner site, which means there is no SSO and therefore no portfolio data for the Current Portfolio. We plan to support a standard manual input interface, plus a smart upload function that allows the user to upload a screenshot of an investment mobile account screen, which we then apply OCR to parse the portfolio data into a list of (stock code, number of shares) to populate the Current Portfolio.
  • Two tabs will be available in this screen:
    • Screen Capture: user uploads screenshots of investment account positions screens and tags stock code and quantity data
    • Manual Input: user enters portfolio positions manually, or check automatically generated portfolio via screenshot upload
  • Please read "Revised User Flow Design v1.4.pdf" page 2 - 4  for more details about the interaction needed for this screen

03) View Screen
  • This screen purpose is to show weight details for the current, revised, and optimized portfolios
  • Need to have details view and group view
  • Should have stock and fund list data available in the screen
  • Ability to Add/Remove stocks and fund to/from the list (redirect user to "Add Screen")
  • Ability to customize parameters under Advanced input interface and Rescale the data content (Optimized)
  • Make sure to capture all interactions needed in this screen
  • Please read "Revised User Flow Design v1.4.pdf" page 5 - 10 for more details about the interaction needed for this screen

04) Add Screen
  • Allow user to add stocks using idea generator and sortable list and add funds using sortable list
  • Needs two main tabs in this screen: Add Stocks and Add Fund
  • Ability to choose Stock market from different countries
  • Please read "Revised User Flow Design v1.4.pdf" page 11 - 15 for more details about the interaction needed for this screen

05) Test Screen
  • Shows portfolio back-testing chart and optimization chart (combination of Test Portfolio and Optimize Portfolio)
  • Please read "Revised User Flow Design v1.4.pdf" page 16 for more details about the interaction needed for this screen

06) Trade Screen
  • Shows trade basket to achieve an optimized portfolio. User clicks confirm trade to send trade information to a partner site
  • Please read "Revised User Flow Design v1.4.pdf" page 17 for more details about the interaction needed for this screen

07) Other Screens
  • Needs several additional screens to be created as part of the application such as:
    • Settings - Allow user to personalize the app and set key parameter
    • Messages - OUT OF SCOPE
    • Information - Shows disclaimer and glossary
  • Please read "Revised User Flow Design v1.4.pdf" page 18-20 for more details about the interaction needed for this screen

DOCUMENTATION
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)

TARGET AUDIENCES
  • End-User: Either the visitor to a financial website or the account holder of an online broker site

JUDGING CRITERIA
  • Your submission will be judged on the following criteria:
    • How well does your design align with the objectives of the challenge
    • Completeness of all design interactions requested in the requirements doc
    • Execution and thoughtfulness put into solving the problem
    • The 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 Adobe Photoshop, XD, or Sketch 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

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2020 Topcoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar
  • Sketch
  • XD

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30110353