Header mockup for Push10
Push10
Role: Design Intern
Date: Summer 2021
Skills: Figma, wireframing, prototyping, visual identity design
Summary: During my time as a Design Intern for Push10 during the summer of 2021, I assisted with client-facing work for web, brand, and print, created designs for internal use, and completed a variety of portfolio-building intern tasks. Amongst these tasks was my intern final project, in which I developed a hypothetical website for the Philadelphia Music Alliance for Youth (PMAY).

Problem

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.

Image of the old PMAY site
On top of the functional fixes, the client requested for the new website to accentuate the liveliness of music education, highlight their students’ performances, and provide a level of prestige and sophistication.

Wireframes

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.

  1. User 1 (The Applicant): The applicant is a user of the nonprofit’s target demographic (K-12 low-income students) who already knows basic information about the program and is looking to apply. This user wants a streamlined application process where the requirements are made visually clear and easy to navigate.
  2. User 2 (The Prospective Parent): The prospective parent is the guardian of a possible applicant who is looking for a suitable music program for their child. They are searching for basic information on the program and are aiming to get a general sense of the program’s values, environment, and level of prestige.
  3. User 3 (The Enrolled Parent): The enrolled parent is the guardian of a student currently enrolled in the PMAY initiative. This user only checks the website to view information on events their child may be involved in and to donate to the program.

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.

PMAY wireframes

Visual Brief

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) First visual brief option First visual brief option First visual brief option

Option 2 (invigorating, bright, exciting) Second visual brief option Second visual brief option Second visual brief option

Proposed Website

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   ↗
Push10 scrolling mockup Push10 final mockups
Made with 🍯 by Mia