Challenge Summary
Welcome to PTP – Quote Tool Design Challenge!
Pillar to Post provides home inspection services. We’re developing a new tool that will be used by agents (Franchise or PTP Customer Service Representative(CSR)) to give a quote and a schedule for Franchises who are calling for home inspections. This tool will allow them to give a price quote and to schedule a date for inspection. The goal of this tool is to allow for greater efficiency in providing quote and schedule on the inspection.
You will be provided with the wireframes we built for this tool.
Note: Please do not submit a colored version of wireframes as they are just meant to guide you, outline necessary screens, and further explain the application basics. You are highly encouraged to enhance the wireframes with your own design style / ideas / solutions during this design challenge.
Round 1
Submit your initial design for checkpoint feedback:
1. Your initial design.
- If you have time - Provide us with a click map for your design.
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Final design plus any Checkpoint feedback:
1. Your final design.
- If you have time - Provide us with a click map for your design.
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Description:
Pillar to Post provides home inspection services. We’re developing a new tool that will be used by our client to give a quote and a schedule for Franchises who are calling for home inspections. This tool will allow them to give a price quote and to schedule a date for inspection. The goal of this tool is to allow for greater efficiency in providing quote and schedule on the inspection.
The recommended device for user is to use onsite is an iPad/iPad mini, but we will need a responsive design experience to allow the flexibility of using a laptop or phone.
Branding Guidelines:
- Branding Guideline (PTP_Internal-Style-Guide.docx).
Target devices:
- Your solution needs to consider Responsive Design when viewed on Portrait and Landscape view of Tablet device.
- Tablet Resolution: Design for iPad 2 Retina Display 2048px x 1536px.
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
Design Goals:
- To achieve the best UX based on the provided functionality so the tool can be easily used.
- We have a lot going on (functionality wise) in this tool, what is the best way to show this without losing focus.
Supporting Documents:
- Wireframes (Wireframes.zip).
- Logo (ptp-logo.jpg).
- Logo Standards (PTP_LogoStandards_2013.pdf).
- Fonts (Calibri.ttf.zip & Gotham.zip).
Required Functionality:
The quoting tool should contain the following functionalities:
The “Radio Buttons” nomenclature below is intended to capture single select options. This does not necessarily need to be achieved through the use of Radio Buttons.
Package: (These options need to display a cost associated with them and this is not on the wireframe. The idea is that the customer service rep would be able to tell the caller the price of the packages without actualy having to select the option.)
- Radio buttons:
-- Plus.
-- Premium.
-- Prestige.
Home Type: (These values could be renamed or changed and will be returned by a function before rendering the page)
- Radio buttons:
-- Duplex.
-- Triplex.
-- Quadplex.
-- Condo.
-- Townhome.
-- Single Family Home.
Inspection Type:(These values could be renamed or changed and will be returned by a function before rendering the page)
- Radio buttons:
-- Pre Listing.
-- Buyers Inspection.
-- Other:
---- Dropdown list with multiple options.
Year Home Built:
-- A dropdown list or an incrementer can be used here.
Property Address:
-- Street Address.
-- City.
-- State/Province.
-- Zip/Postal Code.
-- Country.
Square Ft or Home Value:
-- We need an input field to enter home area in square footage or to enter home value($).
Services List:
- A table with four columns:
-- Select (Checkbox).
-- Service.
-- Price.
-- Sub Contract (Checkbox).
Dynamic Invoice Calculator:
- This widget will the total cost of your selections above in real time; value changes based on your selections above.
Other Stuff: There are a host of other fields that will need to be displayed on this page in some fashion (up to 20 of them). These fields are not required as part of the effort involved in pricing but would include details the inspector would want to know. Ideally these would be able to be shown in a way that doesn’t clutter the UI experience but are easily retrieved for population when ready. Also this list of fields is likely to change over time.
One set of key fields to mention here are the fields to capture the listing agent and buyers agent (will be stored as contact records in salesforce). These fields will also need to have a way to easily search for a contact and add one if they are not found. If adding a contact the key fields would be name, email address, and phone number.
Available Franchises:
- We need a widget to show available franchises in the area for quick change if the schedules weren’t working out.
Coupons Area:
This is a list of available coupons that would show the name and rules of the coupon (i.e. $50 or %10 off of added services. The user would be able to select any one of the list of coupons to apply the coupon to the quote being presented.
Also the user would be able to apply one or many line item adjustments in this area that would be a name, reason code, description, and a dollar amount.
Both of these would show up in the invoice calculator as they were being applied.
Scheduling Widget:
- This is going to be a placeholder only as this will be integrated from a third party. The example included here is not the final version but is close to what it will look like (Scheduling Widget.png).
- Width of this can be fixed.
- Height must be variable.
Target audience:
- Franchise or PTP CSR.
Judging Criteria:
- Interpretation and Adherence to the provided branding and look.
- Adherence to the user flow outlined in the wireframes.
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. See more information about Final Fixes.
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.