Design Problem

The Magic Piano songbook contains over 1100 songs and 20 songbook sections.  My goal was to help users navigate the large songbook more easily in order to find songs they wanted to play.  Limited screen real estate on mobile phones posed a particular challenge, given long song titles and other elements that needed to be retained on that screen.

Design Direction: Iterate on, prototype and test the efficacy of possible design changes in 4 primary areas:

• Sorting and filtering

• Navigation UI and layout

• Search – feature discoverability

• Preview button – discoverability

Solution 

• Implement sorting via a roll-in/roll-out filtering bar above the song list

• Change the songbook section selector to a vertically scrolling list at left

• Make Search functionality more discoverable through text and visual design improvements

• Update the look and feel of the Preview button so that its functionality is more discoverable

My role: All design discovery and research, UX design, prototyping, user testing. Visual design done by others.

Process

User testing – Phase 1: Exploratory, using the existing app store version of the app

My approach was to simply observe how users went about finding songs they were interested in playing, asking only the most broad and non-leading questions.

Findings

User testing revealed some obvious problems in the Piano iOS Songbook:

1. Navigation discoverability – Nearly half the participants missed the horizontal scrolling functionality of songbook sections at the top.

2. Navigation ease of use – Too much horizontal scrolling was required to view all songbook sections

3. Search discoverability – The Search feature was rarely used and easily missed

4. Song preview discoverability – Not one single testing participant was able to find how to preview a song

User mindsets

I formulated a hypothesis about the mindset of two main types users when they see the Songbook – the Seeker and the Explorer.

THE SEEKER – This person encounters the song list but has something specific in mind – a song title or artist with which she is familiar.  This type was more likely to find Search and Filters useful.

In the first round of user testing, most participants exhibited the behavior of the Explorer mindset, browsing the Songbook organically to see what was there, rather than looking for something specific. However, it was possible that the imbalance was due to poor Search discoverability.

Early design iterations – filtering, sorting, navigation UI and search

Filters

Initially, the higher level internal directive was to focus primarily on filters.  The hypothesis was that narrowing down the number of songs would be most helpful to users in finding content they were interested in playing.

I began by making a chart of potential filters that could be implemented in an early prototype and tested with new and existing Magic Piano users.

Sorting

Various types of sorting were considered:

• Artists A-Z

• Song titles A-Z

• Smoola low to high (coins needed to unlock songs)

• Songs most recently played

• User favorites

Early wireframes

In a series of wireframes, I explored sorting that could be applied either to each individual section or across the entire songbook.

Preview button discoverability

I proposed a new preview button design that was a square with rounded corners, which was visually consistent with button styles across the app.  The old button design was a circle, and users mistook it for a simple graphic, not a button.

Search discoverability

I added a text box in front of the magnifying glass to better hint at search functionality without adding too much visual weight.

Navigation UI: Horizontal vs vertical scrolling songbook section navigation

I wanted to test the viability of a vertically scrolling list of songbook sections at the left of the screen.  This would require significantly less scrolling overall to view all sections. I suspected that users might find this pattern more easily discoverable.

User testing – Phase 2: Early prototype, testing for functionality only

Goal: Determine which combination of filtering, sorting, search, search appearance and navigation layout best facilitated the song discovery experience.

A second round of online user testing was conducted using a couple of rough prototypes. Visual design and many user interface layout issues were yet to be addressed.

The iPad prototype shown here allowed users to experiment with a combination of filtering options, vertical navigation, improved search discoverability and an improved search screen algorithm.

Findings

Vertically scrolling Songbook section navigation

This layout change showed the most profound effect in user behavior and discoverability.  Nearly all participants immediately scrolled through the sections at the left, whereas more than half did not discover the horizontally scrolling sections in the previous design.

This feature was a clear win and was implemented in the final design.

Search

Overall, song discovery behavior was dominated by the Explorer mindset. However, Seekers now found their way to Search more easily, and text and algorithm improvements returned significantly more relevant results.

Scrolling distance (relative to screen height) to view all songbook sections

Sorting

A majority of users found the sorting options helpful and reported that they would use them frequently.

Filters

Most users did not find filters very helpful and stated that they would rather simply browse to see what songs were there, looking for something they recognized.

Shortcomings of applying filters to the Songbook:

• Applying too many filters could potentially produce "no results" too often.

• Filtering requires a number of steps. This is a flow that users would be repeating multiple times in a single session. More taps = more friction.

Final Design

The old navigation design combined both horizontal and vertical scrolling in the navigation – a confusing combination of behaviors. 

The new design made vertical scrolling consistent across the Songbook and made section navigation more discoverable. It was a design pattern that users recognized, and the the amount of scrolling required to view all sections was reduced to 38% of the swiping distance required in former design.

Specs

New Songbook high-fidelity mock vs. old Songbook