Philly Jazz Redesign

The Philly Jazz app had broken functionality and needed an update

Current Jazz app and proposed redesign

Current Jazz app and proposed redesign



Learning about Jazz enthusiasts

I found a study to help me learn more about the target audience: people who attend live Jazz performances.

Understanding Audiences for Jazz: Overview, Briefing 2, Briefing 8

Audiences attend live Jazz shows to:


see one of their favorite musicians

see technical excellence for a specific instrument

discover unfamiliar music


Additional points about Jazz show attendees:

  • most are older, with the average age being 42
  • usually educated and have diverse political views
  • more likely to be in a relationship

Understanding Users Mental Models

To understand what type of functionality would be beneficial for users I took a 3 step approach

  1. Attended a local show and talked to patrons
  2. Interviewed people who love Jazz music
  3. Interviewed people who love other music genres

All users expected that the Philly Jazz app should tell them:

  • different Jazz venues and their regular performers
  • specific Jazz events in Philly

A few users had other ideas.

  • a place to learn about local artists and what instruments they play
  • updates about the local Jazz community

I developed personas based on my research.


Bringing it to Life


Using Balsamiq I created wireframes to think through layout and navigation. Given many users of the app would be older, I wanted to use patterns that were easy to understand with limited but clear navigation options.  The app should be so clear no formal onboarding should be necessary. 


Wireframes of main features



To help with choosing a color scheme and typography I had a few friends and family describe Jazz music using one word. I kept these in mind as I worked through the visual design.













Using Photoshop I began work on the visual design.


Design Iteration

I asked a design professional for feedback and further refined my designs. To make the app look more clean I reduced to font-size of the menu items. I made the text more readable by changing the images to black and white and added a transparent overlay. To make the menu look more like a home page, I added the logo and gave a bit of instruction to users. I also added purple to the color scheme as an additional accent color the differentiate clickable links from headings.



What I Learned

The key to creating effective personas is to include information gathered from research and to only include relevant data points that is relevant to how the user will interact with your solution. 

This project was also an opportunity to practice visual design for mobile. I learned about developing for different screen sizes and the HIG design guidelines to help get your app launched faster.