Giving Tree

The Giving Tree

UX/UI + Branding + Design

Problem

Design a web application for people to crowdfund donations for charities and foundations, and allow people to donate to specific causes.

View Prototype

Research

To begin the design process, I wanted to see what the competition was. Kickstarter and
GoFundMe are probably the most well known crowdfunding websites but I also looked at CrowdRise, IndieGoGo, Just Giving and GiveForward. I found that most crowdfunding
websites are specific on the types of campaigns they allowed. Kickstarter and IndieGoGo are for Ideas or Projects that you want to create. GoFundMe is mostly for personal fundraising for yourself, or a loved one or for charity fundraising.

I created a survey to find out what users would want from a new crowdfunding website.
Most have donated to both types of campaigns so I wanted to created a place that anyone could raise money for anything they were interested in, whether it is a campaign to save a hometown theater or fund a photography trip to Asia.

Branding and Identity

After the research phase, came time for branding. Since this was a project from my time at Bloc, I wanted to come up with a new name than the one they had given us which was Blocstarter. I created a word map just so I could have the word associations that I could think of. My name ideas are down the left side of the image above. It was difficult to come up with a name that wasn’t already in use by another crowdfunding campaign. In the end, I decided on “Giving Tree”. I thought about a tree for growth and also for money.

With the naming process complete, it was time to decide on the logo, typefaces and colors. The logo for Giving Tree came pretty easily. After a couple of sketches, I took those ideas into Illustrator. I wanted the logo to be simple so I used Raleway Thin and Raleway Semibold and created the leaves of a tree.

For the colors, I chose brighter, friendly colors with the purples and greens. I wanted users to feel welcome wihen they visit the website, whether they are a campaign creator or a donor and I think the color palette works well for that.

Design

Before I could start designing, I created User Flows. This was helpful in knowing how a user (Fundraiser and Donor would move through the website. This was an essential step in order to understand how the design would be implemented from start to finish.

With branding and reseach complete and User Flows created, I am ready to start designing. Using Balsamiq, I created Low Fidelity wireframes so I would know what worked and what doesn’t work in the design. I wanted to keep the design simple and streamlined, while allowing the users to finish their objective, whether they are creating a fundraiser or donating to one.

Once I was happy with what I had planned out, I moved to Photoshop to begin designing my mockups. This is the part I really enjoy. Even after all the research, color choices, branding and even the wireframes, it is hard to tell what the website will actually look like. With the mockups, you can get a sense of where the design is going. Even though I had created the mockups, there were a few changes that I made in the final design that worked a little better.



Usability Testing

Once all of the design mockups were completed, I used InVisionapp.com to create a prototype to make sure the design worked as intended. I submitted the finished prototype to peek.usertesting.com for user testing. This was helpful to see how real people would interact with the site and if I needed to make any adjustments. Overall, the users liked the layout of the website and thought it was very clean. Easy to use. One suggested more social logins which could be considered in the final design.

Conclusion and Reflection

I created this website during my apprenticeship with Bloc. This was the first large scale website I have ever designed so it was definitely a learning curve for me. I would like to update the campaign cards a bit, but overall I was happy with the site design.