SunShot - Sun Swarm - Community Solar Design Challenge

Welcome to SunShot - Sun Swarm - Community Solar Design Challenge. This challenge is focused on creating a responsive application design that promotes “Community Solar” by allowing people who cannot put solar on their roof can subscribe to eligible solar projects nearby.

At the end of this challenge, we are looking to see intuitive and easy to use "designs" that will help us design and build UI/UX in the next phase of this project!
Good Luck!

Round 1

Submit your initial designs for Checkpoint Feedback

1) Landing Page (not signed in)
2) Become a Developer
3) Sign Up: Sign Up Subscriber, Sign Up Developer
5) Search Results
6) Project Details (User not signed in)

A. Developers:
7) Developer (Basic Account)
8) Premium Upgrade Option Page
9) Invite Subscribers
10) Project Details (Basic Developer Account), Project Details (Premium Developer Account)
11) Add New Project

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) Landing Page (not signed in)
2) Become a Developer
3) Sign Up: Sign Up Subscriber, Sign Up Developer
4) Sign In
5) Search Results
6) Project Details (User not signed in)

A. Developers:
7) Developer (Basic Account)
8) Premium Upgrade Option Page
9) Invite Subscribers
10) Project Details (Basic Developer Account), Project Details (Premium Developer Account)
11) Add New Project
12) Developer “Edit Project"

B. Subscribers:
13) Subscriber - My Projects, Subscriber - All Projects
14) Subscribe Form
15) Style Tile

This application has two types of users (Subscribers and Developers). Subscribers seeking solar submit their contact info and developers submit projects they are working on. SunShot backend connects (matches) a subscriber with developers.

Design Guidelines:
- We are looking for modern designs.
- 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.
- We have provided some design guidance and would like you to follow them:
https://docs.google.com/document/d/1cq2mOYc3zA_KffTNnbmBhJGSVyuCY-4TbOxG2LW9IQE/edit?usp=sharing
- Few references has been suggested in above link, please use them as an inspiration and make sure you do not COPY them.

Design Size:
- Have your designs of size 1280px width and height as required.
- 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).

Required Pages:
Below are some of the features required in this application, but you are not limited to this, we are open to flows and suggestions on how things could work - so feel free to expand and suggest us what would be best for this type of application!!

1) Landing Page (not signed in):
Reference: LandingPage
- We want this to be as a long vertical page as shown in the wireframe.
- Follow the contents as shown in the wireframes
- In this page, we have list of featured projects

2) Become a Developer:
Reference: LandingPage-BecomeADeveloper
- Clicking on “Become a developer” button shows this modal window
- Follow the steps as shown..user will first choose the state (please show the drop-down style) and then continue to enter the details about the project..as they are not signed in, a
developer will need to create a new account if they don’t have one.
- Within the Create New Project form, we have the form elements, please create necessary active/default styles for radio buttons, etc and also need to create a datepicker.
- How will the success message will look like on creation of new project
- Also show us how the error page will look like.

3) Sign Up:
Reference: SignUp-AccountType
- Clicking on “Sign up” should show options to choose the user type, how can we show this?
- Based on the chosen type, corresponding sign up form is shown!

Sign Up Subscriber: 
Reference: SignUp-Account Type > SignUp-Subscriber
- Subscriber will have the ability to sign up using their email or they will be able to sign up with social network.
- Follow the content from wireframe.

Sign Up Developer: 
Reference: SignUp-Account Type > SignUp-Developer
- Follow the content from wireframe.

4) Sign In:
Reference: SignIn
- Come up with a simple sign up form design!
- Show us how the error screen will look like?
- Based on the user type corresponding landing page is shown.

5) Search Results:
Reference: LandingPage-Search
- When a user initiates a search in the landing page, they will be able to see the list of projects.
- Looking for your design ideas on how the details can be put up.
- User will be able to initiate subscribing for a project or view more details.

6) Project Details (User not signed in):
Reference: ProjectDetails
- This page shows the details for the users who are not signed in
- Please follow all details as shown in the wireframe.
- At the bottom, they will be able to see other nearby projects, how can we show them!

