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