Challenge Summary
Welcome to the FreeBeer - FNOL Responsive Design Update Challenge! This challenge is focused on creating the "desktop" and "tablet" responsive views based on our previous "mobile" design concepts challenge. We need you to analyze the provided mobile experience and design the responsive "desktop" and "tablet" user experience. This challenge is not just enlarging everything but also making sure the page elements and grid adapt well for larger screens. We want our "first notice of loss" (FNOL) application to be an easy-to-use/quick application for filing insurance claims online!
Make sure you understand the principles of responsive design - we now want to finish our application design and get it ready for development.
Important Note: The provided mobile designs are close to complete - we are NOT looking to redesign them. This challenge is focused on using them as "mobile first" design and adapting the functionality for larger screens.
Round 1
Submit your design for a checkpoint status review
All required screen sizes for:
1. Login page (tablet + desktop)
2. Registration page (tablet + desktop)
3. Landing page (tablet + desktop)
4. Loss report view (4 steps) (tablet + desktop)
- Note: Other views from provided screenshots are optional.
- Readme.jpg : Provide notes about your submission
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus any checkpoint updates
All required screen sizes (tablet + desktop) for:
1. Login page
2. Registration page
3. Landing page
4. Loss report view (4 steps)
5. Details view
6. Confirmation view
7. Terms and Conditions and Fraud Statement view
- Note: Other views from provided screenshots are optional.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Details:
FreeBeer is an insurance company. The company has a process called “First Notice of Loss,” where a homeowner or business-owner can file an insurance claim online. The reason they have this website and process is because they need insurance claims to be filled out quickly after the event or loss. They want to make it more modern, convenient and timely for customers to document and submit claims, and also perform other activities such as view their policy, contact FreeBeer quickly, take photos of issues and manage their customer profile. This application will be HTML/web-based and needs to look good on mobile, tablet and desktop.
This application is used by one type of user:
- Homeowner or business owner: They need to log in and fill out their insurance claim online, view policy, request changes, etc.
Download the provided winning "mobile" design and PSD files. This is your "base" design.
- Carefully review the design
- Keep the provided brand and colors
- DO NOT redesign the site. We need this "mobile" design adapted for responsive views on "tablet" and "desktop"
- Let us know if you have any question
Note: FreeBeer is a code name for the client.
Supporting Documents:
- Winning "Mobile" Submission screens and PSD (Storybaords.zip)
- Branding Guidelines (Branding Guidelines.pdf.zip)
Required Screen Sizes:
- Desktop Screen size (Landscape) 2880 x 1800
- Tablet Screen size (Landscape) 2048 x 1536
Submission Details:
- Make sure you create graphic in 'shape' format, so when resize for retina versions, graphic still look sharp!
- Make sure you include any screen effect ideas.
Challenge Requirements:
- Filling the claim; “Report Loss” is the central focus of this application!
- Use the provided screen shots as the basis for your design (Storyboards.zip)
- Follow the branding guidelines provided (Branding Guidelines.pdf.zip).
- Review the submission rounds for requested screens
Screen Updates:
Note: The following updates need to be started from the provided mobile design, and we need them designed for tablet and desktop views as well.
1- Take a photo functionality:
- Take photo can be done in 3 different ways:
-- Landing page
-- Anytime in claim (top icon)
-- Step 3 (Evidence of Loss) 3 of new claim.
- Photo UX should show native phone experience (select photo or new photo) since this is not a custom native application.
2- Navigation:
- 06-1_Progress Menu.png
- 06-2_Progress Menu.png
- Hamburger menu should show:
-- Home
-- Edit claim (if already created)
--- Step 1 – loss report
--- Step 2 – contact information
--- Step 3 – evidence (photo)
--- Step 4 – Involved parties
-- Review claims
-- Profile
-- Policies
Required Screens & Updates:
Note: We do not need 2 or 3 screens if it can fit in one screen for Desktop/Tablet and it makes sense to design it that way
0. Navigation:
- 06-1_Progress Menu.png
- 06-2_Progress Menu.png
1. Login Screen:
- 01-1_Login.png
2. Registration page:
- This is a new page, we did not address it in the previous design.
- If the user has not logged in, they register using their policy number. Social login is optional.
3. Landing page:
- 01-2_Landing Page.png
- 01-3_Landing Page_Select.png
4.A Loss Report - Step 1 (Loss Report):
- Update the design to Swipe left/right within edit claim show go between step 1-2-3-4, think how you can capture this functionality in your design?
- 02-1_Loss Report.png
- 02-2_Loss Report.png
- 02-3_Loss Report_Take Photo.png
- 02-4_Loss Report_Take New Photo.png
- 02-5_Loss Report_Save Photo.png
- 02-6_Loss Report_Save Photo.png
- 02-7_Loss Report_Save Photo.png
4.B Loss Report - Step 2 (Contact Information):
- 03-1_Contact Info.png
- 03-2_Contact Info.png
4.C Loss Report - Step 3 (Evidence of Loss):
- 04-1_Evidence.png
- 04-2_Evidence.png
- 04-3_Evidence.png
- 04-4_Location.png
- 04-5_Location.png
4.D Loss Report - Step 4 (Involved Parties):
- Update the design to reflect this as step 4
- 05-1_Involved Parties.png
- 05-2_Involved Parties.png
- 05-3_Involved Parties_Edit.png
- 05-4_Involved Parties_Edit.png
5. Details View:
- 07-1_Details.png
- 07-2_Details.png
6. Confirmation View:
- 08-1_Confirmation.png
- 08-2_Confirmation.png
7. Terms and Conditions and Fraud Statement view:
- 09-1_Fraud Statement.png
- 09-2_Fraud Statement.png
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
Target User:
- Homeowner.
- Business Owner.
Judging Criteria:
- How well you plan the responsive screens and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should be possible to build and make sense as a mobile, tablet and web 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 JPG/PNG for your submission files.
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.
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.