SunShot - Bright Harvest - Order Management Responsive Web Application Design Challenge

Welcome to Sunshot - Bright Harvest UI Design Concepts Challenge. In this challenge, we are looking for your help to create a responsive web application that will provide Bright Harvest’s clients with flexible residential solar designs, faster turnaround time and lower cost of delivering our innovative precision remote PV design services.

We are looking for DESIGN CONCEPTS on what should the user see and experience when using the application!
Good luck and we’re looking forward to your submissions!

NOTE: We are awarding $150 for all best submissions at checkpoint!

Round 1

Submit your initial designs for Checkpoint Feedback
1) Login Page - (Desktop)
2) Client Project List Page - (Desktop)
3) Project Detail Page - (Desktop)
4) New/Edit Project Page - (Desktop)
5) Admin Project List Page (Queue) - (Desktop)

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Your Final designs for all the required designs with all Checkpoint Feedback implemented.
1) Login Page - (Desktop)
2) Client Project List Page - (Desktop)
3) Project Detail Page - (Desktop)
4) New/Edit Project Page - (Desktop)
5) Admin Project List Page (Queue) - (Desktop)
6) Project Detail Page - (Desktop)
7) Upload Model - (Desktop)
8) Manage Users/Companies - (Desktop)

In addition to above desktop views, we also need you to show UI elements that you think might change their appearance/layout (how the elements stack in lower resolutions, etc) in different devices.

NOTE: We are not looking for all the above screens to be designed for different devices just need to identify the important elements that will change across different devices (For ex: Navigation in desktop will be different than that of a mobile or a tablet...we are looking for you to submit such changes and anything else that you think are important).

Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

The Purpose of this challenge is to come up with look & feel and flow of the existing application We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).

Wireframes has been provided to help you get started with your designs (Please DO NOT COPY).

About the Client:
https://www.brightharvestsolar.com/
Bright Harvest Solar (BHS) is a remote solar design company.

Design Considerations:
- Looking for modern, intuitive user interface
- Focus on the design being a great user experience, think simple but effective solutions!
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- What should the priority features be?
- How quickly could you find information?
- As this is a data centric application, we want you to create vector artwork/icons wherever appropriate. 

Look and feel: 
- The interface of this app should be sparse and task focused with minimal adornments.
- The Bright Harvest remote solar design service is offered as a white­label product to select clients so pages will not have a logo and need to maintain a neutral appearance from a branding perspective.
- Please do not use logo in your designs, for now just have a logo placeholder!

Design Size:
This will be a responsive web application, we need the design to be of the following sizes:
- Desktop: 1280px width and height as required
- As this is a responsive application, we would like you to submit/show changes at high level for standard breakpoints i.e. how will the navigation change across different
device, how things will stack/change, etc
- Standard breakpoints: 1024px, 768px, 320px

NOTE: We are not looking for all the below screens to be designed for different devices just need to identify the important elements that will change across different devices (For ex: Navigation in desktop will be different than that of a mobile or a tablet...we are looking for you to submit such changes and anything else that you think are important).

Mobile View Consideration:
- Client has suggested to remove certain fields in lower resolutions (mobiles) due to space constraints
- Please go through this document to see what fields can be removed under which pages:
https://docs.google.com/document/d/1l24t9mDqnaN9gRxqV14hVzXPXXIBw7Mr9R-5lKq9d3Q/edit?usp=sharing

Required Pages:
We are looking for the below screens to be designed/considered in your concepts.

Wireframe Reference:
To help you get started we have provided wireframes “BHS_Order_Management_Web_App wireframes.pdf” for your reference.
- Please do not copy them exactly, we are looking for your help to improve, provide great layouts and user experience!!

NOTE: 
- Within the wireframe table cell contents should be truncated as needed (except where noted otherwise) to avoid the need for horizontal scrolling. 
- Tables should use vertical scrolling or pagination as shown in the wireframes. Ideally, all pages should work in both portrait and landscape format when viewed on an iPad. 
- This includes when the user rotates the device after the page has finished loading.

1) Login Page:
Reference: Page 1 of wireframes
- The page will display a login form
- User will need to provide Email address and password to login into the application
- They will have option to reset password via email
-  Ideally, "Login in with Google" is presented as an alternative to giving the user yet another password to keep track of.

Create an Account:
- User will be able to create a new account with the site, they could see a modal popover dialog on separate wireframe page "Create/edit user account"
-  The following fields can only be viewed and modified by a user whose role is "BHS admin"
** User Role (set to "Client" by default) 
** Initials

A. All Users:

