Challenge Summary
Welcome to Pillar to Post – Home Inspection App Design Challenge!
Pillar to Post provides home inspection services. We’re developing a new app that will be used by inspectors on site as they perform their inspections. This app will allow them to collect data throughout the inspection, which is used to generate a report. The goal of this app is to allow for greater efficiency in performing an inspection and reporting on the inspection.
The recommended device for inspectors 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.
Previously we ran a wireframe challenge to build the screens needed for this tool and you will be provided with the wireframes we built.
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. Dashboard.
2. Bookings.
3. Today’s Booking Detail.
4. Booking Package Detail.
5. Inspections landing Page.
- 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. Dashboard.
2. Bookings.
3. Today’s Booking Detail.
4. Booking Package Detail.
5. Inspections landing Page.
6. Inspections Manage Details.
7. Details Confirm.
8. System notifications (Offline status indicator; Success/Warning/Error messages).
- 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:
The goal of this challenge is to create the look and feel for the Home Inspection App.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Branding Guidelines:
- Branding Guideline (PTP_Internal-Style-Guide.docx).
Target devices:
- Your solution need to consider Responsive Design when viewed on Portrait and Landscape view of Tablet device.
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
- Tablet Resolution: Design for iPad 2 Retina Display 2048px x 1536px.
Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
Supporting Documents:
- Wireframes (Wireframes.zip).
- Logo (ptp-logo.jpg).
- Logo Standards (PTP_LogoStandards_2013.pdf).
- Fonts (Calibri.ttf.zip & Gotham.zip).
Considerations, in addition to common best practices for UI design:
- The app will be used in a variety of environments, so please consider a range of lighting conditions from bright sunlight outdoors, to indoors (a dark basement, for example).
- The inspector will need to capture information as they are exploring areas of the home, and will need to be able to make easy selections as much as possible. They will need to type in data since they may need to add comments, but best to keep this to a minimum.
- Inspectors usually have the homeowner follow them on the inspection. They should be able to remain attentive to the homeowner’s questions and also be able to point out various things during the inspection. So, it’s important to minimize their interaction with the device, with intuitive and accessible placement of navigation and controls being key.
- The app will have offline capabilities, so we'll need visible indicators to show whether they're offline or online, and let user know their data is still being saved and will sync when back online.
- White space is welcome!
Required Screens:
1. Dashboard:
- First thing users see once logged in.
- Serves as both the navigation into main areas of app as well as an at-a-glance view of what’s coming up.
- Status or action-items are flagged, user can click to be taken directly into that item.
- User can easily access items that would otherwise be nested within several layers – minimizing user interaction
- Offline status indicator should be displayed in a consistent location that is not obstructive.
2. Bookings:
- This allows users to view Today’s Bookings, Upcoming Bookings, and Past Week’s Bookings.
- Normally not more than a few appointments per day.
- Search bar allows user to select a date range.
- Map should show all the appointments for that day so user can see at a glance where they’re going.
- Details links to Booking Detail for that item.
3. Today’s Booking Detail:
- This contains appointment date and time, property address, contact information, instructions, property details.
- It also denotes which level of services (package) has been selected, along with other services and discounts, and an option to edit.
- It’s important to call attention to the upgrades and add-on services that are available, and add them in 1-click from this screen.
4. Booking Package Detail
- This screen provides a detailed description of what’s included in the selected package, along with pricing and discounts.
- The screen is interactive in that a coupon can be selected from the list and will be added as a line near the subtotal, and will calculate the new the total.
- The upgrades/add-ons will also affect the totals. Upon selection it would calculating the new the total. One-click add-ons are desired.
5. Inspections landing Page
Provides a quick view of what’s coming up and lets user access the last few months of completed inspections.
Action buttons also serve as status indicators.
For reference:
Completed = This inspection is done for today.
Ready to begin = Template is set up and details are confirmed. Inspection can begin, so this would link to the inspection start.
Review details = Certain info is missing/unconfirmed. This would link to another screen for user to complete this action.
Secondary flags: “Need Contract Signed, Reschedule Requested” - these serve as another indicator of any pending status we might want to call out.
6. Inspections Manage Details:
- Shows the detail that’s already been captured related to a specific inspection (marked with checkmark) and allows user to input missing info.
- The required details are listed individually along the left, and user can click directly into that item, or click ‘Next’ to step through and view/edit items.
7. Details Confirm:
- List everything in one view so user can confirm.
8. System notifications (Offline status indicator; Success/Warning/Error messages):
- Success/Warning/Error message.
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 audience:
- Pillars to Post Inspectors.
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.