Fund Change
A funding platform for creative projects addressing environmental issues and animal rescue efforts at local level.
The idea is to give power to ordinary individuals to bring change in their community. An individual can either be a creator or a backer. Creator is the person or team behind the project idea, working to bring it to life. Backers are folks who pledge money to the creators. The majority of initial funding usually comes from the neighbors and folks residing within the affected community. The reward for backers is the opportunity to get involved in various community level efforts and see almost instant results of funding sustainable environmental efforts.
Deliverables
iOS Mobile app
Skills and Responsibility
UX & UI Design, Brand Identity, User testing
Tools and Software
Sketch, Invision, Adobe CC, Principle
the challenge
Designing a web app to raise funds
One of the biggest challenge is to design a platform where people are willing to donate their money. Right from presenting various causes in the most effective manner, then creating easy payment methods and keeping backers of the project engaged through updates and rewards needs a well thought out structure.
COMPETITIVE ANALYSIS
Learning From Existing Solutions
To create best possible user experience for the target audience, it is vital to learn from the existing solutions. Setting up a competitive analysis chart of Kickstart, Giveforward, and Just Giving brought out pleasure and pain points with regard to ease of navigation, effectiveness of UI, Task facilitation, and other features such as account setting, review and ratings, card payments, and progress tracking.
Main pain points:
- Unable to see clearly entry points for donors and for project creators.
- Lack of categorization of projects.
- Lack of proper UIs for creating and managing campaigns.
- Payment process feels not secure.
INFORMATION ARCHITECTURE
SITE MAP OVERVIEW
It was crucial to let the users access the various projects as quickly as possible to gain their attention and keep them engaged. At the same time, the login process needs to be least annoying to allow people to easily sign in/ sign up and make donations.
iterations
Try Again
After several iterations of the site map and further user research a more refined and detail structure of the User flow and site map evolved.
Logo
Fun yet Meaningful Identity Marker
Two concept among others made it to the top of the list. Better responsiveness led to selection of the first logo:
Concept 1: The idea here is that the donations will lead to a cleaner and greener world.
Concept 2: The main aim of this logo is to represent the fruition of the donated money into a sustainable community.
Concept 1
Concept 2
Color Palette
Creating a Lasting Impression
The main colors associated with environment and currency are blue, green and yellow. For all these colors the saturation and vibrance was modified. The idea here was to give company a more modern, fun and energetic look and feel while staying true to the core idea.
TYPOGRAPHY
Friendly and Professional
Brandon Grotesque a sans serif type family, designed by Hannes von Döhren in 2009/10 is influenced by the geometric-style sans serif faces. This works for the purpose of our site as it represents - clean, modern and professional look.
Although Brandon Grotesque has a functional look, it has so with a warm touch. This conveys friendliness and welcoming nature which the site must represents.
Lastly, while the thin and the black weights of the font are great performers in display sizes the light, regular and medium weights are well suited to longer texts. The small x-height and the restrained forms lend it a distinctive elegance on various screen sizes.
Wireframes
Homepage and Login
One of the most critical insights from the user research was to display various projects as quickly as possible with a short quick summary of how they are performing to gain their attention of the users and keep them engaged. Once hooked they can be then promoted to Sign in or Sign up. Keeping this in mind once the main branding messaging and CTA is taken care of in the header banner along with a very brief description of what the company does, all the projects get their own space to be highlighted.
Wireframes
Donor's Journey
These wireframes trace the journey of donors . Donor's can filter through various projects, read about it, see the progress the project has made so far and choose to make a payment for it.
Wireframes
Project Creation
These wireframes list the journey to project creation. Project creators are given complete liberty to personalize the projects with images, write ups and even graphics to show the project's progress. However, pre-created categories are provided to fill in further details so that projects look meaty. Once these projects are created, users can share them over social media.
Wireframes
Profile and Project Updates
Project creators or donors will need to create a profile where they can input information about themselves and the cause they support the most. Important financial information will be stored here too. Additionally , users can see their past activity and check specific project status as well.
Putting Everything Together
Homepage and Login
Donor's Journey
Project Creation
Profile and Project Updates
