Pledge Music // Design Sprit // DAY 4 + 5 Development

In day 4 we were tasked with producing a digital prototype of our design and chose to focus on the home page as it will likely be the first encounter a new user will have with the site. We found that the design sprint had forced us to make the vast majority of design decisions on paper. This meant that all we had to figure out on the computer was colour choices and appropriate imagery.

The structure we had sketched on day 3 translated really well in the digital mock-up. The full-size pledge button was particularly effective. We wanted to step away from the use of a green totaliser and struggled with finding a colour that reflected the new direction of the site. 

Large banner image - Using creative commons images, we were able to find placeholder photographs to populate the large header. 

On day 4 we turned our attention to creating the nav bar. The current logo (below) didn't fit into the clean aesthetic we were creating with the website refresh. For our proposal, we stripped back the logo to it's bare minimum, using the ultra-functional PT Sans and a simple icon which uses negative space to remove the need for the multiple colours and gradients used in the current logo. By making a horizontal-format logo, we also allowed it to fit in a sleek nav bar. 

This was our inital nav bar, which contains only the essential elements: Logo, search bar, user indicator and links to the 'New to Pledge?', 'Browse Projects' and 'About' pages. 

We decided that the background of the nav was unnecessary and instead decided to make use of the rich imagery of the large format header. This made a  huge difference, bringing a freshness to the site that was hard to achieve with a conventional nav bar. 

The next big design decision was to finalise a totaliser colour that wasn't being used by competitors and contrasted the other colours of the site.This solution allows this information to pop and provides instant information about the project and its progress. 

Double content boxes - Here we have demonstrated the use of mixed-size content boxes. The double box will serve the purpose of featuring a particular project. The larger format allows for a description and large format image to provide more incentive to click through. This could potentially provide a system for generating additional revenue for tiered plans. 

The 'new' section presents a selection of projects which are just getting off the ground. 

Triple Content Boxes: 

This would provide a way of featuring a video on the homepage. Currently videos can only be seen on clickthrough and we felt it was one of the most exciting aspects of the project and should be celebrated. 

Screenshot of the full site: