Challenge Summary
Welcome to Gridmates - Responsive UI Design Concepts Challenge. In this challenge, we are looking for your help to design a responsive web based application that helps users to share an amount based on the amount of solar energy produced.
We need this product to be Simple, Smart, engaging.
NOTE: We will be awarding $150 checkpoint prize to all best submissions
Round 1
Submit your initial designs for Checkpoint Feedback
- Single Page (Parallax Scrolling)
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.
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 a design for responsive web-based application that will help users share/donate the energy with people who don’t have it. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).
About Gridmates:
http://www.gridmates.com/
- Gridmates provides the world's first cloud platform that enables peer-to-peer energy sharing.
Branding Guidelines:
http://www.gridmates.com
- We are looking to follow the look & feel (colors, design aesthetics) of existing website.
- Client shared icons/PSD here: https://www.dropbox.com/sh/w1dqhhc5mt1ptuw/AAD6yN3ms_6Q9CLif7ZK6Zkea?dl=0....feel free to use these icons/psd in your designs.
Design Ideas: Parallax Scrolling (Submission Requirements)
- As the content in the page is limited, we would to design this page as a Parallax scrolling and feel that could make the concept more interesting for users to work on.
- We are looking for your creative thoughts on how best this page can be designed, please have a look at the parallax scrolling references to get inspired.
- As we are looking to focus on parallax scrolling, we would like you to show sequence of images on what happen when a user scrolls and how the UI elements in the page are shown while a user scrolls (if you think a GIF animation would help convey the idea of parallax scrolling, please feel free to include them - but GIF is optional)
- Any other interaction within this parallax scrolling that you think would make the concept more interesting?
- Explore the below references to explore/inspire more on parallax scrolling
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.
- What should the priority features be?
- Stock Photos: Feel free to use any images related to this concept.
Design Size:
We need responsive designs:
- Desktop: 1024px as width and height as required
- Mobile: 320 x 480px
Required Page:
Please have a look at the supplied wireframes..this should help you understand the flow of the application. This page has below sections:
How it works?
- This section explains about the purpose of this site
- Here we give an icon based look of how it works for solar users.
- We like the idea of an icon of a home with solar panel (with fully charged battery) and on the right a house in energy poverty (almost empty battery). In between we can have the icon of the hand (found at gridmates.com) that gives energy to it. We have attached the icons that you can use in your designs, if you have better ideas feel free to show them in your design.
- Show us your ideas on how this need to be designed.
Main Flow:
NOTE: To understand the below flow, we request you to go through the wireframes..
- In the below steps, user will be choosing radio buttons to move ahead with the flow (please make to capture the right content) and we are looking for your design ideas on how we need to allow the user to choose them, should these be designed as radio button like shown in the wireframe or is there a better way to get these inputs to make it more interesting for users?
The flow is broken down into two steps:
Step 1:
1.1 User will need to enter their zip code
- Need to ask a question if the user has rooftop panel, with YES or NO options.
- 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, please see wireframe for content reference and come up with an appropriate design for that!
------ 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.
Step 2:
Based on the above inputs, we need to show these below results and additional options for the use to choose..
- “Last Month Energy Production” in KWhr and the amount it would have cost in $ (dollars).
Select a Percentage to Share:
- 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%
- We need this to be slider, do you have any other thoughts instead of a slider - feel free to show them in your designs.
Results:
- 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.
- Drag the slider in the wireframe to see the change in amount of energy and cost that will be shared.
“Send Energy” Modal Window:
- 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”)
References:
Below are some of the parallax scrolling references, please DO NOT COPY
- http://www.creativebloq.com/web-design/parallax-scrolling-1131762
- http://www.awwwards.com/20-best-websites-with-parallax-scrolling-of-2013.html
Target Audience:
- Homeowners, Anyone with solar power
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.