SunShot - National Solar Tour - Map UI Design









    The challenge is finished.
    Show Deadlinesicon-arrow-up

    Challenge Summary

    Welcome to the Sunshot - National Solar Tour – Map UI Design! In this challenge we are looking to design a new page for people to register their homes for solar tour, then organizers need to be able to view all registered home in their area.

    We currently have the client website and we need to match the general UI of the site and improve on it.

    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

    Challenge Description:
    In this challenge we need to design a new page for people to register their homes for solar tour and provide innovative solutions for this website, also organizers need to be able to view registered homes in their area.

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

    Branding Guidelines:
    - Please refer the client website here for branding guidelines.

    Design Goals:
    - How should this page need to look?
    - Read the user story and decide what should the priority features be (what is the priority navigation for this user?)
    - How quickly the user can find what he wants?
    - The website should be easy to use.
    - Think simple but effective solutions! Have fun creating this - let us know how you think it should work!

    Screen Sizes:
    - Desktop: 1024px width and height as required.
    - Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.

    Make sure you create graphic in 'shape' format, so when resize for retina versions, graphic still look sharp! It will be great if you can provide the landscape version.

    Suggested User Story (feel free to suggest or remove features):
    - Mike is a tour host.
    - Mike selects that he wants to host.
    - Mike fills relevant data about hosting.
    - Mike home is added to map as tour location.
    - Heath is a tour attendee and can search for one or many tour location in his region.
    - Heath can build his own tour by seeing hosts on an available to tour.
    - Jane is an organizer and will have additional privileges when she views the map.
    - Jane opens the map and can view tour hosts (house, buildings) in her region, and she can approve hosts.
    - Scott is tour admin; he can manage tours and organizers.

    So from user story we have 4 user roles:
    - Tour attendee - A base level registrant.  Can show interest in one/many tour locations.
    - Tour host - An attendee who has registered a location on the tour.
    - Tour organizer - A host who has been flagged by an admin as an organizer.  They can manage multiple hosts and see their contact information in an admin system.  They can also approve hosts.
    - Tour Admin - Can manage the tour, organizers.

    Required Screens:
    - We would like you to suggest features/screens that this app should incorporate

    1) User Registration:
    - Fill normal registration info:
    -- First name.
    -- Last name.
    -- Zip code.
    -- Email.
    -- Confirm Email.
    -- Password.
    -- Confirm Password.
    - We need “Sign Up” button here.

    2) Map Page:
    - check out one of our chapter’s tour  http://www.greenenergyohio.org/ost/search.cfm for example. Contact wspratley@greenenergyohio.org with questions on how this site was developed.

    The map view will depend on user role:
    A) Tour Attendee Role:
    - We need a button here that says "I want to help on the tour"; this will redirect user to Tour Helper Contact Page.
    - On map, show options to narrow by technology.
    - This user needs the ability to see all estates that are available for a tour in his region.
    - User can build her own tour by seeing who is available to tour so he clicks on “Design my Tour” button:
    -- Please suggest what the user should see here.
    - User will have filters to narrow down results:
    -- state/zip with mile radius (within 5,10, 25, etc) from your zipcode.
    -- Day
    -- Type of technology Options: Biomass, Energy Efficient Features, Energy Star, EV dealer, EV powered by renewable energy, Geothermal - (ground source heat pump), Hydroelectric, LEED, Passive Solar, Photovoltaics, Solar Thermal, Wind, Other.
    -- Type of building.Options: Business, Home, School, Park, Other?
    -- Tours by region drop down list:
    --- Chicago Tour.
    --- LA Tour.
    --- Boston Tour.
    --- All.
    - User will have the ability to see all results as a list.

    B) Tour Host Role:
    - When this user opens this page http://www.ases.org/solar-tour/ we need to show him a button that says “Apply to be a Tour Site”.
    - When this button is clicked the user needs to fill relevant about hosting:
    -- Name.
    -- Address.
    -- Phone.
    -- Email.
    -- Photos (5-10) of the estate.
    -- Available days of tour (tour is 2 set days out of a year)
    --- Pick one of the 2 or “both”.
    - Description of renewable energy features.
    - Energy savings (free form open text field).
    -- Drop down for technology (multi-select), use dummy data here.
    -- Solar panel.
    -- Solar PV.
    -- Other renewable options.
    - The user will wait for the organizer approval.
    - When approved user estate is added to map.

    C) Tour Organizer Role:
    - On map, show options to narrow by technology.
    - This user needs the ability to see all registered sites in his region.
    - User will have filters to narrow down results:
    -- state/zip.
    -- Day.
    -- Type of technology.
    -- Type of building.
    - Organizer needs to see the list of tours and the option to keep the tour private.
    - Organizer will have the power to approve new host registration.
    - Organizer will have the power to assign users (Tour Goer) to a tour.

    D) Tour Admin Role:
    - This user will have the same views as Tour Organizer, but he will also have the power to promote a normal Tour Attendee to become Tour Organizer.

    3) Tour Helper Contact Page:
    User needs to fill following contact information.
    - Name
    - Phone
    - Email
    - I would like to (checkboxes, can select multiple)
    -- Participate in an Event
    -- Speak or Get a Speaker
    -- Sponsoring / Having a Booth
    -- Volunteer
    -- Details: (textarea)
    -- Comments.

    4) Email Template:
    - Here we are looking for a simple and generic email template with header and banner.
    - The email template will show the user the list of tour locations in his region.

    - 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 User:
    - Real estate owner who wants to host a tour.
    - Tour Organizers.
    - Tour goers.

    Judging Criteria:
    - How well you plan the user experience and capture your ideas visually
    - Cleanliness of your graphics and design
    - Creativity and ease-of-use is key to the success as it must be engaging to users.

    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 design for a Checkpoint feedback:
    1) User Registration. (Mobile + Desktop)
    2) Map Page. (Mobile + Desktop)
    3) Tour Helper Contact Page. (Mobile + Desktop)
    - If you have time - please 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)

    Final Design plus Checkpoint feedback:
    1) User Registration. (Mobile + Desktop)
    2) Map Page. (Mobile + Desktop)
    3) Tour Helper Contact Page. (Mobile + Desktop)
    4) Email Template. (Mobile + Desktop)
    - If you have time - please 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)

    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