Challenge Summary
Welcome to the (FreeBeer) – Mobile Application Design Concepts Challenge! This challenge is focused on creating design concepts and visual ideas for a web-based mobile application to show the user experience of the “first notice of loss” process.
We currently have a website version of the FNOL process and now we need to convert it to a mobile experience!
In this challenge we are looking for DESIGN CONCEPTS on how UI/UX of this web-based Mobile Application should be designed in order to help achieve our business goals.
Round 1
Submit your design for a checkpoint status review
0. Login page
1. Landing page
2. Loss report view
3. Involved parties view
4. If you have time - a 1024x758 presentation/overview of your design
- 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
0. Login page
1. Landing page
2. Loss report view
3. Involved parties view
4. Details view
5. Confirmation view
6. If you have time - a 1024x758 presentation/overview of your design
- 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 claims 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 policy holders to document and submit claims, and also perform other activities such as view policy, make payments, and request changes to their policy, and schedule an inspection. This application should work on mobile, tablet, or desktop.
This application is going to be used by Homeowner or business owner: They need to log in and fill out their insurance claim online, view policy, request changes, etc.
Download the existing “website” application screenshots and carefully review them. Please post any questions you might have for the client in the forums.
Design Concept Goals:
- How should this web-based mobile/tablet/desktop application work?
- Suggest screen flows, navigation and screen effects.
- How quickly can you find information?
- What is the best UX for a client trying to report loss or navigate to other self-service functions?
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
- We want this to be designed simple/clean/sophisticated!!
Submission Details:
- Use the 320 x 480px (Standard sizes) for submission format.
- Make sure you create graphic in 'shape' format, so when resize for retina versions, graphic still look sharp!
- It will be great if you can provide the landscape version.
- Make sure you include screen effect ideas.
User Story:
- User logs into their account and view their dashboard.
- If the user has not logged in, they register using their policy number. Social login is optional.
- User wants to add another (existing) policy to their application so he/she selects ‘Policy Search’ option.
- User is now on Policy Search view, and will fill the necessary information to find the insurance policy he is looking for.
- On policy view the User will select from their listed policies and choose “Report Loss” option.
- Application will populate “Report Date & Time”
- User will select a date of loss or date damage discovered
- User selects a cause of loss from a pick list
- Now the User will fill the loss report form and when he is done he/she will click on “Next Page” button to be redirected to “Involved Parties” view.
- Inside “Involved Parties” view the User can add or edit existing parties by clicking on an icon. A popup will appear with claimant information so the User can edit the information, when the User is done he can click “Update” button and then “Next Page” button to be redirected to “Details” view.
- Inside “Details” view the User can write a description of the loss and any additional information about the claim.
- On this page the User will be able to attach pictures (take picture using mobile device, or select existing pictures) to the claim.
- When the User is done they will click “Next Page” button to be redirected to “Confirmation” view.
- Inside “Confirmation” view the User reviews the information they entered in the claim, and if everything is correct they click on “Confirm” button.
- State specific fraud language displays and requires an acknowledgment button.
- Once “Confirm” is selected user is presented with a claim number and the claims T#
Challenge Requirements:
- This will eventually be a responsive design - think mobile first and what the best user experience is for this application
- Design the overall screen flow optimized for smartphone browser.
- Design each screens with simple/clean/sophisticated manner, without going too far from the company branding look & feel.
- Review the user story and capture the interactions needed to
- Be creative on screen flow, screen design and screen effects!
- Use the provided screen shots to understand the process NOT for branding guidelines (FreeBeer Screen Shots - Agent Portal.pdf.zip)
- Follow the branding guidelines provided (Branding Guidelines.pdf.zip).
- Review the submission rounds for requested screens.
Supporting Documents:
- Existing application screenshots (FreeBeer Screen Shots - Agent Portal.pdf.zip)
- Branding Guidelines (Branding Guidelines.pdf.zip)
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 user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should be possible to build and make sense as a web-based mobile 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.