Challenge Summary
Welcome to SunShot - Solar Power Report - Website UI Design Challenge. In this challenge, we are looking for your help to design a responsive web based application that helps users understand the mission of Solar Power Report, how it is different from the commercial sites, and to utilize teir powerful tools to organize/add the bids received from companies quotes and will allow comparison of bids!
You will be provided with a wireframe that we recently completed, this should help you get started with your designs!
NOTE: We will be awarding $150 checkpoint prize to all best submissions
Round 1
Submit your initial designs for Checkpoint Feedback
0. General
1. Homepage (Landing Page) - (Desktop + Mobile)
2. Sign up/Sign-in (Desktop + Mobile)
4. Solar Lease Tool (Desktop)
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.
0. General (Desktop + Mobile)
1. Homepage (Landing Page) - (Desktop + Mobile)
2. Sign up/Sign-in (Desktop + Mobile)
3. Solar Installer Directory (Desktop + Mobile)
4. Solar Lease Tool (Desktop + Mobile)
5. Solar Basics (Desktop + Mobile)
6. Solar News (Desktop + Mobile)
7. Solar Mission (Desktop + Mobile)
8. Solar Forum (Desktop + Mobile)
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)
The Purpose of this challenge is to come up with the responsive designs based on the given wireframe. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).
The Solar Power Report is an editorial platform for users to read up on solar energy for their house, compare data visually, compare their solar bids, and to understand the legal aspects of their solar installation. This is not a commercial website that is selling anything to consumers but a powerful tool aimed to help consumers understand and accurately compare all aspects of solar installations. In this challenge, you’ll be asked to re-architect the information in the current site (www.solarpowerreport.com), add some upgrades and put together the powerful solar lease comparison tool.
Design Considerations:
- Looking for modern, intuitive user interface
- We need this product to be simple, smart, engaging.
- 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
- What should the priority features be?
- How quickly could you find information?
- Stock Photos: Feel free to use any images related to this concept but use pictures sparingly and come up with other graphic elements as well like icons (for things like “financial”, “technical”, “module”, inverter”, “roof”, “house” etc.) or using quotes within a graphic element
- The typical user is more likely to be male than female and probably around 40+ years old. Most likely he/she is not a digital native so the design should be sleek but intuitive and simple, not “fancy”
Challenge Assets:
We had provided the wireframe that we recently completed, please make sure to pay close attention to all features as given in the wireframe and come up with modern UI and think about user experience.
Design Size:
We need responsive designs:
- Desktop: 1024px as width and height as required
- Mobile: 320 x 480px
Branding Guidelines:
- We would like you to follow the branding (look & feel) as shown in this page: www.solarpowerreport.com
- We need a logo for Solar Power Report, come up with a logo that matches clients theme and look & feel!
Required Pages:
We are looking for the below pages to be designed..
0. General:
- Below are some of the generic UI that will be consistently seen across this site.
- Come up with header and footer that fits your design, make sure to go through the wireframe to include all the elements, we are looking for your ideas on how things need to be better arranged - so it gives a user a great user experience.
- Include normal/hover/active states for buttons, links, overall navigation and wherever you think its necessary.
- Make sure to include all types of ads (leaderboard (728x90) and a wide skyscraper (160 x 600), plus options for rectangles is also required).
- We need a consistent search bar across the site.
1. Homepage (Landing Page):
- We need a landing page for users, this page needs to be thought/designed considering two types of users as given below:
- First Time Users: These might have heard about solar energy but have no real idea about financing options or technology. He/she will be interested in our editorial content first and foremost. There needs to be a clear call to action for that on this landing page that takes them to necessary information.
- The other type has already gotten offers from their installers (most likely lease offers since they make up about 2/3 of the current market) but he/she does not know how to compare them. He/she should be able to take advantage of our solar lease comparison tool. This is the second call to action this landing page should provide.
Other features:
- We need all the features that were shown in the wireframe
- Three articles snippets shown in this homepage need to have prominent location, preferably at the top as shown in the wireframe.
- We have video showing the mission of the site, click on “play” button to see the interaction shown..how do you think we can handle this in design?
- Note: the position of these ads needs to be consistent across all other pages.
2. Sign up/Sign-in:
Some parts of the sites require the users to be signed in to this application, so we are looking for your thoughts on how this need to be designed.
Sign in:
- Users will have the ability to sign in using social networking sites, make sure to include them in this page (come up with custom social networking icons).
- Include all fields as shown in the wireframe.
- How will be error screen look like?
Sign Up:
- Clicking on sign up allows the user to register with this site
- Looking for your thoughts on how this page need to be designed.
- Please follow the contents from wireframe!
3. Solar Installer Directory:
- This page will show the list of installers who do solar installation.
- Come up with a design that allows the user to select a location in the map and filter the list of installers based on that!
- User will also have the ability to sort as shown in the wireframes.
- Each of the installer listing will show the “Installer name, their location (address), services they offer, customer rating and comments (numbers).
- New Solar Installers will have the ability to “Register” with the site to create a free listing within this directory!
Installer Details Page:
- When a user select one of the installer from above screen, we then show the installer details
- We need all contents as shown in the wireframe, feel free to re-arrange contents.
4. Solar Lease Tool:
One of the main section in the website is the Solar Lease tool. Users enters the bids received from the quotes given by companies (solar installers) and they will be able to compare the bids visually and choose the best out it.
- Make sure to think about the user experience of the tool.
Logged in View:
- Click “Sign in” in the header, then choose “Solar Tools”, this takes the user to the solar lease tool.
- This is similar to not-logged in view expect that a user can add as many bids as they like.
- Clicking on “Bid Name” will allow the user to edit the bid details..how do you think it need to be handled.
Add Bid:
- "Add Bid" link/button need to have some prominence here.
- How will tool-tips design need to look like?
- We like the idea of having bids list and the visualization side by side as shown in the wireframe. If you have better ideas, please feel free to shown them!
- Click on "Add Bid" and click on "Company Name" textbox to see a drop-down, we are looking for your ideas on how to display this drop-down. NOTE: Within the drop-down, you can see a link called "Add Company" how should this be shown and please click "Add Company" to see additional options - these are questions that can be answered by the users, looking for your thoughts on how these need to be designed, if you are planning to show the answers for questions as clickable buttons, show us how the normal and active state would look like.
Bids Comparison/Visualization:
- Visualization of Bids is one of the important part of this tool and we are looking for your help to show the best possible design to display them.
- Below the "My Bids" we have "My Legal Preferences", click on it to see a more information
Not logged in view:
- When a user is not logged in, click in “Solar Tools” in the top navigation - which shows the solar lease tool.
- This view allows the enter up to two bids and gets to sees the visualization of the entered bids (Note: user gets to visualize the bids as each of them are entered).
- Please have a similar look & feel like the Logged in view.
5. Solar Basics:
- This page will detail about the basic information about solar.
- Note that this page has a sub-navigation that shows more content (stories) within the Solar Basics section, we are looking for your design thoughts to come up with a design that gives
best usability.
- Also note that we few links in the left side in wireframe, these links allows the user to jump to a particular section within the user story.
- Show normal/hover/active states for the sub-navigation.
- All stories will have the option to comment, we’ll probably use the WordPress plug-in disqus (https://wordpress.org/plugins/disqus-comment-system/), plan accordingly
6. Solar News:
- This page need to show the latest news about solar..
- At the top, we show the Featured Story, how do you think it needs to work and we are looking to have only one story here.
- We need to include the rest of the news in this page, think about user experience - how a user interacts with the content in this page?
- We need a pagination in this view, feel free to expand on the thoughts given in the wireframe.
- All stories will have the option to comment, we’ll probably use the WordPress plug-in disqus (https://wordpress.org/plugins/disqus-comment-system/), plan accordingly
7. Solar Mission:
- This will just show the Solar Power Report mission..
- We need to show the “mission statement” in this page, this need to be prominent in this page - how can you we show this in the design?
- There should also be a way to display pictures and short bios of the co-founders/the team under the lead image and a mission statement. It’s three people right now but there will be more - think of design that could possible allows enhancement for future!
8. Solar Forum:
- We will be using a wordpress plugin for this page (most likely https://bbpress.org/), so we are looking for your basic design ideas on how each of the page within the forums need to look like
- Some of the designs that we require are “Category view, forum view, thread view, reply to a thread, create new post”
- Anything else that you think need to be created to make sure it matches the look & feel like like your other pages?
Target Audience:
- One who got bids from installers but does not know how to compare quotes.
- Residential solar used to be the domain of the eco retirees, long-time affluent homeowners with an environmental consciousness.
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.
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.