Fintech - Responsive Website Redesign and Styleguide Design Challenge

Welcome to Fintech Responsive Website Redesign and Styleguide Design Challenge!

In this challenge, we have shared you screenshots from the fintech application, the task is to come up with a new design for these provided mock-ups and also come up with style guide (based on bootstrap components)

About this application
This fintech application is a platform that allows users to create, manage, and crowdfund shares in real estate properties. Investors gain access to a variety of properties with greater liquidity and lower capital requirements than traditional real estate investing. Asset owners and investors benefit from the easy-to-use web application that houses property dashboards, due diligence, and peer-to-peer trades.

We are excited to see your designs for this challenge.

Round 1

Submit your initial design for a Checkpoint Feedback
A. Mockup Redesigning
01 Portfolio (Desktop)
02 Browse Properties (Desktop)
03 Property Details (Desktop)
04 All Assets (Desktop)

B. Core Colors
C. Style Guide for Components

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 the comments while uploading your submission
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates
A. Mockup Redesigning
01 Portfolio (Desktop + Mobile)
02 Browse Properties (Desktop + Mobile)
03 Property Details (Desktop + Mobile)
04 All Assets (Desktop + Mobile)

B. Core Colors
C. Style Guide for Components

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

Create a design for the included components for a fintech application following general Bootstrap standards. The deliverable should be high fidelity mockups and styleguide of all requested components in both light and dark themes.

Design Guidelines
- Your designs should be included as PDFs and Marvelapp.
- Must include light and dark themes for all components.
- All components should have a cohesive look and feel.
- All components need to be responsive from desktop, tablet, and mobile size using the normal bootstrap screen sizes. The majority of focus should be on desktop experience, however.
- NOTE: This is a responsive application, for this challenge focus on the 
- - - Desktop: 1200 px (width) and height as required 
- - - Mobile: 320 px (width) and height as required 

Styling
- Please use 'Roboto' for all fonts
- Primary color should be a shade of blue but include color samples for all the following: 
- - - primary
- - - secondary
- - - success
- - - warning
- - - info
- - - danger
- For any icons, please use font-awesome 

Requirements:
Please include designs for all the components below in both light and dark themes.

A. Mockup Redesigning:
Existing Application
We have supplied the screenshots (please find them in forums) of the what the current application looks like today. Please use them as a guide, but your designs should be an entirely original version and should be designed based on the bootstrap components.

01 Portfolio:
- Header Includes a logo, navigation, notification icons, username and headshot.
- This shows list of properties that the user currently holds
- Shows the statistics.
- Tabs to show Current portfolio and Watch list.
- Think about how each of the listing need to be laid out.
- How will the overall navigation need to be designed?

02 Browse Properties:
- This shows the list of properties in grid and list layout.

03 Property Details:
- This is a property details page.
- Includes details and images of the property

04 All Assets:
- This page allows the user to all assets
- Should have a call to action to add an asset.
- Shows the list of assets that have been added to a table

B. Core Colors
Include a core color for all the following states and include lighter and darker versions for hover, active, :
- primary (blue)
- secondary (grey)
- success (green)
- warning (yellow)
- info (teal)
- danger (red)
- default (grey)

C. Style Guide: Components to be Designed:
Most of the components come from Bootstrap 4 (https://getbootstrap.com/docs/4.0/components)
- Typography
- - - Header 1
- - - Header 2
- - - Header 3
- - - Header 4
- - - Header 5
- - - Header 6
- - - Paragraph
- - - Quoted paragraph
- - - Emphasis paragraph
- - - Small text
- Alerts (all types and colors)
- Badge
- Breadcrumb
- Buttons
- Button group
- Card
- - - Only text
- - - Image + text + action button
- - - Image with overlay + text
- Dropdowns
- Feed (Include comments and document uploads in the Feed)
- Forms
- Input group (All different inputs (text, select, etc))
- List group
- Media Object
- Model
- Navs
- Navbar
- Pagination
- Popovers
- Progress
- Tables
- - - All text table
- - - Small image column then text
- Timeline
- Tooltips

References:
These are links to screenshots from applications that we really like. Please use the best design practices from these examples in your components:
- https://dribbble.com/shots/4289272-Financial-Dashboard
- https://dribbble.com/shots/4306177-AISC-DB
- https://dribbble.com/shots/4264239-Crypto-dashboard-UI
- https://dribbble.com/shots/4173920-Cryptocurrency-online-bank-dashboard
- https://dribbble.com/shots/4008135-Account-Portfolio
- https://dribbble.com/shots/4005070-Spaceship-Mobile-Concept-II

MarvelApp Prototype
- We need you to upload your screens to Marvel App.
- Please send your Marvel app request to csystic@gmail.com or in Challenge Forum
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).

Target Audience:
- General consumers
- Early 20's to 50's, professionals, educated, medium-high net worth
- Investors and Traders
- 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 (esp. Arabic) in the next interaction

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 in designing this application
- Overall design and user experience
- Cleanliness of screen design and user flow.

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
- Submit Marvelapp as part of your submission.

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 or Sketch!

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.