Challenge Summary
Welcome to SunShot - RE-volv - Responsive Website Design Challenge! RE-volv is a solar energy crowdfunding platform. The platform allows individuals to donate to solar energy projects. RE-volv then re-invests the money the projects' saved by switching to solar into more solar energy projects.
The goal of this challenge is to redesign the current RE-volv website which has been described as corporate, like a law firm or finance company, boring and cluttered with too much information.
For this challenge, we are looking for your DESIGNS that will describe the site as fun, sharp, clean, and simple.
We also want to have high conversion rates. Particularly we want people to donate to the Solar Seed Fund first and foremost, and also sign up for the mailing list/create a login for the site.
Round 1
Submit your initial design for Checkpoint feedback for mobile & desktop layout:
1. Home
2. About Us
3. What We Do
4. Get Involved
5. Project Details
Round 2
Final Design plus any Checkpoint feedback for all required sizes:
1. Home
2. About Us
3. What We Do
4. Get Involved
5. Project Details
6. Solar Ambassador Program
7. Partners
8. Blog
9. Sign In / Sign Up
10. Style Guide (extra screen)
Please provide notes about your
Challenge Description:
The goal of this challenge is to design redesign/reskin the current website to make it friendly and less corporate. In general, we like the new site to:
- be more playful.
- visually represents our values (cooperation, sustainability, community solutions).
- evoke emotions (empowerment, joy, taking action, simplicity).
- have more people’s faces, and people getting together.
- simplify the home page, intrigue people, and make it more easy to get involved.
Colors:
Please use colors from the company logo plus any secondary complementary colors.
Logo:
We would like to keep our existing logo as is. Please see the provided EPS file.
Typography:
We would like to have updated typography with clean and crisp font, sizes, and colors.
Navigation:
- Re-think and simplify the navigation.
- Less dropdown or completely remove the dropdowns.
Content:
Content should comes from the current website (https://revolv-stage.herokuapp.com/) and from the old site (http://re-volv.org/). Feel free to pick up ONLY the best content that fits with your design and with the site’s goal.
Required Screens:
1. Home
- https://revolv-stage.herokuapp.com/
- old site - http://re-volv.org/
- have three calls to action (Donate, join mailing list, volunteer)
- have the page tell personal stories of people affected by our work
- nice to have 3 active project
2. About Us
- https://revolv-stage.herokuapp.com/about-us/
- old page - http://re-volv.org/content/mission
3. What We Do
- https://revolv-stage.herokuapp.com/what-we-do/
- old page - http://re-volv.org/solar-in-your-community
4. Get Involved
- https://revolv-stage.herokuapp.com/get-involved/
- This page should visually list in grid view all the projects.
- Show active and past projects.
- Ideally, have 3 projects for each row.
5. Project Details
- https://revolv-stage.herokuapp.com/project/5/
- old page - http://re-volv.org/getinvolved/supportrenewableenergy
6. Solar Ambassador Program
- https://revolv-stage.herokuapp.com/get-involved/solar-ambassador-program/
- old page - http://re-volv.org/content/solar-ambassadors-0
7. Partners
- https://revolv-stage.herokuapp.com/about-us/partners/
- old page - http://re-volv.org/content/granting-and-sponsoring-organizations
8. Blog
- http://re-volv.org/blog
9. Sign In / Sign Up
- https://revolv-stage.herokuapp.com/signin/
- https://revolv-stage.herokuapp.com/signin/#signup
10. Style Guide
- This will be an extra screen to help developer develop convert the design properly.
- For this screen, we ask that you put together a one page style tile that clearly shows your concept for this design. Please search in google for “web design style guide” to see common examples of this type of screen.
Required style tile content:
a) color scheme, where you call out color for specific items such as:
- Clickable (non-active) link items
- Color for active link items
- Color for specific areas (backgrounds, header backgrounds, etc)
- Color-related scheme / rules
b) Typography rules, where you call out typography for specific items such as:
- headers
- sub-headers
- paragraphs
- lists
- etc
c) Navbar style (including both active and inactive styles)
d) Optional style tile content:
You are free to include anything else you want to call out now, to strengthen your submission - container styles or other elements that define your design concept, such as:
- Form element styles and related labels for : text input, textarea, drop select (picklist), checkbox, radio option, buttons for “cancel” and “submit”
- Section header which can be expanded and collapsed, with text label
- Data table element styles for: column headers and labels and indicators for “sort by”, two data rows included a “selected” or highlighted row
- Icon styles
* Feel free to add more pages that you think it will help make the site meet our goal.
Screen Sizes:
- Mobile: Design for iPhone 6 Retina Display 750px wide and height as required.
- Tablet (portrait): Page width of 768px with 750px content. This will be a layout for non-retina. This can be slightly similar to desktop version, we are only looking for correct breakpoints.
- Small Desktop: Page width of 992px with 970px as the width of its content. This can be slightly similar to desktop version, we are only looking for correct breakpoints.
- Desktop: Page width of 1200px with 1170px as the width of its content.
Reference Sites:
The following are cools websites that we’d like but do not copy them exactly.
- https://watsi.org/
- https://www.airbnb.com/
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Target Audience:
- Crowdfunding participants (Donors)
- Community organizations that want to go solar(nonprofits & co-ops)
Judging Criteria:
- How well you plan the user experience to meet the challenge goal.
- Cleanliness of your graphics and design.
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.