Sunday 16 February 2014

Pledge Music // Development // Project Page

After completing the structure of the home page, we created a footer structure that would remain a constant nav throughout the site. A key problem we identified with the current pledge site (which uses lazy loading to constantly add new content when you reach the bottom of the page) was that the nav bar was always pushed out of view before you had time to click it. Here are the current solutions:



Sidebar


Navbar


Our solution was simple and brand-constant, providing access to a greater number of sub-ages on the site than the current bottom bar. We included 'browse by' categories which could previously only be found in a sidebar at the top of the home page. 

This gave us a complete homepage that demonstrates many of the features of we were looking to implement in the site as a whole. 

Next we turned our attention to the project page. We felt it would be vital to get this design right as it can often be a new user's first encounter with Pledge and is often the page that gets shared around the internet. 


Our focus was on minimising the bulk of overall aesthetic of the site to allow the artist's voice to come through clearly and dictate the feel of the campaign. To do this, we had designed an overhaul of the video box which felt busy, ugly and overly complex and needed to better fit the modern aesthetic of our redesign. 

Current video box:


Our solution:


Our redesign extends the Pledge card format found throughout the homepage and introduces new bands of information and a short description which consolidates the important factors of the project in a cleaner way, giving the video content space to breathe. the video content is given a traditional 16:9 format that should work with most modern video content and allow embeds from Vimeo and Youtube. 

We struggled a bit with finding a suitable way of integrating descriptions in a cleaner way, initially exploring a multi-column format before deciding it would be too busy and simplifying to an expandable one-column format that ran the length of two pledge cards and kept harmony in our grid. 


One fundamental element in our redesign was an entirely new format for displaying rewards which moves away from Kickstarter style sidebars (below right) which are in common use amongst many of Pledge's (below left) competitors. Many factors come into play such as price points and exclusivity, and we were careful to develop our solution with these things in mind.




Our solution uses another variation on pledge cards. Using a grid of expandable content boxes we are able to save space and allow for a huge number of potential rewards on the page. Rewards are sorted into price order and expanding one box for info will expand its entire row of rewards. We have based this around the idea that if you are interested in a reward, you are most likely to also be interested in others in the same price bracket.



Closed card:
Features price, a simple product description, quantity and expand arrow


Full size boxes and grid:
rows are tints of blue to allow the eye to sort through a large grid of rewards. Gold cards indicate the reward is exclusive to Pledge. We have dealt with the problem of varying content lengths within rewards by allowing users to use the left and right arrows to flip cards to gain additional information in the form of audio, text, image or video content for the product. 


Current updates section:

A huge feature of our redesign is an overhaul of the update system which should be the key element of any Pledge campaign, allowing fans to follow the 'journey' of the artist. Some really exciting content can be found here that would convince new users to pledge were it featured more prominantly.


Journey Bar:


Our new Journey Bar would allow users to view all of the content posted throughout a campaign as a timeline and scrub through it in a dynamic way by pulling the slider from left to right. 















No comments:

Post a Comment