Challenge Summary
Welcome to the SunShot - Sunmetrix - New Look for Go Responsive Design Challenge! In this challenge we are looking to redesign the web version version for SUNMetrix Go Section, please make sure to open the link on a web browser and explore the current UI before start designing your solution.
We currently have the client website Go Section and we are looking for you to provide design concepts and click-paths to plan our new look and user experience!
Round 1
Submit your design for a Checkpoint feedback:
1. Landing Page. (Desktop +Mobile)
2. Adding a Site Page. (Desktop +Mobile)
3. Site Details Page. (Desktop +Mobile)
- 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. Landing Page. (Desktop +Mobile)
2. Adding a Site Page. (Desktop +Mobile)
3. Site Details Page. (Desktop +Mobile)
4. Site Generation Page. (Desktop +Mobile)
5. Dashboard Page. (Desktop +Mobile)
- 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 make the web version more usable, modern. We need YOU to look at client provided document (Design Challenge - New Look for Go.pdf) and provide innovative solutions for this website.
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 web version 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.
- Your solution needs to be a Responsive Design Solution when viewed on Portrait and Landscape view of mobile devices.
- 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.
Supporting Documents:
- Client Requirements (Design Challenge - New Look for Go.pdf).
- Source Graphics from Client (Source Graphics From Client.zip)
Suggested User Story (feel free to suggest or remove features)
- Mike is a homeowner who wants to test drive solar for their home with virtual panels
- Mike will open Sunmetrix website and go to Go section landing page.
- Mike is not logged in yet and will see info about Go section, from here he can check the demo.
- Mike then creates an account (Register) or Login if he already have an account.
- Once logged in Mike needs to add his home location to test solar virtual panels.
- Mike will be asked to provide general information and final details in site details page before the site process his test.
- When the processing is done Mike will see the results in Dashboard, when Mike logs in next time he will go straight forward to Dashboard results page.
Required Screens:
- We would like you to suggest features/screens that this app should incorporate
- Please follow up the instructions found in the PDF.
1) Landing Page:
- This is the landing page for Go Section.
- Please refer to http://sunmetrix.com/go-landing/ and pages 2 & 3 of Design Challenge - New Look for Go.pdf.
- Please follow up the instructions found in the PDF.
- You are encouraged to update the GO logo.
2) Adding a Site Page:
- You can access this page after you log in.
- Please refer to http://sunmetrix.com/go/ and page 4 of Design Challenge - New Look for Go.pdf.
- The user here should be able to select his site address directly by clicking on the map or by entering his address in the input field next to go button.
- Once Go is clicked the user will be redirected to Site Details page.
3) Site Details Page:
- Please refer to pages 5-7 of Design Challenge - New Look for Go.pdf.
- User will be able to identify his site:
-- Name.
-- Time Zone.
- In the same page user should be able to enter evolving house and consumption calculator data.
- Here we need a new addition to the site that we currently don’t have as described in page 5, we need to add evolving house details.
- The evolving house details as described on page 6 can be placed above the sliders or below them, its up to you.
- Please capture consumption calculator details as described on page 7 in your design.
4) Site Generation Page:
- Please refer to page 8 of Design Challenge - New Look for Go.pdf.
- In this page the user will see his site being processed.
5) Dashboard Page:
- Please refer to page 9 of Design Challenge - New Look for Go.pdf.
- In this page we will display the most relevant information about what their solar panel system could have produced
for them if they had one.
Note: Please don’t copy the current web version, as we need to make this version more usable and modern.
Inspiration:
We like to think of car purchasing and personal finance websites when we think about the Sunmetrix services. And we also like the design of the Nest service. These example sites have inspired us when it comes to how we should deliver the content:
- ���Build a Toyota: http://www.toyota.com/efc/���
- Build your own Subaru: http://www.subaru.com/build-your-own/index.html���
- Finance dashboards: http://blog.fusioncharts.com/2013/10/personal-finance-apps-with-amazing-dashboards-part-1-money- dashboard/ and https://www.personalcapital.com/financial-software���
- Nest dashboard: http://www.wiredprairie.us/blog/index.php/archives/1631
Important:
- Keep things consistent. This means all graphic styles should work together including the look and feel we already have in Discover site..
- All of the graphics should have a similar feel and general aesthetic appearance
Target User:
- Homeowners who want to test drive solar for their home with virtual panels – a “try-before-you-buy” solution, with GBD for consumption.
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.