Background

Crowdfunding feature is a piece functionality on Sweatcoin that allows one to donate their steps to charities (via transfer of sweatcoins). Crowdfunding is run as a series of campaigns, which attract a number of stakeholders: users, charities, and sponsors, who match the sweatcoin donation with fiat currency. At some point, it was decided to try and use crowdfunding as a growth engine, increasing it's visibility to those outside of the app, as these campaigns could only be seen by the users of sweatcoin, but no one outside of the app. As a result, we decided to create a web page for the feature, which would be both a way to increase exposure of campaigns and make them more visible outside of the app. This would be essentially a sharing landing page for each campaign, which would preview the feature, whilst also explaining what Sweatcoin is. The knock-on effect, as predicted, would be a better conversion of potential sponsors as the page shows well what these campaigns are and how they work, whilst also showing, in real time, donators to the cause.

Mapping actors

The map of user flows, drawn in Miro, was meant to show the place of the new Web crowdfunding page (dark purple) in the network, which we were trying to establish. For instance, it was desired that the page is used as a showcase to potential sponsors of future campaigns. Links like these were important to understand in order to inform the design of the page.

Fig. 1: "Network" analysis of the place of the new landing page in the sharing process

Fig. 1: "Network" analysis of the place of the new landing page in the sharing process

First Wireframes

Fig. 2: One of the first wireframes for desktop

Fig. 2: One of the first wireframes for desktop

Fig. 3: Structure and wireframes of the page on mobile

Fig. 3: Structure and wireframes of the page on mobile

Second Iteration

In this attempt, the main elements of the page were defined and the grid established. For the purposes of speed, the layout reused the same sizes of elements and fonts across different screen resolutions.

Fig. 4: A more fleshed out iteration

Fig. 4: A more fleshed out iteration

Final Design