Challenge Summary
Welcome to "LendCentric - eMO Front End Portal Redesign Challenge". The Enterprise Mobile Origination (eMO) application is a tablet based front end portal to the NetOxygen Loan Origination System. Loan officers use this application to take mortgage applications in the field with customers as well as view and manage their pipeline of existing loans. We are looking for a better UI/UX concepts for this application.
2) Launch Screen
3) New Application Wizard Screens
4) Dashboard Screen
- 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
1) Login Screen
2) Launch Screen
3) New Application Wizard Screens
4) Dashboard Screen
5) Pipeline Screen
6) Alert Screen
7) Loan Dashboard Screen
- 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 your notes.txt
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
The eMO or Enterprise Mobile Origination is a native lending productivity suite designed to enable sales teams in the field.The target audience for this is the Loan Officers/ Originators who may be on the field and need to take loan applications on the go. Compatible with any loan origination system, the e•MO app provides all the tools to keep sales informed and connected to the customer. Offering this standalone app leads to increased reach and visibility of the Lending institutions and provides an 'On the Go' product. We also expect the loan officers to show this application to the end users/borrowers as they fill up the loan application.
Challenge Goals
Create a better and modern UX/UI for the existing screens and create screens for new features that not yet available in the application.
Design Considerations
- What should the priority features be?
- UI/UX Best Practice for Tablet Design App!
- How quickly could you find information?
- The interface will be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
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=614795
Branding Guidelines
This should follow the same look and feel formatting of a previous project:
- https://marvelapp.com/1jg26ha/screen/30184462
Target Devices
- Tablet, 1536x2048px
Marvel App Presentation
- Request a Marvel App prototype from copilot in challenge forum.
- Provide the Marvel App shareable link in your notes during submission upload.
Stock Artwork (Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Required Pages/Features
For this challenge, we are looking for the below pages to be re-designed/considered in your concepts. The screen 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.
1) Login Screen
- Reference "eMO_Login_Screen.png"
- User needs to login first before able to use the application
- Provide usual login form in this screen, forgot password link, etc.
- Simple placeholder logo to show the app identity
- Create simple error scenario.
2) Launch Screen
- Reference emo_specifications.pdf, page 1
- After a user login to the application, this will be the first screen that they see allowing them to directly take a new application or to go to manage their pipeline.
3) New Application Wizard Screens
- If the user chooses to create a new application, it will ask the user to provide series of data information regarding the application.
- There are tons of information needs to provide here, so split the entry data screens like using wizards will be helpful.
- User should be able to navigate from one information to another easily.
- User also needs to know their progress to complete the information (some progress percentage)?
- User needs to know in which steps they are currently at.
- Here are the information that needs be provided when user enter/create a new application:
3.1 Let's Get Started (eMO_LetsGetStarted.png)
- User needs to read Terms and Agreement related to create new application process.
- User needs to agree to several terms and condition before able to continue
- Simple Next button to continue
3.2 Borrower Information (eMO_Borrower1.png, eMO_Borrower2.png)
- Clicking "Add Borrower" will open list of people from database, select one of it and the information detail of that person will be shown in this screen
- If the person that being selected is wrong, user can easily delete the borrower by clicking the "Delete Borrower" button.
3.3 Property Information (eMO_Property.png)
- User needs to enter the property information of borrower in here.
- Needs some map to provide details information about the address.
3.4 Loan Information (eMO_Loan_Screen1.png, eMO_Loan_Screen2.png)
- User needs to enter loan information here
- Users can click on Fetch products button to retreive the eligible products based on the entered loan parameter (eMO_Fetch_Products.png)
- Clicking on products popup, and users can see a list of products (eMO_List_Products.png)
- User can rates and also compare upto 3 or 4 products at a time to choose the best one. (eMO_Compare_Products.png)
3.5 Income Information (eMO_Income_Screen1.png, eMO_Income_Screen2.png)
- Enter user income information from this screen
- Provide Add Employment and Delete Employment in this screen. This allows the load officer to add employment information to the application for the borrower.
3.6 Expenses (eMO_Expenses.png)
- Enter user expense information from this screen
3.7 Asset Information (eMO_Asset_Screen.png)
- Add all borrower asset in this screen
- If Borrower have more than one asset, user can enter another asset information by clicking "Add Another Asset" button
3.8 Liability Information (eMO_Liability_Screen.png, eMO_Liability_Screen2.png)
- Add borrower Liability in this screen
- If Borrower have more than one liability, user can enter another asset information by clicking "Add Another Liability" button
3.9 Transaction Details (eMO_Transaction.png)
- Put all information regarding transaction details in this screen
3.10 Declaration Information (eMO_Declaration.png)
- Borrower needs to answer all questions in this screen.
- The grey and red rectangle used to provide extra information depending on the answer selected.
3.11 Acknowledgement (eMO_Ack_Screen1.png, eMO_Ack_Screen2.png)
- Put all information regarding all necessary acknowledgment details in this screen
3.12 Review & Submit (eMO_Review&Submit1.png, eMO_Review&Submit2.png)
- User can preview all informations that have been entered from this screen
- If all informations is correct and comply, user can submit the data.
4) Dashboard Screen
- Reference emo_specifications.pdf page 3
- If a user clicks on "Pipeline" then it will direct them to a series of screens for managing and accessing their pipeline.
- The default view will be this dashboard screen.
5) Pipeline Screen
- Reference emo_specifications.pdf page 4 and eMO_Pipeline_Screen.png
- This view allows a user to view the loans in their pipeline in a list view and access a specific loan.
6) Alert Screen
- Reference emo_specifications.pdf page 5
- Alerts shows a user specific loans in their pipeline that need their immediate attention
7) Loan Dashboard Screen
- Reference emo_specifications.pdf page 6 & 7
- From the pipeline list, once a user clicks on a specific loan it will take them to this view.
- Page 6, This is a summary screen of the specific loan data. On the left menu bar, in between 'conditions summary' and 'messages' will be all of the menu options that are provided in the screen shots in the 3rd screen requirements above.
- Page 7, If user click the Condition Summary, it will showing conditions summary data.
- These screens are new screens in addition to existing eMo screens.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Documentation
Google Drive: Ask documentation link from Copilot in challenge forum
- emo_specifications.pdf & SnapShot (Contain wireframe references)
- eMO logo transparent.png (The App Logo, for branding)
Target Audience
- Loan officers, Person that who may be on the field and need to take loan applications on the go
Judging Criteria
- Completeness of the screen requirements
- How interesting and engaging is your proposed design concepts workflow
- Interpretation of the user experience.
- Is the application easy to use/intuitive?
- Cleanliness of your graphics and design.
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.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator or Sketch. Layers should be named and well organized.
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.
Round 1
Submit your initial design for a checkpoint feedback2) Launch Screen
3) New Application Wizard Screens
4) Dashboard Screen
- 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 correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your final design plus checkpoint feedback1) Login Screen
2) Launch Screen
3) New Application Wizard Screens
4) Dashboard Screen
5) Pipeline Screen
6) Alert Screen
7) Loan Dashboard Screen
- 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 your notes.txt
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
The eMO or Enterprise Mobile Origination is a native lending productivity suite designed to enable sales teams in the field.The target audience for this is the Loan Officers/ Originators who may be on the field and need to take loan applications on the go. Compatible with any loan origination system, the e•MO app provides all the tools to keep sales informed and connected to the customer. Offering this standalone app leads to increased reach and visibility of the Lending institutions and provides an 'On the Go' product. We also expect the loan officers to show this application to the end users/borrowers as they fill up the loan application.
Challenge Goals
Create a better and modern UX/UI for the existing screens and create screens for new features that not yet available in the application.
Design Considerations
- What should the priority features be?
- UI/UX Best Practice for Tablet Design App!
- How quickly could you find information?
- The interface will be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
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=614795
Branding Guidelines
This should follow the same look and feel formatting of a previous project:
- https://marvelapp.com/1jg26ha/screen/30184462
Target Devices
- Tablet, 1536x2048px
Marvel App Presentation
- Request a Marvel App prototype from copilot in challenge forum.
- Provide the Marvel App shareable link in your notes during submission upload.
Stock Artwork (Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Required Pages/Features
For this challenge, we are looking for the below pages to be re-designed/considered in your concepts. The screen 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.
1) Login Screen
- Reference "eMO_Login_Screen.png"
- User needs to login first before able to use the application
- Provide usual login form in this screen, forgot password link, etc.
- Simple placeholder logo to show the app identity
- Create simple error scenario.
2) Launch Screen
- Reference emo_specifications.pdf, page 1
- After a user login to the application, this will be the first screen that they see allowing them to directly take a new application or to go to manage their pipeline.
3) New Application Wizard Screens
- If the user chooses to create a new application, it will ask the user to provide series of data information regarding the application.
- There are tons of information needs to provide here, so split the entry data screens like using wizards will be helpful.
- User should be able to navigate from one information to another easily.
- User also needs to know their progress to complete the information (some progress percentage)?
- User needs to know in which steps they are currently at.
- Here are the information that needs be provided when user enter/create a new application:
3.1 Let's Get Started (eMO_LetsGetStarted.png)
- User needs to read Terms and Agreement related to create new application process.
- User needs to agree to several terms and condition before able to continue
- Simple Next button to continue
3.2 Borrower Information (eMO_Borrower1.png, eMO_Borrower2.png)
- Clicking "Add Borrower" will open list of people from database, select one of it and the information detail of that person will be shown in this screen
- If the person that being selected is wrong, user can easily delete the borrower by clicking the "Delete Borrower" button.
3.3 Property Information (eMO_Property.png)
- User needs to enter the property information of borrower in here.
- Needs some map to provide details information about the address.
3.4 Loan Information (eMO_Loan_Screen1.png, eMO_Loan_Screen2.png)
- User needs to enter loan information here
- Users can click on Fetch products button to retreive the eligible products based on the entered loan parameter (eMO_Fetch_Products.png)
- Clicking on products popup, and users can see a list of products (eMO_List_Products.png)
- User can rates and also compare upto 3 or 4 products at a time to choose the best one. (eMO_Compare_Products.png)
3.5 Income Information (eMO_Income_Screen1.png, eMO_Income_Screen2.png)
- Enter user income information from this screen
- Provide Add Employment and Delete Employment in this screen. This allows the load officer to add employment information to the application for the borrower.
3.6 Expenses (eMO_Expenses.png)
- Enter user expense information from this screen
3.7 Asset Information (eMO_Asset_Screen.png)
- Add all borrower asset in this screen
- If Borrower have more than one asset, user can enter another asset information by clicking "Add Another Asset" button
3.8 Liability Information (eMO_Liability_Screen.png, eMO_Liability_Screen2.png)
- Add borrower Liability in this screen
- If Borrower have more than one liability, user can enter another asset information by clicking "Add Another Liability" button
3.9 Transaction Details (eMO_Transaction.png)
- Put all information regarding transaction details in this screen
3.10 Declaration Information (eMO_Declaration.png)
- Borrower needs to answer all questions in this screen.
- The grey and red rectangle used to provide extra information depending on the answer selected.
3.11 Acknowledgement (eMO_Ack_Screen1.png, eMO_Ack_Screen2.png)
- Put all information regarding all necessary acknowledgment details in this screen
3.12 Review & Submit (eMO_Review&Submit1.png, eMO_Review&Submit2.png)
- User can preview all informations that have been entered from this screen
- If all informations is correct and comply, user can submit the data.
4) Dashboard Screen
- Reference emo_specifications.pdf page 3
- If a user clicks on "Pipeline" then it will direct them to a series of screens for managing and accessing their pipeline.
- The default view will be this dashboard screen.
5) Pipeline Screen
- Reference emo_specifications.pdf page 4 and eMO_Pipeline_Screen.png
- This view allows a user to view the loans in their pipeline in a list view and access a specific loan.
6) Alert Screen
- Reference emo_specifications.pdf page 5
- Alerts shows a user specific loans in their pipeline that need their immediate attention
7) Loan Dashboard Screen
- Reference emo_specifications.pdf page 6 & 7
- From the pipeline list, once a user clicks on a specific loan it will take them to this view.
- Page 6, This is a summary screen of the specific loan data. On the left menu bar, in between 'conditions summary' and 'messages' will be all of the menu options that are provided in the screen shots in the 3rd screen requirements above.
- Page 7, If user click the Condition Summary, it will showing conditions summary data.
- These screens are new screens in addition to existing eMo screens.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Documentation
Google Drive: Ask documentation link from Copilot in challenge forum
- emo_specifications.pdf & SnapShot (Contain wireframe references)
- eMO logo transparent.png (The App Logo, for branding)
Target Audience
- Loan officers, Person that who may be on the field and need to take loan applications on the go
Judging Criteria
- Completeness of the screen requirements
- How interesting and engaging is your proposed design concepts workflow
- Interpretation of the user experience.
- Is the application easy to use/intuitive?
- Cleanliness of your graphics and design.
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.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator or Sketch. Layers should be named and well organized.
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.