WWPF Responsive Design Concepts Challenge

Welcome to WWPF Responsive Design Concepts Challenge! WWPF stands for World Wide Pipe Fitting. This challenge is focused on creating design concepts/visual ideas for a web application that will render addresses data. The application will be used to verify/validate existing address data in Salesforce.

We currently have a design direction (UI-Design-Challenge-Design-Direction.pdf.zip) for you to follow. We are looking for you to provide design concepts and click-path solutions based on the provided requirements. This is the first step in planning our web based application user experience!

In this challenge we are looking for DESIGN CONCEPTS on how this tool could look like.

Round 1

Submit your design for a Checkpoint feedback:
- Landing page
- Dashboard
- Browse Building Records
- Building Detail
- 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 Checkpoint feedback:
- Landing page
- Dashboard
- Browse Building Records
- Building Detail
- Edit Record
- Building Manager Validation From
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Challenge Description:
We have a customer looking to validate all the addresses for the "piping" that is being put into homes. You will be developing an application that will be used by internal WWPF employees to quickly and efficiently manage and update their records. There is also an element that we need your UX design consideration for which is the external facing component of this concept. We need you to help us come up with a custom designed form that WWPF can send out to property managers to help validate WWPF internal records. For this design challenge we will focus on desktop users, but you need to consider a mobile version for a tablet view as well.

We are looking for the [topcoder] design community to help us with planning our new "user experience" (UX).

Note: WWPF is a code name for the client.

Design Concept Goals:
- How should this application look?
- Suggest user screen flows and navigation.
- What should the priority features be?
- How quickly could you find information?
- What is the best UX?
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
- We want this to be MODERN design!

Important:
- We are looking for responsive designs.
- Follow the design guideline for colors and font selection.
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.

User Case Scenario:
Kevin is part of the WWPF internal data entry team and has been tasked with validating a large amount of records for his Salesforce database. He needs an application that allows him to do this in a quick and efficient manner and allows him to communicate and coordinate with external property���managers to obtain current records for his database. Typically this has been done with Excel spread sheets and a lot of man hours...but now with the WWPF Address Verification App...Kevin’s job just got a lot easier.

Kevin is quickly able to understand how he uses this new APP with the helpful user guide and user dashboard of the application. He can quickly view the records that he needs to validate and immediately jumps into action. He pulls up a Property Manager who manages multiple buildings with X number of units per building. He clicks down into the detail view of a particular building and runs a comparison of WWPF’s current records to the Postal Services current records and sees that his records have a number of records that are not up to date. From this point depending on how many records are out of date, he can manually update them, upload a new set of records for this building, or send out a request form to the building manager to obtain a current set of records for that building.

Required Screens:
1) Landing Page
This is the landing page for the application. It should very clearly show what user can do with this application and what the application is all about. Consider some hero imagery with calls to action and call outs to internal application functionality. A user can also click into a “getting started” section to get a more detailed overview of how to use the application.

2) Dashboard
What types of content should be on our user dashboard? Think about our internal target user and about what kinds of content should be on their dashboard to make their job easier.

3) Browse Building Records
As a user begins to view records he can browse thru a hierarchy of records. The hierarchy of data to be rendered is as follow (must be grouped accordingly on UI) Unit addresses > Building Address > Property Address. All data will live under a property record (parent to building and address) that will be rendered in tool for validation/update.

4) Building Detail
As a user can quickly run a comparison to see how accurate his current record is using a 3rd party API from something similar to http://smartystreets.com/. The end result of this comparison should update total # of addresses accurate, total # of modified addresses, total # of addresses added with rollup count of total # of units for property. From here the user can view, edit, or delete the record. Or...the user can upload a new record if need be, manually update the record, or request a new record from the property manager via a address validation form.

5) Edit Record
A user can update a record in the application. Address editing should follow standard Postal Service address formatting for all users modifying form (free form will not merge will without our backend systems, and standardizing thereafter will only create another task). After updating the record he can save it and go back to the property record to see it’s overall status and edit any additional records if need be.

6) Building Manager Validation Form
This is a form that is sent out to property and building managers for them to validate our records. They would typically receive this via an email. What is a better user experience for this process? Consider a custom designed form for the property manager to fill out and submit back to World Wide Pipe Fitters internal team. Sample content for the form below.

Thank you for your excitement about WWPF! In order to expedite the design and build process for you, we’ll need a few details about your Property. Please open the attached Unit Labeling Form and provide the following information:
- Validate your contact info and property info���
- Please enter the exact building count, street address, unit addresses, city, state and zip code for your property(s) in the attached form to ensure that we can verify every unit in our system
- Please email your completed form back to me as soon as you can so we ensure a smooth Fiber experience
- Please let me know if you have any questions.

Best,
WWPF Account Coordinator

Supporting Documents:
- Design Direction (UI-Design-Challenge-Design-Direction.pdf.zip).

Target User:
- Property managers.
- Internal data entry teams.

Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a 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.