The PMAY website was in need of a refresh, and the client sought to develop a visual language that would more accurately convey the values of the music education nonprofit. Currently, the website is built from a basic template and lacks a clear sense of hierarchy or consistent visual language, making it difficult for users to navigate the site. Some major pain points include the repetition of content across multiple pages and the use of a large amount of tabs in two separate navigation bars.
The wireframe focuses on addressing the functional issues with the current site. It aims to simplify the navigation and cut down on any unnecessary content. The client indicated that they wanted to prioritize the about, events, application, and donation pages; all other content was free to be cut. As such, let us define the users.
With these users in mind, we can assert that the pages to be prioritized are the about, events, application, and donation pages. Paring down the content to these categories and only displaying said categories on the navigation bar will serve to greatly simplify the user’s journey. Each category will also receive its own respective module on the homepage in the order of about > apply > donate > events. This system linearly walks a new user through the information of the program in order of priority: an introduction to the program > call to action for applications (and application information) > call to action for donation > events (which a new user may be less likely to look at if they are not already enrolled in the program). Old users will still be able to access any page immediately through the simple navigation bar.
The visual brief presents two possible directions for the client to choose from. Overall, it focuses on establishing a clear visual language to resolve the inconsistencies of the current website.Option 1 (sophisticated, modern, intimate)
Given that the client selected the first visual brief option, the resulting proposal combines the structural changes detailed in the wireframe and the identity that the visual brief developed. Refinements to the visual language were made during the development of the final proposal. One such refinement includes the incorporation of gradients in the banners of each page, which adds depth to the color scheme and represents a visual abstraction of hearing music. Another refinement is the use of the wavy line from Option 2 of the visual brief; this graphic element provides yet another visual representation of music.View the Prototype ↗