The Purpose of this challenge is to come up with the wireframe that helps define the flow of application. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).
- Gridmates provides the world's first cloud platform that enables peer-to-peer energy sharing.
- You must create traditional wireframe call-outs and notes
- Provide us with your interaction and click-path thoughts and suggestions
- Produce HTML click-through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The website must be very easy to use and intuitive. Keep that in mind when create your solution for the layout and flow information.
- You MUST cover all requirements mentioned in challenge details below.
- Use note pane in every single page you design to explain what items are addressed in that page from the documentation, what things you added/changed/removed, use it to make your
idea clearer and help the client to give you constructive feedback.
We are looking for you to create wireframe for the below pages..
NOTE: We had provided a flowchart to help you understand the flow of screens.. (this flowchart might be slightly different from the below description, please follow the description)
1) Welcome/Home Page:
- 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?
- We have some functionalities (which will be series of questions to the users) in this page and would like to get your thought on how how this need to be presented (perhaps a wizard?
Functionalities in this page
In this page, we need to get few informations from the users, come up with thoughts on how below..
1.1. Questions to be asked to users in this page:
- User will need to enter their zip code
- Need to ask a question if the user has rooftop panel, with YES or NO options - how do you think, we need to show these options to the user?
- Based on the option chosen by the user, we need to show the below flow.
1.2. User has installed rooftop panel (If users chooses “YES” in 1.1)
- We need to ask a question if the user has 'Solar Panels' with “YES or NO” options.
- If user chooses “YES”
------ Ask the user to enter their Enphase Key and Password.
------ If the user doesn’t know the credentials (or isn’t an Enphase user), show a link to Register with Enphase.
------ If the combination is incorrect show an error message with the option to Register with Enphase
------ Once they enter the login credentials, they will move to point 2.
- If user chooses “NO”, we need to show questions given in point 1.3
1.3. User has not installed rooftop panel (If users chooses “NO” in 1.1)
- User enters zip code and Square Feet of solar panels We will fill in the default number here, but the user can change it (use a placeholder value for now)
- They will submit these values and proceed to point 2.
2) Results and additional options to choose:
Based on the above inputs, we need to show these below results
- “Last Month Energy Production” in KWhr and the amount it would have cost in $ (dollars).
- We show additional options to the user
- They will be able to select a percentage of energy they want to share with the people who don’t have these energy.
- We let them select a percentage 2%, 5%, 10%, 25%, 50% and 100%
- Based on the chosen percentage, we show them the amount of energy that in KWhr and $ (dollars) and how many days it will help the user in need of energy
- We also need to show a “Send Energy” button that will allow the user to donate the amount mentioned in this result. (this will be shown as a send energy modal window - this modal can be seen in www.gridmates.com > click “Send Energy”)
- Homeowners, Anyone with solar power
New to Axure? Here are some quick tutorials to help you get started.
Your submission will be judged on the following criteria:
- User experience
- Completeness and accuracy of the areas of functionality and content
- How well your wireframes provide a consistent user flow and clear information architecture for the application
Submission & Source Files:
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Generated HTML files with all the requested contest requirements stated above.
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.