2) Client Project List Page:  
Reference: Page 2 of wireframes
- This page shows all projects belonging to companies of which current user is a member
- We need an explicit "Refresh" button because a user may leave this page open in a browser tab for many hours and the data shown will become stale. Ideally, the table data can be freshed from the server without needing to re­render the entire page.
- - - Even better would be live updating or at least an automatic check with the server (every 60 seconds?) followed by a refresh if needed.

- Pagination (server side) should dynamically determine the most records that will fit vertically on the user's screen without scrolling. Total record count for some users is expected to grow to 10,000+ records
- Projects will have"Edit" and "Cancel" actions but these are only enabled for projects whose status is "In queue", "Hold", "Payment pending" or "Revision requested".
- Clicking/tapping on any row should navigate to the Project Detail View for that Project record. This is the most frequently performed user action on this page.
- Selecting a record and clicking "Edit selected" should open that Project record in the "New/Edit Project" form page. This function is used infrequently hence the two ­step interaction (1. tap to select row using radio button, 2. select action using button/link below) as opposed to the direct tap to open action in the previous step.
- Selecting a record and clicking "Cancel selected" should display the modal popover dialog shown.
- - - - If the user clicks "Cancel project" in the modal dialog, the project status should be changed to "Canceled" and a new "Note" record should be create with the Note text "CANCELLED. " as an audit record of who canceled the project and when.
- - - - If the user entered the optional "Reason" text, this text should be appended to this note. For example, the if the text entered in the "Reason" text field was "No longer needed.", the Note would have the text "CANCELLED. No longer needed." If the "Reason" is left blank, the Note would have the next "CANCELLED. "                    

- "Added" date is timestamp when project record was created.
- "Updated" date is timestamp when Project record was last modified or most recent Model, Layout, Note or Attachment record modified timestamp, whichever is newest
- Default table sort is Updated column, most recent on top.
- Note displayed for each project is only the most recent note (if there is one)
- Project, Address and Notes fields should be truncated to fit on one line without horizontal scrolling.
- Search would ideally work like autocomplete, showing an updated list of matching project names and addresses in a drop­down menu below the search field as the user types. If the user selects an item from the list the application should display the Project Detail Page for the selected project.

3) Client - Project Detail Page:
Reference: Page 4 of wireframes

NOTE about wireframes:
- In this page, we have some UI elements shown in red (for example: page 4 and 8 in pdf) which indicates that these are only visible and accessible if current user role is "BHS admin". 
- The red color is intended to be a color key for the wireframe only (please do not make these in red in your designs).

For this page, we would like you to ignore the red text/red UI elements in the page and create a version without that.
Tables and other interactions:
- Follow the content from wireframes (please note the change we have in the wireframes - its indicated below)
- All tables on this page show all records (no pagination, use vertical scrolling).
- Layouts need to be associated to models i.e. a user will open a model to show the related layouts. Do not keep them separate like shown in the mockups.
- In the site models, we see “Delivery note” for each row - this is intended to be seen by the client. This is where BHS communicates to the client any concerns about the order, possible conflicts in the original order, etc.

Actions:
- "Request revision" button displays a modal window similar to "Add note" except the Submit button is labeled "Request revision". Upon submission, the Project status is changed to "Revision requested".
- "Hide selected" marks select records as hidden. Does not permanently delete from database.
- "Show hidden" reloads/refreshes view with hidden records unfiltered
- "Duplicate selected" should:
- - Make a copy of the selected Layout record and Append it to the end of the Layout table.
- Open the newly created Layout record in the Interaction Layout screen (external app)

Notes Table:
- Need to be sorted by date/newest.
- Looking for your design ideas on how notes can be shown (think modern!!)
- Notes text need to be visible right away (do not truncate the text).
- "Add note" is a modal popover dialog. It accepts only plain text, it can accept at least 1000 characters.
- Show us how a new note will be added?

Attachments are JPG, PNG or PDF files associated with the Project record.
- Display properly sized thumbnail images for JPG and PNG files
- Display PDF icon for PDF file attachments
- Clicking/tapping on thumbnail displays full size image and a "X" close button.

