Challenge Summary
Welcome to Mortgage Interest Rates Responsive Design Challenge.
We need your creative skills to come up with a solution for a responsive website that will help loan officers managing Mortgage Interest Rates for customers in a very simple way. Looking forward to seeing modern design experience.
Best of luck!
1. Home (Desktop and Phone)
2. About Us (Desktop)
3. Loan Officer Login/Registration (Desktop)
4. Loan Officer Dashboard (Desktop and Phone)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1. Home (Desktop and Phone)
2. About Us (Desktop and Phone)
3. Loan Officer Login/Registration (Desktop and Phone)
4. Loan Officer Dashboard (Desktop and Phone)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The goal of this challenge is to design the look and feel of a responsive website. The site will be a management tool for individual loan officers and a gateway for customers to convert (educate and engage).
You are provided with stories and rough mockups as reference. However, DO NOT JUST COPY/RESKIN the mockups, they are just a simple reference. You are encouraged to come up with your own solutions suggesting best practices in usability and thinking in a smooth mobile transition/experience.
Project Background
Any licensed mortgage loan officer can create an account and enter their current interest rates, points, annual percentage rate (APR) and closing costs for a number of mortgage products such as 30 year fixed, 15 year fixed in both conforming and jumbo in the USA states they are licensed to do business in. Mortgage interest rates are subject to change every single day and often times they can change throughout the day. As such, if a loan officer wishes to advertise mortgage interest rates that are actually available to consumers, they must update their rates every single day and sometimes several times per day.
Then, we publish all of the mortgage interest rates (and associated data) from all of the loan officers who have entered their rates, in tabular form, on a webpage. We create a unique tabular page of loan officer rates for each product and for each USA State. For example, 30 year fixed conventional in the state of Colorado is one page. We publish the table of rates in descending time/date stamp order, meaning the most recently updated interest rate quotes by a loan officer are displayed first. The published pages are re-generated once every X number of minutes.
Design Goals
It is very important to keep in mind the essential problems we need you to focus on while keeping the flow simple and intuitive.
- For the Customer. Focus on the the simplicity of entering a zipcode and having the interest rate information (tables) appear in one click. Then with some navigation options to help them see different products quickly and easily.
- For the Loan Officer. It needs to be a simple UI, very straight forward, allowing an easy management of the content that the customer will read/browse. The Loan Officer should get used to this UI very quickly, help him out!
As for visual guidance, avoid cluttered designs, think of depth and let the content breathe. We have certain preference for clean, flat and solid style, although we are open to suggestions.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- See Mockups.pdf for reference. They contain a few technical instructions but you’ll be able to get the concept overall by reading them. You are encouraged to come up with your own solution regarding to layout and visual design.
- Screens organization and features allocation is also up to suggestions.
1. Home (Desktop and Phone)
See page #1.
This should be a very welcoming and humanized landing page. Customers will land on this page as a first step to evaluate mortgage rates.
When clicking on “Display Mortgage Rates” it should display a table similar to page #8. The next button should be a call to action to an external website. Make it read differently.
2. About Us (Desktop and Phone)
See page #2.
Make sure to make it flexible to add more content than the one displayed in the mockups. Adding images, lengthy text, bullets, etc.
3. Loan Officer Login/Registration (Desktop and Phone)
See page #3, #4, #5 and #6.
The page itself should be very welcoming too, same way as the client facing home page. This is the landing page of Loan Officers.
Make the registration process very friendly, maybe adding some icons, useful hints, profile completeness indicator, among others. It should be VERY EASY to create an account for them.
4. Loan Officer Dashboard (Desktop and Phone)
See page #7 and #8.
This is the rates editor available for registered loan officers. It should have a navigation that allows editing the profile details and rates.
Rate Editor
After the account creation the user get automatically set up with a list of records. All the values in the table are editable except for the product name (page #12). User can not add new records to the table, just modify the ones he/she is provided with.
There should be a way to set active or inactive the loan officer. Add a button/link to enable/disable the status of the current loan officer. Show both scenarios, active and inactive.
Edit Profile
User should be able to edit back the profile. It should have the same user registration page features but also keep the overall navigation to go back to edit rates.
Branding Guidelines
- Use a placeholder for the logo.
- We’re open to suggestions regarding to colors and fonts.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com). Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Design References
The following references are just for inspiration and to set you up within the mortgage ecosystem. DO NOT COPY anything, we are looking for original ideas. From both, we liked the ability to go back to the home page to enter a different zipcode and the rate tables layout (simple) but we need to make it original and more readable.
- Zillow.
- BankRate.
Target User
- Licensed mortgage loan officers. They provide the content in the form of currently updated mortgage interest rates for a number of mortgage products.
- Consumers. Consumers who are shopping for mortgage pricing information on the home they are thinking of buying or refinancing.
Judging Criteria
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- Cleanliness of your graphics and design.
- Are mobile-first considerations appropriately applied to the design concept?
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 Sketch, Adobe Photoshop or Illustrator. 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.
We need your creative skills to come up with a solution for a responsive website that will help loan officers managing Mortgage Interest Rates for customers in a very simple way. Looking forward to seeing modern design experience.
Best of luck!
Round 1
Submit your design for a checkpoint feedback.1. Home (Desktop and Phone)
2. About Us (Desktop)
3. Loan Officer Login/Registration (Desktop)
4. Loan Officer Dashboard (Desktop and Phone)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback (ALL VIEWS).1. Home (Desktop and Phone)
2. About Us (Desktop and Phone)
3. Loan Officer Login/Registration (Desktop and Phone)
4. Loan Officer Dashboard (Desktop and Phone)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The goal of this challenge is to design the look and feel of a responsive website. The site will be a management tool for individual loan officers and a gateway for customers to convert (educate and engage).
You are provided with stories and rough mockups as reference. However, DO NOT JUST COPY/RESKIN the mockups, they are just a simple reference. You are encouraged to come up with your own solutions suggesting best practices in usability and thinking in a smooth mobile transition/experience.
Project Background
Any licensed mortgage loan officer can create an account and enter their current interest rates, points, annual percentage rate (APR) and closing costs for a number of mortgage products such as 30 year fixed, 15 year fixed in both conforming and jumbo in the USA states they are licensed to do business in. Mortgage interest rates are subject to change every single day and often times they can change throughout the day. As such, if a loan officer wishes to advertise mortgage interest rates that are actually available to consumers, they must update their rates every single day and sometimes several times per day.
Then, we publish all of the mortgage interest rates (and associated data) from all of the loan officers who have entered their rates, in tabular form, on a webpage. We create a unique tabular page of loan officer rates for each product and for each USA State. For example, 30 year fixed conventional in the state of Colorado is one page. We publish the table of rates in descending time/date stamp order, meaning the most recently updated interest rate quotes by a loan officer are displayed first. The published pages are re-generated once every X number of minutes.
Design Goals
It is very important to keep in mind the essential problems we need you to focus on while keeping the flow simple and intuitive.
- For the Customer. Focus on the the simplicity of entering a zipcode and having the interest rate information (tables) appear in one click. Then with some navigation options to help them see different products quickly and easily.
- For the Loan Officer. It needs to be a simple UI, very straight forward, allowing an easy management of the content that the customer will read/browse. The Loan Officer should get used to this UI very quickly, help him out!
As for visual guidance, avoid cluttered designs, think of depth and let the content breathe. We have certain preference for clean, flat and solid style, although we are open to suggestions.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- See Mockups.pdf for reference. They contain a few technical instructions but you’ll be able to get the concept overall by reading them. You are encouraged to come up with your own solution regarding to layout and visual design.
- Screens organization and features allocation is also up to suggestions.
1. Home (Desktop and Phone)
See page #1.
This should be a very welcoming and humanized landing page. Customers will land on this page as a first step to evaluate mortgage rates.
When clicking on “Display Mortgage Rates” it should display a table similar to page #8. The next button should be a call to action to an external website. Make it read differently.
2. About Us (Desktop and Phone)
See page #2.
Make sure to make it flexible to add more content than the one displayed in the mockups. Adding images, lengthy text, bullets, etc.
3. Loan Officer Login/Registration (Desktop and Phone)
See page #3, #4, #5 and #6.
The page itself should be very welcoming too, same way as the client facing home page. This is the landing page of Loan Officers.
Make the registration process very friendly, maybe adding some icons, useful hints, profile completeness indicator, among others. It should be VERY EASY to create an account for them.
4. Loan Officer Dashboard (Desktop and Phone)
See page #7 and #8.
This is the rates editor available for registered loan officers. It should have a navigation that allows editing the profile details and rates.
Rate Editor
After the account creation the user get automatically set up with a list of records. All the values in the table are editable except for the product name (page #12). User can not add new records to the table, just modify the ones he/she is provided with.
There should be a way to set active or inactive the loan officer. Add a button/link to enable/disable the status of the current loan officer. Show both scenarios, active and inactive.
Edit Profile
User should be able to edit back the profile. It should have the same user registration page features but also keep the overall navigation to go back to edit rates.
Branding Guidelines
- Use a placeholder for the logo.
- We’re open to suggestions regarding to colors and fonts.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com). Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Design References
The following references are just for inspiration and to set you up within the mortgage ecosystem. DO NOT COPY anything, we are looking for original ideas. From both, we liked the ability to go back to the home page to enter a different zipcode and the rate tables layout (simple) but we need to make it original and more readable.
- Zillow.
- BankRate.
Target User
- Licensed mortgage loan officers. They provide the content in the form of currently updated mortgage interest rates for a number of mortgage products.
- Consumers. Consumers who are shopping for mortgage pricing information on the home they are thinking of buying or refinancing.
Judging Criteria
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- Cleanliness of your graphics and design.
- Are mobile-first considerations appropriately applied to the design concept?
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 Sketch, Adobe Photoshop or Illustrator. 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.