Challenge Summary
Welcome to AFR Responsive Site Redesign Challenge!
We need the community help to redesign a mortgage website, American Financial Resources. The existing design is outdated, it needs a total revamp style-wise, a trendy and exciting design but keeping the same content.
Best of luck!
1. Home (Desktop and Tablet views)
3. Blog List (Desktop and Tablet views)
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1. Home
2. Content Page
3. Blog List
4. Blog Post
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The goal of this challenge is to redesign the look and feel of the AFR website, a Personal Self Service Mortgage Lending tool. We’re looking forward to see a modern, clean and professional responsive web design that let the users easily navigate the tools and interact with the features.
Screens Requirements
Overall
- Follow the existing website for data and visual reference.
- ALL DATA and links must be represented in the required pages of the redesign to maintain existing search engine rankings.
- Navigation items and sub-items must be present in your design. They can be combined into a mega menu as opposed to multiple dropdown menus. See amazon navigation for instance, that’s a good approach.
- Show hover/active states for buttons, dropdowns, elements with interaction, etc.
- Regarding Links, Icons, and buttons on top right of the screen, No Fees and Assurance Badges should remain, house, with chat and call can be combined into a contact call/chat element, and the ratings can remain or be placed in the footer.
1. Home
- See https://www.afrmortgage.com.
- Integrate a few blog posts (title, short description) to the home page.
1.1. Request Form
- Display the request form you can see in the right side of the page. Feel free to lay it out as you want.
2. Content Page
- See https://www.afrmortgage.com/mortgage-loans.php.
- Extract the content and represent it in your design.
3. Blog List
- Blog page lists all blog items, with title, description, picture.
- Consider pagination scenario.
4. Blog Post
- Blog details page shows the content of one independent view (one blog post).
Branding Guidelines
- Download and follow the Branding Guidelines.
- Use the logo, colors and fonts from the guidelines.
- 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.
- Use vector shapes to facilitate future modifications and make sure to check your design looks pixel perfect in both views.
Stock Photography
- Stock photography is allowed. It should be centered about home buying and the joys of being a new home owner. Also users may be interested in loans for home renovations which could involve stock photography related to residential construction.
- Stock artwork is NOT allowed for this challenge.
Target User
- New home buyer, generally trying to compare rates. User should feel good and happy about the home buying process.
- Home owner looking to renovate, generally trying to compare rates. User should feel comfortable with construction.
Judging Criteria
- Interpretation and adherence to the Branding Guidelines.
- Interpretation of the user experience.
- Is the website easy to use?
- 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 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.
We need the community help to redesign a mortgage website, American Financial Resources. The existing design is outdated, it needs a total revamp style-wise, a trendy and exciting design but keeping the same content.
Best of luck!
Round 1
Submit your design for a checkpoint feedback.1. Home (Desktop and Tablet views)
3. Blog List (Desktop and Tablet views)
- 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
2. Content Page
3. Blog List
4. Blog Post
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The goal of this challenge is to redesign the look and feel of the AFR website, a Personal Self Service Mortgage Lending tool. We’re looking forward to see a modern, clean and professional responsive web design that let the users easily navigate the tools and interact with the features.
Screens Requirements
Overall
- Follow the existing website for data and visual reference.
- ALL DATA and links must be represented in the required pages of the redesign to maintain existing search engine rankings.
- Navigation items and sub-items must be present in your design. They can be combined into a mega menu as opposed to multiple dropdown menus. See amazon navigation for instance, that’s a good approach.
- Show hover/active states for buttons, dropdowns, elements with interaction, etc.
- Regarding Links, Icons, and buttons on top right of the screen, No Fees and Assurance Badges should remain, house, with chat and call can be combined into a contact call/chat element, and the ratings can remain or be placed in the footer.
1. Home
- See https://www.afrmortgage.com.
- Integrate a few blog posts (title, short description) to the home page.
1.1. Request Form
- Display the request form you can see in the right side of the page. Feel free to lay it out as you want.
2. Content Page
- See https://www.afrmortgage.com/mortgage-loans.php.
- Extract the content and represent it in your design.
3. Blog List
- Blog page lists all blog items, with title, description, picture.
- Consider pagination scenario.
4. Blog Post
- Blog details page shows the content of one independent view (one blog post).
Branding Guidelines
- Download and follow the Branding Guidelines.
- Use the logo, colors and fonts from the guidelines.
- 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.
- Use vector shapes to facilitate future modifications and make sure to check your design looks pixel perfect in both views.
Stock Photography
- Stock photography is allowed. It should be centered about home buying and the joys of being a new home owner. Also users may be interested in loans for home renovations which could involve stock photography related to residential construction.
- Stock artwork is NOT allowed for this challenge.
Target User
- New home buyer, generally trying to compare rates. User should feel good and happy about the home buying process.
- Home owner looking to renovate, generally trying to compare rates. User should feel comfortable with construction.
Judging Criteria
- Interpretation and adherence to the Branding Guidelines.
- Interpretation of the user experience.
- Is the website easy to use?
- 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 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.