A responsive 'tiles' interface to span different scenarios across a social platform for charities

Project

From 2013-2014 I was the lead designer at a startup in London called Believe.in. Together with a small team we built a social platform for charities of all sizes to easily fundraise, receive donations and run campaigns. We were the first and only charity platform to charge no commission. We also worked with payment partners to eradicate card processing fees. Meaning that 100% of all donations made went to charity (note: other fundraising platforms take sizeable cuts from donations)! This was revolutionary and stood to save the charity sector millions! It also made us unpopular to the stagnated competition.

Design

The first iteration of our offering was a social platform for charities and the public to donate, fundraise and track their good deeds. Showcased here is the first major re-design of that product, post launch. I originally came up with the concept of the activity feed and tiles interface in wireframes for a different Believe.in project, but we decided the solution was better-suited / worthy of a full site roll out. Being a fast-paced startup, this meant undergoing a full re-design and build in a very short period. A tiles interface gave us huge flexibility to build different scenarios, actions and content, to paint an informative, interactive and visually pleasing archive of charitable good deeds, be it of an individual, or the sum of all deeds, donations and fundraising for a particular charity.

Involvement

Concept
Wireframes
Design

Client

Believe.in

Date

Aug - Sept 2013

Honours

Gold at the 2013 Lovie Awards

Credits

Will Cookson — Founder/Designer
Matthias Metternich — Founder/CEO

"Believe.in redesigns its beautiful, social fundraising platform with a new tile layout. Above all, the interface is simple and intuitive, making it accessible to pretty much anyone. In short, this is well worth checking out."

The Next Web

User profile

Here you can see the tiles in-situ of a user profile. Kindly modelled by myself and my love of surfing, cats and the charity Surfers Against Sewage! ;)

Posting an update

Ordinarily the tiles would fill all 3 columns, but in this example the user has clicked the 'post an update' button, which opens up a (form) panel to quickly post an update (think: charitable deed). All other tiles reconfigure / smoothly (slide) down and aside to accommodate this panel.

Design team

The new page design structure, look and navigation was designed by Will Cookson. I concentrated on the tiles themselves and the posting an update feature/flow, from wireframes to design.

Updates

Users and charities can easily post updates. You can easily & quickly post an update (or good deed), with the options of attributing it to a charity, or adding a date, image or video.

Charities

For charities this is a great way to keep people updated on their charities activities, whether it be campaigns, fundraising opportunities, rallying supporters/donations, or simply saying hello! The ability to add imagery and videos is perfect for them to effectively communicate their campaign messages and brand their profiles.

Video

The video tiles span two columns so you can watch the video on the site, within the tile and not have to load an external site, new page or modal window.

Quickly posting an update

The two images above show the flow of posting an update, from the empty form (on open), through to editing, adding an image or video, (live) previewing your update and the final tile it outputs.

Easily make a donation or setup a fundraiser

The user can quickly start the process of making a donation or starting or fundraiser by selecting a charity, an amount and whether it's a single/monthly donation, or a solo/team fundraiser, then click to continue onto the next step of completing their donation.

Donation tiles

Automatically generated tiles for when users make single/monthly donations direct to a charity, sponsor a friend via a fundraiser or support a charities campaign.

Single action page

Similarly to Facebook or Twitter, every (or most) 'actions' (or tiles) have their own unique page and URL, so you can share an action, donation or post/update.

The page features the tile for the action, includes clear and obvious opportunities to share it and all the usual functionality of liking or commenting on the action.

Background

The background changes depending on the type of tile/action it is. Official charity tiles pull in that charities' custom background image, all other updates feature a variety of Believe.in branded backgrounds.