A. Developers:
7) Developer (Basic Account):
Reference: Developer-Home-MyProjects
- We need you to come up with an interesting landing for the developers, this page will list the projects that were created by them.
- We would like to show statistics in this page.
- Need a way to convey that Upgrading to premium account will allow them to access premium tools. Currently this is shown as a banner at the top...feel free to expand on and show what would be best for this.
- Provide option to create a new project.
- List of project details are shown, capture all details from the wireframe….feel free to rearrange as required to improve the overall user experience. For a project, there could limitations on the number of subscribers enrolling, so we need to way to indicate this - wireframe has shown a progress bar to indicate this...feel free to expand on this!
- We would like to show notifications received for each projects (for example: there could some new subscribers to this project).

8) Premium Upgrade Option Page:
Reference: Developer-PremiumAccountUpgrade
- This page will details about the difference between their current and premium account
- Think about human psychology.  What’s the best way to convey Sun-swarms’s value to Developers and get them to sign up?
- It should also allow the user to upgrade their account to a premium account as shown in the wireframe.
- Selecting to “Upgrade” will show the payment option
- How will the screen need to look like if the payment is successful or if there is an error?

9) Invite Subscribers:
Reference: Developer-InviteSubscribers
- This page shows a list of matching subscribers (shown based on an algorithm) and will have the ability to users nearby the project, they will be able to choose the miles within which they would like to view matching subscribers.
- Need a way to invite each of the users individually or select an invite the selected users!
- Clicking on “Invite All” or “Send Invitation” will show a form that shows a pre-entered message that will be sent to the user (Reference: Invitation-Message)
- We like the idea to viewing the location of the user within a map.
- We need a way for the developers to invite subscribers to this project.

10) Project Details (Basic Developer Account):
Reference: Developer-ProjectDetails
- This page shows the project details, include all details as shown in the wireframe (this will be shown for the user with basic developer account)
- Feel free to re-arrange the layout to make it easy for the user to capture the information at first glance!

Project Details (Premium Developer Account):
Reference: Developer-ProjectDetails-PremiumUser
- This page is same as projects details shown to a developer with basic account but only difference is at the bottom, user will able to see the “Premium Services”.

11) Add New Project:
Reference: Developer-AddProject
- Clicking on “Add New Project” shows this page
- User will select the state first and then based on the chosen state the new project form will be shown.
- This form is similar to the form shown when the user selects to “Become a Developer” in Landing page.

12) Developer “Edit Project”:
Reference: Developer-ProjectDetails-Edit
- This is same as “Create New Project”, but details will be editable!
- Please go through the wireframe to capture all the details required.

B. Subscribers:
13) Subscriber - My Projects:
Reference: Subscriber-Home-MyProjects
- They will be able to see the list of projects that are matching for which they can subscribe and also will be able to view more details about the project.
- We need your ideas on how to display the list of projects, and how the details for each of them can be captured from the wireframe.
- They should also have the ability to view list of projects for which they had already subscribed or pending approval.
- Notification page is not shown in the wireframe..we would like to get your thoughts on what needs to be shown here.. (For ex: user’s subscription approval to a project can be shown as a notification).

Subscriber - All Projects:
Reference: Subscriber-Home-AllProjects
- They will be able to see the list of all projects and be able to sort or filter them!
- How can the filter be shown? (please click on filter to view this)

14) Subscribe Form:
Reference: Subscriber-SubscribeProject
- When a user decides to subscribe for a project, we show this form.
- This page will provide details about the subscription and the period for which the subscription will be valid
- They will be able to see the amount that will be saved by subscribing to this project
- When they click on “Subscribe” in this page, they will see an agreement which they need to accept by signing..and clicking ‘I Agree”..
- Once they have successfully agreed, they see a success message.

--
15) Style Tile:
- We would like you to create a style tile that will help developers.
- This Style Tile need to have the below at a minimum but feel free to add anything that would help developers.
- Explore these references to learn more about style tiles: Reference 1,  Reference

Links / Buttons Colors:
- Button colors (normal / hover states)
- Link colors (normal / hover states)

Typography:
We would like you to identify and define the list of fonts and the specific color, font size used, etc..
- Headers
- Sub-headers.
- Paragraphs.
- etc.

Target Audience:
- Administrators, Site Managers, Corporate Managers

Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- How easily your design can be built 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.