Philly Jazz Redesign

The Philly Jazz app had broken functionality and needed a UI design update.

 
Current Jazz app and proposed redesign

Current Jazz app and proposed redesign

Research

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

 

Attended a local show and talked to patrons

Interviewed people who love Jazz music

Interviewed people who love other music genres

 

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

  • all the different Jazz venues in Philly and who regularly performs there
  • specific Jazz events in Philly

A few users had other ideas.

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

I developed personas based on my research.

Bringing it to Life

Wireframes

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

Ideation

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.

 

Upscale

Clean

Smoky

Dark

Classy

Smooth

Brass

Sexy

Royal

 

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.

Impact

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. 

 

WHAT OTHERS SAY ABOUT ME

“I had a pleasure of working with Talisha on a couple projects. The most fun and satisfying project was "What Makes RIT" video that we worked on. She was a key individual on the project as she had creative ideas on how to make the video more engaging. She was very devoted to the project and delivered her parts on time and helped tremendously with remaining project's work. She also has a great personality that makes working with her an enjoyable experience.”

— Nomaan Ahgharian, RIT ALUM, UX Engineer