The 52
A local, track-of-the-day submission site
Via peer recognition, the 52 recognizes the greatest music tracks produced across the country. "The 52" refers to the 52 weeks in a year. At the end of the year the 52 top vote-getting tracks from each week enter to have a chance to be featured on a year-end compilation album. In addition, The 52 showcases daily top vote-getters on the site's front page. The 52 features individual websites for most major cities across the country, accepting music solely from that city's music community.
--
Roles: UX, design, art direction, strategy
Landing page. The track of the day is front and center, causing it to be the primary focus for the visitor. In order to solicit a greater amount of votes and to allow artists to promote their victory, the options to share this page on Facebook and Twitter are isolated and placed high on the page.
This being a music site, there are an abundance of opportunities to listen to tracks. It was important to take into consideration the fact that visitors might be playing a track and want to navigate to a different section of the page, thus cutting off the track. To minimize this issue, the majority of user interactions take place within this home page, without the need for a full page refresh. The video below helps illustrate this feature.
To reduce clutter, the day's shortlisted track picks are minimized until the visitor selects the bottom bar. The following image illustrates the responsive page layout that occurs when the shortlist is in view.
This being a music site, there are an abundance of opportunities to listen to tracks. It was important to take into consideration the fact that visitors might be playing a track and want to navigate to a different section of the page, thus cutting off the track. To minimize this issue, the majority of user interactions take place within this home page, without the need for a full page refresh. The video below helps illustrate this feature.
To reduce clutter, the day's shortlisted track picks are minimized until the visitor selects the bottom bar. The following image illustrates the responsive page layout that occurs when the shortlist is in view.
The page's primary contents adjust their position and re-size when the day's shortlist is brought into view. See the video below to view this transition in motion.
In order to keep the path to track submission clear and deliberate, the "Submit" navigation item is first in the primary navigation list and colored uniquely.
Should the user want a more detailed view of the track submissions, they can select the "Explore Tracks" navigation item to reach this view. Here, they can sample tracks while viewing their statistics. They also have the option of a variety of filtering options, allowing for an in-depth music seeking experience.
This motion composition illustrates how the site responds between user selections. To keep the site from cutting off tracks as the visitor plays them, the need to navigate away from the home page is minimized. Also, note that voting for a track is not available to the visitor until the track is being played. This ensures that visitors hear the track before voting and increases the quality of the results.
