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.
Round 1
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)
Round 2
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)
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.
Important:
- 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.
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.