Getting a few things ready...

Getting a few things ready...

Ziyad Gower

Woodshed

Woodshed

Case Study

UI/UX

Self-Directed

Desktop

Role: Sole product designer, UX researcher, and UI/UX designer for a self-directed project.

Woodshed is a jazz education platform and a catalogue of transcribed jazz solo licks for musicians to to practice.

As designers, we can often lean on Jakob's law in crafting products. The was an interesting project specifically because no direct analogue existed from which to borrow commonly understood design patterns.

Home
Work
About
Home
Work
About

Background

Background

Much of jazz is improvised, but that doesn't mean it's just made up! Students of jazz learn to improvise by studying old recordings. They transcribe the notes of their favorite jazz solos, sometimes play them in all twelve keys, and through repetition, they absorb the musical phrases, or licks, into their repertoire. This intensive, solitary process is called woodshedding.

Problem

Problem

Spare me the journey, skip to mockups

Spare me the journey, skip to mockups

Too few jazz resources online

Learning to play jazz music, even in the digital age, is an opaque process that's unfriendly to beginners (especially if you can't afford a teacher).

Too few jazz resources online

Learning to play jazz music, even in the digital age, is an opaque process that's unfriendly to beginners (especially if you can't afford a teacher).

Decision paralysis

Of the thousands of recordings you could study, which do you choose? Decision paralysis can stop a practice session in its tracks.

Decision paralysis

Of the thousands of recordings you could study, which do you choose? Decision paralysis can stop a practice session in its tracks.

Manual note transposition is a slog

Although it’s a useful skill, it’s not always what musicians want to focus on. Often, this means musicians only learn licks in the original key, and therefore don’t integrate them fully into their playing.

Manual note transposition is a slog

Although it’s a useful skill, it’s not always what musicians want to focus on. Often, this means musicians only learn licks in the original key, and therefore don’t integrate them fully into their playing.

No chord-based song searches

There’s no easy way to find jazz licks that are played over a specific series of chords.

No chord-based song searches

There’s no easy way to find jazz licks that are played over a specific series of chords.

Objectives

Objectives

1

Design a music database and platform to support practicing jazz improvisation

2

Provide an intuitive lookup system for licks in the database

3

Encourage users to drill down on a single lick once they've made a selection

4

Include light, optional gamification elements to make users feel good about mastering a lick

5

Encourage the user to listen to the source material and discover more music from there

6

Deepen the user’s connection to the jazz tradition

1

Design a music database and platform to support practicing jazz improvisation

2

Provide an intuitive lookup system for licks in the database

3

Encourage users to drill down on a single lick once they've made a selection

4

Include light, optional gamification elements to make users feel good about mastering a lick

5

Encourage the user to listen to the source material and discover more music from there

6

Deepen the user’s connection to the jazz tradition

1

Design a music database and platform to support practicing jazz improvisation

2

Provide an intuitive lookup system for licks in the database

3

Encourage users to drill down on a single lick once they've made a selection

4

Include light, optional gamification elements to make users feel good about mastering a lick

5

Encourage the user to listen to the source material and discover more music from there

6

Deepen the user’s connection to the jazz tradition

User Flow / Sitemap

User Flow / Sitemap

My main goal was to route users as efficiently as possible to the Practice Lick page—that's the core service after all. That's why I included a "Featured Lick" on the home page; I needed a one-click route to the heart of the site, even for logged-out users. This is kind of a hybrid user flow and sitemap, so some pages not directly involved in the main flow are included.

A user flow diagram for Woodshed that also includes pages not directly involved in the main flow
A user flow diagram for Woodshed that also includes pages not directly involved in the main flow

Wireframing

Wireframing

Wireframes for Woodshed
Wireframes for Woodshed

Branding

Branding

A two-panel diagram of the branding for Woodshed including the colors and typography choices
A two-panel diagram of the branding for Woodshed including the colors and typography choices

Playing the blues, without blues

Jazz musicians tend to be night owls! Knowing this, I chose colors with nighttime practice in mind—an earthy palette with no harsh whites and no blue light, both of which can disrupt natural sleep cycles.

Playing the blues, without blues

Jazz musicians tend to be night owls! Knowing this, I chose colors with nighttime practice in mind—an earthy palette with no harsh whites and no blue light, both of which can disrupt natural sleep cycles.

Why didn't you design a dark mode?

The primary accent color was inspired by the neon signage that once adorned jazz clubs on 52nd Street in Manhattan, as well as some iconic jazz album covers. The secondary gold color denoting mastery was also partially inspired by album art.

It's about the choices you don't make

Public Sans, the site's primary sans-serif typeface, was chosen for utility and mid-century modernism. Playfair Display, used for the Woodshed logotype and sparingly throughout the site, lends elegance and tradition.

It's about the choices you don't make

Public Sans, the site's primary sans-serif typeface, was chosen for utility and mid-century modernism. Playfair Display, used for the Woodshed logotype and sparingly throughout the site, lends elegance and tradition.

A minimal overall aesthetic felt appropriate to the subject matter. I wanted certain graphical elements to evoke pencil drawings (for example all the 1px black borders), because Woodshed is a place to experiment and refine.

Feature Spotlight: Chord Progression Builder

Feature Spotlight: Chord Progression Builder

One of the site's core offerings is a chord-progression-based search of the lick database. The point of the exercise of solo transcription is to later deploy the newly acquired vocabulary in one's own playing, often over passages that use the same or similar chords. So if there were a way to quickly find licks that use a specified chord or series of chords, it would enable targeted practice in a way not previously possible.

I carried out user trials on this first-draft prototype with six musicians with differing self-reported jazz expertise, and two non-musicians. They revealed several design issues and sparked a host of enhancements.

1

An intuitive and thematic root selection component

The root selection area was reimagined to better align with musicians' mental models by mirroring the layout of a piano keyboard. I also added a few lines between the root selection module and the chord quality module to more clearly indicate that the two are linked.

1

An intuitive and thematic root selection component

The root selection area was reimagined to better align with musicians' mental models by mirroring the layout of a piano keyboard. I also added a few lines between the root selection module and the chord quality module to more clearly indicate that the two are linked.

A mockup of the newly designed Chord Root Selector component
A mockup of the newly designed Chord Root Selector component

2

More accessible phrasing

The auxiliary settings below the staging area were rephrased to be more understandable to a wider audience. Advanced users could parse them, but they were not immediately clear to beginners.

2

More accessible phrasing

The auxiliary settings below the staging area were rephrased to be more understandable to a wider audience. Advanced users could parse them, but they were not immediately clear to beginners.

3

Better enharmonic treatment

I'd prefer users not have to think about enharmonics (an in-the-weeds music theory topic about what letters should describe chords), so I designed the new version such that it no longer needed an explanation.

3

Better enharmonic treatment

I'd prefer users not have to think about enharmonics (an in-the-weeds music theory topic about what letters should describe chords), so I designed the new version such that it no longer needed an explanation.

4

Streamlining the chord quality dropdown

It was difficult for users to locate specific dropdown items, so I changed this field to a text input. This also let users write chords in their preferred format, in cases where chords can be written synonymously.

4

Streamlining the chord quality dropdown

It was difficult for users to locate specific dropdown items, so I changed this field to a text input. This also let users write chords in their preferred format, in cases where chords can be written synonymously.

Drag the slider to see before and after user testing!

Final Result

Back home

Case Study

Mnthly

Career

JobDiva
Back home

Case Study

Mnthly

Career

JobDiva

Ziyad Gower |