GP-banner.jpg
 
 

Overview

GivePower, a nonprofit organization founded by SolarCity, uses clean energy technologies to deliver the most essential community services to the developing world.

The GivePower team challenged me to design a modern responsive website responsive that would attract potential partners and raise donations. As the visual designer on this project, I lead the design and user experience.

My role
Visual designer. I worked closely with 1 senior art director, 1 project manager, 1 writer, 1 film design director and 2 engineers between mobile web and web surfaces – to design, explore and iterate UI concepts, interactive prototypes. 

Design Process

Research
Before I dove right into the design, I reviewed the current website as a whole. How can I improve the website’s usability? What key points are missing? How can I design this website that would differentiate itself from its’ competition? I found strategic answers to this questions and developed a way to meet the objectives by designing a fully responsive website. As far as visual inspiration, I researched the websites of other competitors and non-profit organizations. I observed how these websites evoke an uplifting feeling through typography, imagery and color.

Ideation
I began my design process with writing down the elements on the website followed by wireframes. My design approach was to be minimal with a clear and clean script so potential donors and companies can easily scan the web pages take action.

wireframes.jpg

Design

From a visual standpoint, the current website already had a strong visual style. The stakeholder’s ask was to just freshen up the brand so that GivePower appears more credible and trustworthy. To accomplish this, I made the current color palette more vibrant by adjusting the hues and saturation.

00 color - small.jpg

For typography, I liked the idea of pairing a handwritten font with a san-serif font. To save the company on costs, I looked into Google Fonts–as their fonts are easy to implement on to websites, free for commercial use and can be also be used for print collateral. Pairing Montserrat with FFAD Matro was the perfect combination that gave the website a touch of personality. It wasn’t only how these two fonts work together, but how well they complement the copy on the website. Montserrat is light and structured, whereas FFAD Matro is friendly and bold; thus making this pairing an attention-grabber.

I also created style guide to facilitate implementation and ensure a pixel perfect website.


A b-roll was added to the homepage to create an instant emotional connection with the user with the help of a single, focused captivating story. Working with our Film Design Director, I helped curate photography and snippets of the footage from previous GivePower missions. The b-roll and photography selected were of those who have been positively impacted by the work of GivePower. By creating this emotional connection captured through b-roll, I predicted that this could boost donations and partnerships.

GP-visuals.jpg

For a clean, fresh and minimalistic look, I designed line icons for the carousel’s navigation menu. The icons were intended to bring clarity and serve as a visual representation of the seven sectors that GivePower had an impact on.

GP-all-devices.png

Click the thumbnail to view each static mockup.

Results/Insights

Here are the results after the website launched:

  • Bank of America awarded a second $500k grant to the GivePower Foundation.

  • GivePower partnered with an 6 additional companies

Although this was a one-off project, I believe that a design is never really “complete”. Design is an iterative process and there are always ways to improve. In the next iteration, I would:

·  Gather user feedback to find areas to improve

·  Run A/B tests to see how effective it would be to add a donation link to the main navigation VS. at the bottom of the homepage.

·  Design the donation experience within the GivePower website so that the design stays consistent. The current donation experience is done through a third-party website, which has a completely different design.

·  Refine the interaction, iconography and typography of the website.

·  Decrease the file size of images to improve page loading times