SunShot - PVComplete - Mapping Application UI Design Concepts Challenge









    The challenge is finished.
    Show Deadlinesicon-arrow-up

    Challenge Summary

    Welcome to SunShot - PVComplete - Mapping Application UI Design Concepts Challenge. In this challenge, we are looking for your help to design a web application that will help users create solar design (PV designs) projects by creating a mapping/drawing outline on top of the identified building roofs where they want to install the solar panels!

    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 will be awarding $150 to all submissions that are outstanding at checkpoint.

    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.

    Full Description & Project Guide

    The Purpose of this challenge is to come up with the redesign the 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).

    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
    - Client likes the look & feel of http://www.folsomlabs.com/, please go through them but please DO NOT COPY
    - Please use attached logo file in your designs (source .eps file has been provided)
    - What should the priority features be?
    - How quickly could you find information?
    - Stock Photos: Feel free to use any images related to this concept.

    Design Size:
    Desktop: 1024px as width and height as required

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

    NOTE: We had provided the wireframe to help you understand the flow of screens.

    1) Home Page: (Not logged in)
    - This is the main landing page that need to shown to the users..
    - We need to show an introduction on how this works and how best can we show this information?
    - This page will be used a marketing page that will need to focus on users signup with this site
    - Users will also have option to sign in, if the had already registered with the site.
    - We might need to have a placeholder for video/animation in this page, how best can that be shown?
    - Anything else you suggest that would work best for this page?
    - Feel free to show your ideas.

    2) Login:
    - User need the ability to login into the application.
    - User will need to enter username/password into the application
    - How do you think this page need to look like?

    Below pages are for a user who had already logged into the application.

    3) Manage Projects:
    - This screen needs to show the existing projects.
    - Please see “3. Create Project” to get an idea on what details a project might have and include appropriate details in this page for each of the project.
    - User will have the option edit the project and also provide the ability to delete a project
    - Provide an option for the user to “Create New Project”
    - Would it good to provide a search in this page?
    - Allow projects to be filtered like “My Projects” and “Projects created by customers”
    - We need a way for the users to filter by the customer..

    - Come up with thoughts for filters (perhaps ‘date range filters, keyword, customer name, etc..’)
    - What else do you think will be of use here?

    4) Create/EditProject:
    - This screen allows the user to create a new project..
    - User will see a map on the map (google maps), user can enter/search for a particular address within the map
    - This map can be zoomed in to view a particular building for which the user would like to come up with PV design (solar panels design).
    - We have some basic details that need to be entered by the user while creating a new project.
    - User will be entering basic details about the project which includes location information, some technical information (mechanical/structure, inverter, combine box)

    Location Information:
    - User will enter the basic project details about the location “Street Address, City, Country, Postal Code, Description”
    - Where should these details be shown?

    Technical Information:
    - User will need to enter some technical information 
    - Mechanical/structure information: This is the information about PV module manufacturer, PV module name/model, mounting system (this will be a drop-down, use some dummy vaues), tilt angle (angle in degrees), E-W Spacing (will be numeric value), Row Spacing(will be numeric value), the tilt angle (in degrees) and user need to choose whether panels will be placed as a landscape or portrait layout.
     - Inverter Information: User will need to choose the Inverter Manufacturer and the Inverter model name
    - Combiner Box Information: User will need to choose the Combine box Manufacturer and the Combine box model name
    - Within these "Inverter and Combine Box" we have "Info" button (this shows information about the selected model), Insert button will allow user to add a new manufacturer and model...Remove button will allow the user to remove a model/manufacturer.

    - We need outline sections that allows users to draw an outlines..
    - Based on the object in the roof, a user will be able to choose appropriate tool to draw the outline..for ex: rectangle box tool, polyline to draw the outline manually, etc..we are looking for your thoughts on how these need to be shown in the design?
    -Be able to select an outline object by clicking on it; selected object(s) have to be highlighted on a screen
    - We had provided a video (https://www.youtube.com/watch?v=mTRnPfE7JpU), this will help you get an idea on the type of outlines that can drawn on the map - feel free to expand on that!
    - User select a particular tool and start using it in the map, show us how this can be handled in the design.

    Once all the details has been entered, they will have option to submit the details and get immediate ideas on the possible PV designs and it take weeks for the engineers to come up with the full schematics for the project.
    - User will be able to save the outline as a version (by clicking new creates new version) and will be able to view those versions from the drop-down shown in Slide 5 of the pptx, based on the details selected they will be able to view these total power information against some test value..(for now, you can look to rethink on how to show the details as shown in slide 5).

    - We need a way to show notifications for a project when the project receives FULL schematics from the engineers.

    5) Project Details:
    - This contains details similar to ‘create project’ page
    - User will have the ability to edit basic details about the project which includes location information, some technical information (mechanical/structure, inverter, combine box)
    - User will have the option to edit the outlines by using the tools

    6) Customers:
    - This page display list of customers..
    - Each of the customer would have requested for PV designs and could have few projects under them.
    - Customers are just company/organization names who have requested to install solar panels in their buildings
    - For each of the customers you can look to include customer name, address, contact number and associated project list (each project could have more details about PV designs)
    - We need a way for the user filter through the list of customer to find the projects...
    - We are looking for your thoughts on how to display them in your designs.

    7) Add New Customer:
    - This screen need to allow the user add new customer information.
    - Basically this a form and we would like to get your thoughts on how this form need to look like.

    For each of the customers, you can look to include customer name, address, contact number..

    Target Audience:
    - Sales people at the solar integrator or installer company
    - Users who wants to install solar panels in their building

    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.

    Submit your initial designs for Checkpoint Feedback

    1) Home Page (Not logged in)
    2) Login
    3) Manage Projects

    4) Create Project/Edit existing 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)

    Your Final designs for all the required designs with all Checkpoint Feedback implemented.

    1) Home Page (Not logged in)
    2) Login
    3) Manage Projects
    4) Create Project
    5) Project Details
    6) Customers

    7) Add New Customer

    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)

    How To Submit

    • New to Studio? ‌Learn how to compete here.
    • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
    • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
    • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

    Winner Selection

    Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

    Reliability Rating and Bonus

    For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
    Read more.


    2015 topcoder Open


    Screening Scorecard


    Your Design Files:

    1. Look for instructions in this challenge regarding what files to provide.
    2. Place your submission files into a "Submission.zip" file.
    3. Place all of your source files into a "Source.zip" file.
    4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
    5. Create a JPG preview file.
    6. Place the 4 files you just created into a single zip file. This will be what you upload.

    Trouble formatting your submission or want to learn more? ‌Read the FAQ.

    Fonts, Stock Photos, and Icons:

    All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy here.


    All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to pass screening here.

    Questions? ‌Ask in the Challenge Discussion Forums.


    • Layered PSD files created in Adobe Photoshop or similar
    • AI files created in Adobe Illustrator or similar

    You must include all source files with your submission.


    5 submissions