Challenge Summary
Welcome to "Cryptocurrency Exchange UI Design Concepts Challenge?". We're looking to do something Big, and we need your help! In this challenge, we're hoping that you can help us come up with a visual design for a prototype cryptocurrency trading web application. Our goal is to create an initial web (Desktop) prototype to help showcase what we've built!
Let us know if forum if you have any questions. Good luck!
A. General:
00 Landing Page
01 Sign in/Sign up
B. Logged in View
02 Exchange
03 Accounts
04 Settings
05 Application
- 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.
- 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)
A. General:
00 Landing Page
01 Sign in/Sign up
B. Logged in View
02 Exchange
03 Accounts
04 Settings
05 Application
C. Administrator
06 Admin Dashboard
07 Users
08 Reports
BONUS
09 Applications
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link. You will receive 1 MarvelApp prototype.
- 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)
Challenge is to come up with designs for a cryptocurrency trading web application.
Design Expectations:
- Designs need to be Professional, clean, easy to read and look at
- All colors and fonts should be easy to swap out/change
- For logo use a placeholder logo. We might ask to change it for the final logo in final fixes
- Upbeat and positive with an investor/trader style
- Needs to be internationalized in the future (although not a requirement for this challenge)
- Please notice that only Adobe tools such like Photoshop or Illustrator are required and allowed on this challenge. Do not use Sketch.
Required Screens:
We need below screens to be included in the designs, feel free to add any additional pages as required to show the flow of your concepts
A. General:
00 Landing Page (Not logged in)
- Jumbotron & hook (Large background image / visual with easy title, hook, and call to action)
- Login / signup functionality
- Scrolling ticker of supported cryptocurrencies (BTC, ETH, SNT, REP...etc. with US Dollars/USD as the base currency)
01 Sign in/ Sign up:
- Provide a way for the users to login to the application through email, or SSO w/ Facebook or Google
- Include all necessary UI elements for a login page (remember me, Forgot Password, etc)
- Include 2-factor authentication
~
- Also provide a way for the user to Sign Up with this web application.
B. Logged in View
02 Exchange
- This is where the magic happens and traders can place buy/sell orders
- Scrolling currency ticker in each trading pair (e.g. BTC / USD, ETH / USD...)
- Selector for choosing currency pair (e.g. ETH / USD)
- Last trade price of selected cryptocurrency in base currency (assume USD for the time being) and 24 hour volume of and change in price as a percentage
- My balances for this pair and ability to initiate deposit or withdrawal for these currency pairs
- Order form to place Market, Limit, and Stop orders (both buy/sell) along with the fees for making orders (0.1-0.5% range)
- Filterable chart showing recent trades (ability to see both standard candlestick and line charts, selector is fine)
- Real time trade history including trade size, price, and timestamp
- Real time order book showing current buy and sell orders
- My open orders showing size, amount filled, price, fee, time, status (option to cancel)
03 Accounts
- This is where users can see their account balances and history by currency
- Each of the currencies I hold/am following with their balances and the option to deposit/withdrawal (along with a gear to add/remove currencies from this list)
- A separate deposit/withdrawal button with a currency selector that also includes those I do not hold/follow
- Selector to show a filterable (date range, action type, etc.) list showing my account history including in type of action (deposit/withdrawal, trades, and fees), amount, and timestamp for the selected currency
- Download button to pull data into a csv file
- Toggle to switch from activity (deposits, withdrawals, matches, fees) to orders (orders, cancellations, fills) - orders / fills should have a similar layout. Records for order should show size, amount filled, price, fee, status, timestamp.
- Records for fills should show side (buy/sell), size, price, timestamp, order number, and a transaction number (each fill should have an associated order number)
04 Settings
- This is basically one page for everything related to a user's preferences and account that's not directly trading. Each subset here should have it's own selector or toggle for moving from one section to another, but in general, we don't want users to have to guess if their bank account information is under settings or my profile, so let's put them all in one.
- Selector/toggle for switching between My Profile, Security, Preferences, Payment, and Limits
- My Profile - Photo/avatar, name, email, phone number, birthday, address (including country), local currency, time zone, and should include an edit button to edit my profile information.
- Security - change password, add PIN, checkboxes for events when PIN is required, enable / disable 2 factor authentication
- Preferences - Email notifications on various events (successful orders, fills, deposits, withdrawals, etc.)
- Limits - my verification level (not verified, level 1, 2, 3..), deposit/withdrawal limits for me/my level, status of application (N/A, pending, rejected..) and links to apply for a higher verification level which opens an Application. Should show a table of the various verification levels, required documents and associated deposit and withdrawal limits
05 Application
- This application should be used when a user wants to apply for a higher verification level
- Selector for verification level the user wants to apply to
- For each document needed, should include an example of the document and instructions, a place to upload documents and a preview of the document being uploaded
- Submission button
C. Administrator
06 Admin Dashboard
- The admin dashboard shows the vitals of the exchange
- Exchange status indicator (e.g. could be a traffic light, should show status for running with no problems, warning, and stopped)
- LARGE stop button to halt the entire exchange
- Start button to resume exchange
- Currency pair status indicator (just like overall health but smaller)
- Smaller stop buttons for each pair
- Clock
- Live exchange volume chart that shows real-time data, filterable by currency pair(s), time, order type, etc.
- Real time size of order book(s), filterable by currency pair(s)
- Number of active (logged in) users
- Message pane with timestamps (e.g. for error messages)
- Command line / console to issue manual commands
07 Users
- This is where the admin can look up users
- Ability to search for users and filter results
- Ability to flag a user and add a comment
- Ability to suspend user
- Ability to open user and see user profile
- Submission button
- Should show when the users have outstanding requests for deposit/withdrawal or verification
08 Reports
- This is a data visualization dashboard (think Tableau) that allows administrators to create custom reports and download files
- Data visualization tool (bar, line, pie, and other charts)
- Navigation of some kind to view different types of standard reports - when selected they will automatically change the current data visualization to the report. Reports should be for trading volumes, users, orders, order book size, etc.
- Filters / checkboxes / drop downs / etc. for the admin to update the visualization in real time
- Ability to save current view as a new report
BONUS (Not required but we would like to see this if you have time)
08 Applications
- This is where administrators can view and approve / reject user applications for higher verification levels to increase their trading limits.
- Be creative! It should be easy for an administrator to go through and view/download applications and documentation and do the appropriate verification
User Flows
Existing Trader Login
- Lands on the splash page
- Clicks login
- Fills in user name and password via email address as well as 2 factor authentication code, clicks login
- Logs in and brought to dashboard
Submit Limit Order Buy and Cancellation
- Starting on Dashboard
- User selects ETH / USD pair, screen updates
- They see the last trade price is close to a range they are willing to pay
- User goes to fill in form and sees they have an existing balance of $10,000 USD
- User selects 'Limit Order'
- User clicks 'Buy' and inputs amount of the price they are willing to pay for ETH and the amount of ETH they want
- User looks at total amount they are putting into the market and the fee they will pay which is less than their total $10,000
- User decides they want to put all $10,000 in at that price and clicks a MAX button
- User clicks 'Place Order'
- Form clears, their account balance goes to zero, and their order is shown in the live order book as well as in their current order list with a cancellation button
- User clicks cancellation, balance returns to their account
Visual Order Book to Buy
- Starting on Dashboard
- User wants to sell their holdings
- User selects ETH / USD pair, screen updates
- User goes to fill in form and sees they have an existing balance of $10,000 USD
- They look at the visual order book at see an open order to sell ETH at a price they are willing to pay
- The user clicks that order and it fills the Market Buy form for a portion of that order (up to the user's total balance of $10,000)
- User clicks 'Place Order'
- Order clears and their balance is updated
Pull User Report
- User navigates to Accounts page
- User wants trade history between ETH / USD for the past quarter
- User selects ETH / USD pair, screen updates
- User clicks on the filter and switches the date range for the past 3 months and clicks submit, screen updates
- User scrolls through and decides they want to download the report
- User clicks download
- Popup asks file format with default CSV
- User clicks download and the file downloads to their machine
Apply for Higher Limits
- User navigates to profile page and looks at their trading limit, sees level 1 with a limit of $10,000 in withdrawals
- User clicks a button saying apply for higher limit and it opens an application popup
- Popup shows that for the next level, the user must submit their passport
- The first photo requires the front page of the passport with user information
Admin - Halt and resume single currency
- Admin logs onto the exchange
- Sees the dashboard and sees the status is normal via summary
- The status suddenly of the ETH / USD pair turns yellow a and warnings pop up in the console for this currency pair
- The administrator clicks the stop button for this currency pair
- After a few minutes, the administrator clicks the start button for this pair and resumes it's trading
Admin - Suspend User
- Admin logs onto the exchange
- Clicks the user tab
- Sees a list of users
- The admin searches for a user by their email address
- The list shows a line item for that singe user
- The admin clicks on a button on the line item saying 'Suspend'
- A popup comes up for a comment input
- The admin writes a comment and hits 'Suspend'
- The user's status changes to 'Suspended'
Admin - Data Visualization and Download
- Admin logs onto the exchange
- Clicks the Reports tab
- The admin sees a data visualization of the exchange request volume per day over the past month
- The admin navigates through a list of standard reports and clicks on a user report showing unique logins per day over the past month
- The admin navigates through the list again and clicks on a volume report showing a pie chart of the number of volumes by currency pair over the past month.
- The admin changes the date range from this past month to the same month in the prior year
- The admin clicks 'download' and a popup comes up asking what kind of file the admin wants
- The admin clicks .csv and clicks download
- The file downloads
Screen Sizes
- Create your designs for desktop view, have width as 1280px and height as required.
References:
There are Similar Applications / Web sites, please DO NOT COPY, they are provided to help you understand
Trading Platforms
- https://www.gdax.com/
- https://gemini.com/
- https://www.kraken.com/
- https://www.coinbase.com/
- https://bittrex.com/
- https://www.binance.com/
Target Audience
- General consumers
- Early 20's to 50's, professionals, educated, medium-high net worth
- Investors and Trader
- College students
- Millennials, young urban professionals, technophiles
Comfortable using Gmail, Etrade, Mint, Quickbooks, popular web apps, Instagram, Robinhood, popular mobile apps
- Initially focused on US-based English speakers but will be going international in the next interaction (e.g. Arabic)
Judging Criteria
- Completeness and accuracy of your designs
- How well your design provide a consistent user flow
- Think about the User experience of the application
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 Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a 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
Let us know if forum if you have any questions. Good luck!
Round 1
Submit your initial designs for checkpoint review.A. General:
00 Landing Page
01 Sign in/Sign up
B. Logged in View
02 Exchange
03 Accounts
04 Settings
05 Application
- 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.
- 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
Submit your final designs with all checkpoint feedback implementedA. General:
00 Landing Page
01 Sign in/Sign up
B. Logged in View
02 Exchange
03 Accounts
04 Settings
05 Application
C. Administrator
06 Admin Dashboard
07 Users
08 Reports
BONUS
09 Applications
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link. You will receive 1 MarvelApp prototype.
- 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)
Challenge is to come up with designs for a cryptocurrency trading web application.
Design Expectations:
- Designs need to be Professional, clean, easy to read and look at
- All colors and fonts should be easy to swap out/change
- For logo use a placeholder logo. We might ask to change it for the final logo in final fixes
- Upbeat and positive with an investor/trader style
- Needs to be internationalized in the future (although not a requirement for this challenge)
- Please notice that only Adobe tools such like Photoshop or Illustrator are required and allowed on this challenge. Do not use Sketch.
Required Screens:
We need below screens to be included in the designs, feel free to add any additional pages as required to show the flow of your concepts
A. General:
00 Landing Page (Not logged in)
- Jumbotron & hook (Large background image / visual with easy title, hook, and call to action)
- Login / signup functionality
- Scrolling ticker of supported cryptocurrencies (BTC, ETH, SNT, REP...etc. with US Dollars/USD as the base currency)
01 Sign in/ Sign up:
- Provide a way for the users to login to the application through email, or SSO w/ Facebook or Google
- Include all necessary UI elements for a login page (remember me, Forgot Password, etc)
- Include 2-factor authentication
~
- Also provide a way for the user to Sign Up with this web application.
B. Logged in View
02 Exchange
- This is where the magic happens and traders can place buy/sell orders
- Scrolling currency ticker in each trading pair (e.g. BTC / USD, ETH / USD...)
- Selector for choosing currency pair (e.g. ETH / USD)
- Last trade price of selected cryptocurrency in base currency (assume USD for the time being) and 24 hour volume of and change in price as a percentage
- My balances for this pair and ability to initiate deposit or withdrawal for these currency pairs
- Order form to place Market, Limit, and Stop orders (both buy/sell) along with the fees for making orders (0.1-0.5% range)
- Filterable chart showing recent trades (ability to see both standard candlestick and line charts, selector is fine)
- Real time trade history including trade size, price, and timestamp
- Real time order book showing current buy and sell orders
- My open orders showing size, amount filled, price, fee, time, status (option to cancel)
03 Accounts
- This is where users can see their account balances and history by currency
- Each of the currencies I hold/am following with their balances and the option to deposit/withdrawal (along with a gear to add/remove currencies from this list)
- A separate deposit/withdrawal button with a currency selector that also includes those I do not hold/follow
- Selector to show a filterable (date range, action type, etc.) list showing my account history including in type of action (deposit/withdrawal, trades, and fees), amount, and timestamp for the selected currency
- Download button to pull data into a csv file
- Toggle to switch from activity (deposits, withdrawals, matches, fees) to orders (orders, cancellations, fills) - orders / fills should have a similar layout. Records for order should show size, amount filled, price, fee, status, timestamp.
- Records for fills should show side (buy/sell), size, price, timestamp, order number, and a transaction number (each fill should have an associated order number)
04 Settings
- This is basically one page for everything related to a user's preferences and account that's not directly trading. Each subset here should have it's own selector or toggle for moving from one section to another, but in general, we don't want users to have to guess if their bank account information is under settings or my profile, so let's put them all in one.
- Selector/toggle for switching between My Profile, Security, Preferences, Payment, and Limits
- My Profile - Photo/avatar, name, email, phone number, birthday, address (including country), local currency, time zone, and should include an edit button to edit my profile information.
- Security - change password, add PIN, checkboxes for events when PIN is required, enable / disable 2 factor authentication
- Preferences - Email notifications on various events (successful orders, fills, deposits, withdrawals, etc.)
- Limits - my verification level (not verified, level 1, 2, 3..), deposit/withdrawal limits for me/my level, status of application (N/A, pending, rejected..) and links to apply for a higher verification level which opens an Application. Should show a table of the various verification levels, required documents and associated deposit and withdrawal limits
05 Application
- This application should be used when a user wants to apply for a higher verification level
- Selector for verification level the user wants to apply to
- For each document needed, should include an example of the document and instructions, a place to upload documents and a preview of the document being uploaded
- Submission button
C. Administrator
06 Admin Dashboard
- The admin dashboard shows the vitals of the exchange
- Exchange status indicator (e.g. could be a traffic light, should show status for running with no problems, warning, and stopped)
- LARGE stop button to halt the entire exchange
- Start button to resume exchange
- Currency pair status indicator (just like overall health but smaller)
- Smaller stop buttons for each pair
- Clock
- Live exchange volume chart that shows real-time data, filterable by currency pair(s), time, order type, etc.
- Real time size of order book(s), filterable by currency pair(s)
- Number of active (logged in) users
- Message pane with timestamps (e.g. for error messages)
- Command line / console to issue manual commands
07 Users
- This is where the admin can look up users
- Ability to search for users and filter results
- Ability to flag a user and add a comment
- Ability to suspend user
- Ability to open user and see user profile
- Submission button
- Should show when the users have outstanding requests for deposit/withdrawal or verification
08 Reports
- This is a data visualization dashboard (think Tableau) that allows administrators to create custom reports and download files
- Data visualization tool (bar, line, pie, and other charts)
- Navigation of some kind to view different types of standard reports - when selected they will automatically change the current data visualization to the report. Reports should be for trading volumes, users, orders, order book size, etc.
- Filters / checkboxes / drop downs / etc. for the admin to update the visualization in real time
- Ability to save current view as a new report
BONUS (Not required but we would like to see this if you have time)
08 Applications
- This is where administrators can view and approve / reject user applications for higher verification levels to increase their trading limits.
- Be creative! It should be easy for an administrator to go through and view/download applications and documentation and do the appropriate verification
User Flows
Existing Trader Login
- Lands on the splash page
- Clicks login
- Fills in user name and password via email address as well as 2 factor authentication code, clicks login
- Logs in and brought to dashboard
Submit Limit Order Buy and Cancellation
- Starting on Dashboard
- User selects ETH / USD pair, screen updates
- They see the last trade price is close to a range they are willing to pay
- User goes to fill in form and sees they have an existing balance of $10,000 USD
- User selects 'Limit Order'
- User clicks 'Buy' and inputs amount of the price they are willing to pay for ETH and the amount of ETH they want
- User looks at total amount they are putting into the market and the fee they will pay which is less than their total $10,000
- User decides they want to put all $10,000 in at that price and clicks a MAX button
- User clicks 'Place Order'
- Form clears, their account balance goes to zero, and their order is shown in the live order book as well as in their current order list with a cancellation button
- User clicks cancellation, balance returns to their account
Visual Order Book to Buy
- Starting on Dashboard
- User wants to sell their holdings
- User selects ETH / USD pair, screen updates
- User goes to fill in form and sees they have an existing balance of $10,000 USD
- They look at the visual order book at see an open order to sell ETH at a price they are willing to pay
- The user clicks that order and it fills the Market Buy form for a portion of that order (up to the user's total balance of $10,000)
- User clicks 'Place Order'
- Order clears and their balance is updated
Pull User Report
- User navigates to Accounts page
- User wants trade history between ETH / USD for the past quarter
- User selects ETH / USD pair, screen updates
- User clicks on the filter and switches the date range for the past 3 months and clicks submit, screen updates
- User scrolls through and decides they want to download the report
- User clicks download
- Popup asks file format with default CSV
- User clicks download and the file downloads to their machine
Apply for Higher Limits
- User navigates to profile page and looks at their trading limit, sees level 1 with a limit of $10,000 in withdrawals
- User clicks a button saying apply for higher limit and it opens an application popup
- Popup shows that for the next level, the user must submit their passport
- The first photo requires the front page of the passport with user information
Admin - Halt and resume single currency
- Admin logs onto the exchange
- Sees the dashboard and sees the status is normal via summary
- The status suddenly of the ETH / USD pair turns yellow a and warnings pop up in the console for this currency pair
- The administrator clicks the stop button for this currency pair
- After a few minutes, the administrator clicks the start button for this pair and resumes it's trading
Admin - Suspend User
- Admin logs onto the exchange
- Clicks the user tab
- Sees a list of users
- The admin searches for a user by their email address
- The list shows a line item for that singe user
- The admin clicks on a button on the line item saying 'Suspend'
- A popup comes up for a comment input
- The admin writes a comment and hits 'Suspend'
- The user's status changes to 'Suspended'
Admin - Data Visualization and Download
- Admin logs onto the exchange
- Clicks the Reports tab
- The admin sees a data visualization of the exchange request volume per day over the past month
- The admin navigates through a list of standard reports and clicks on a user report showing unique logins per day over the past month
- The admin navigates through the list again and clicks on a volume report showing a pie chart of the number of volumes by currency pair over the past month.
- The admin changes the date range from this past month to the same month in the prior year
- The admin clicks 'download' and a popup comes up asking what kind of file the admin wants
- The admin clicks .csv and clicks download
- The file downloads
Screen Sizes
- Create your designs for desktop view, have width as 1280px and height as required.
References:
There are Similar Applications / Web sites, please DO NOT COPY, they are provided to help you understand
Trading Platforms
- https://www.gdax.com/
- https://gemini.com/
- https://www.kraken.com/
- https://www.coinbase.com/
- https://bittrex.com/
- https://www.binance.com/
Target Audience
- General consumers
- Early 20's to 50's, professionals, educated, medium-high net worth
- Investors and Trader
- College students
- Millennials, young urban professionals, technophiles
Comfortable using Gmail, Etrade, Mint, Quickbooks, popular web apps, Instagram, Robinhood, popular mobile apps
- Initially focused on US-based English speakers but will be going international in the next interaction (e.g. Arabic)
Judging Criteria
- Completeness and accuracy of your designs
- How well your design provide a consistent user flow
- Think about the User experience of the application
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 Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a 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.