4) New/Edit Project Page:
Reference: Page 5 of wireframes
- This form is used to create a new project request and to edit an existing project record
- Follow the required fields/content from wireframe, you are free to re-arrange this form!
- You are not required to design the google map/interactive map shown in the right (maybe show them in this page and add a placeholder that “It will be added later by a BHS Admin”.

Company Select Menu:
- Show few companies in the drop-down (how will the drop-down style look like?).
- System Size is a number. "Modules" drop-­down next to system size specifies the units in which System Size has been expressed. Drop-down menu options for modules are: Modules, kWh, Maximum fit only.

Inverter efficiency has the following options: 
- Unknown, 90, 90.5, 91, 91.5, 92, 92.5, 93, 93.5, 94, 94.5, 95, 95.5, 96, 96.5, 97, 97.5, 98
- How will the drop-down styles look like?

Setback: This shows the value in inches

Upload Files:
Need to be able to upload files
** Images in full res, no resizing/compression
** Upload multiple files - images, 10-12 files
** Need to work around storage / security
** App hosted on Google, they have existing google storage

Action Button:
- Clicking the "Save" button returns the user to the Project List View page

B. Bright Harvest Solar (BHS) Admin:

5) Admin Project List Page (Queue):
Reference: Page 3 of wireframes
- We need way to search and also provide options to create a new project
- "Filter results" checkboxes allow user to hide records based on their Client status. Default settings should be as shown in wireframe.
- This page is only accessible if current user role is "BHS admin". This is almost same as the "Client Project List Page" template but with following changes:
- Displays all projects from all companies.                    
- Selecting a radio button is enabled regardless of project status (all projects can be selected for Edit/Cancel operation).
- Replace Address column with Company column
- Replace Updated column with Due timestamp
- Default sort should be Due timestamp
- Rush column
- Internal Note instead of Client Note

(Please make the following change as against what we have in wireframe)
Allow inline edit for below columns and have these as drop-downs, so users can directly choose values in the table:
- Client Status (drop-down values: Payment pending, Hold, In queue, In progress, Delivered, Revision requested, Canceled)
- BHS Status column (drop-down values: Not started, Modeling, Ready for PV, Adding PV, In review, QA revision, Updated, Approved, Delivered, Canceled)
- Assigned User initials (drop-down values: you can have the drop-down values as some dummy text “MH, JL, TL, PV” - basically this will have all the initials of BHS admin)

6) Project Detail Page:
Reference: Page 4 of wireframes
- This page shows four tables: Site Models, Layouts, Client Notes and Internal Notes..
- Follow the content from wireframes

For this page, we would like you to create a version by including all details as shown in the wireframe including the the red text/red UI elements in the page.

Tables and other interactions:
- "Upload model" button, clicking on this opens a modal window (see separate wireframe page).
- "Hide selected" marks select records as hidden. Does not permanently delete from database.
- "Show hidden" reloads/refreshes view with hidden records unfiltered
- "Edit selected" opens the selected model in the "Upload/Edit model" modal popover dialog.
- "Delete selected" in b displays a confirmation dialog with the text. "WARNING: This will permanently delete the selected site model and all associated"
Show an alert whether your to proceed? (how can we show this in your designs)

Notes table:
- They will have the option to edit or delete the selected notes.

Internal Notes table (shown only for BHS Admin):
- Need to be sorted by date/newest.
- Looking for your design ideas on how notes can be shown (think modern!!)
- Notes text need to be visible right away (do not truncate the text).
- "Add note" is a modal popover dialog. It accepts only plain text, it can accept at least 1000 characters.- They will have the option to edit or delete the selected notes.

Attachments are JPG, PNG or PDF files associated with the Project record.
- Display properly sized thumbnail images for JPG and PNG files
- Display PDF icon for PDF file attachments
- Clicking/tapping on thumbnail displays full size image and a "X" close button

7) Upload Model:
Reference: Page 6 of wireframes
- This is accessed from the project details page and BHS admin will upload the model!
- This allows the user to drag/drop the model file, show us how a file dragged into the page will look like?
- They will be able to add a delivery note.
- Allow user to choose the date and time, if you are showing a date picker - then please make sure to show the design for it!

8) Manage Users/Companies:
Reference: Page 7 of wireframes
- This page is only accessible if current user role is "BHS admin"
- Both tables are sortable by any column and have pagination. Default sort is by Modified timestamp, most recent on top.

New/Edit User opens "Create/edit user account" modal popover dialog:
Reference: Page 8 of wireframes
- "Member of" list is read only
- "Role" can only be modified by "BHS admin"

New/Edit Company opens "Create/edit company account" modal popover dialog
Reference: Page 9 of wireframes
- This allows the users to add a new company
- All users who are members of a company can access projects belonging to that company

Target Audience:
- Residential home owners who want to install solar systems
- Installers who are on the hook to analyze site
- Financiers who are financing the project (these companies require shading analysis. Few companies provide this information and connecting it into a interactive design)

Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Your design should possible to build and make sense as an application
- Cleanliness of your graphics and design

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.