Paul Henry Smith
Product Designer

UI, Interaction, and Motion

Dragging the pointer clockwise or counter clockwise changes the start or end measure number. Dragging speed affects display: Slower movement changes numbers slowly so it's easier to “land” on one. Fast movement scrubs through the numbers very quickly, which is useful when moving across hundreds of measures.

Dragging the pointer clockwise or counter clockwise changes the start or end measure number. Dragging speed affects display: Slower movement changes numbers slowly so it's easier to “land” on one. Fast movement scrubs through the numbers very quickly, which is useful when moving across hundreds of measures.

One-handed range selection

Musicians need to be able to start at a specific spot while practicing. I designed this interaction for three use cases:

  1. Tap a spot, then play.
    End position defaults to end of the piece of music. This is the most common use case.

  2. Tap a spot, then tap "end" to select a new endpoint for the range.

  3. Tap plus to save that range to a list of sections to recall later.


Company: Sonation
App: Cadenza
Year: 2015
Platform: iOS
Roles: UI/UX, Interaction design

Interaction Design

Mixing two audio tracks with one slider

Cadenza records the user playing their instrument or singing and mixes it with the backing track. This UI allows the user to adjust the relative loudness of each track, the solo and the accompaniment.

Dead center on the slider corresponds to 100% loudness of both tracks. Moving away from the center reduces the loudness of the opposite track, but from the user's perspective it sounds like an increase in the current track. Moving all the way to the end mutes the opposite track. Double-tapping resets to the middle position.

Prototype version 1Made with Principle

Prototype version 1
Made with Principle

A study app prototype for user testing

This prototype was used to test whether and how well students understood the scores they earn in Pearson’s study app, Revel. In the app they can take quizzes, do reading, and answer questions to earn points. The problem was that scores are often weighted, so it’s hard to know what impact individual types of work would have on total performance. For example, essays might count less than quizzes, so doing well on essays might not matter as much as doing well on quizzes.

Observations showed that students try to figure out their “real” total score based on individual item scores, but often miscalculate, due to opaque weighting factors. If that error leads them to think they're doing okay in their class when they’re not, there can be a bad outcome.

The bottom line is that students simply want to know if they are doing okay, or if they need to worry. They are not usually looking for a number for its own sake.

Company: Pearson
App: Revel
Year: 2019
Platforms: iOS, Android
Role: UX/UI/interaction design, data visualization

Prototype version 2

Prototype version 2

The second version tested better. Few students swiped to see the details behind the main score—and that was fine with them. They were much more interested in what types of assignments needed their attention.

Adding media to the in-app notebook

Pearson’s eText and Revel apps have a student notebook. It kept student annotations they have attached to specific content in a particular book. However, students wanted to be able to add photos and videos to their notes, too, because they often took photos of in-class whiteboards, lecture slides, printed books, and even hand-written notes.

Having these media associated with specific textbook sections would help keep notes organized.

Company: Pearson
Apps: Revel, eText
Year: 2018
Platforms: iOS, Android
Technology: iOS App Extensions

See a PDF of the following flows.

Two use cases: A starts in a third-party app (e.g., Photos or Camera). B starts within the Pearson app when a student is writing a note.

Two use cases:
A starts in a third-party app (e.g., Photos or Camera). B starts within the Pearson app when a student is writing a note.

Interaction Design
Interaction Design
Organizing iPad Gestures

Gestures and behaviors

These mockups show the main gestures and resulting behavior of Pearson’s eText app for reading, navigating, annotating, and marking up with Apple Pencil. Color overlays are explained by the legend on the first screen.

Company: Pearson
App: eText
Year: 2018
Platform: iOS (iPad)
Role: Interaction design

See “Tablet Gestures” in InVision

Final design for Revel “scores” view.

Final design for Revel “scores” view.

App for trumpet-playing Star Wars fans

Created as a promotion for Sonation, the “Millennium Trumpet” app for iPad was launched one week before the release of Star Wars, The Force Awakens. The purpose was to take advantage of the hype around the movie opening to connect musicians who love Star Wars with Sonation’s apps for music-making.

A new hope for reading music? Music Crawl
Like the opening prologue in every Star Wars film, the music notation in the app scrolls into the distance, while AI controls scroll speed to ensure only the upcoming notes are on the largest and most legible line.

Company: Sonation
App: Millennium Trumpet
Year: 2015
Role: UI/UX, Interaction, Visual design, Mini Cooper driver

Interaction Design

App-powered Mini Cooper music performance tour of Boston and Cambridge

Two stormtroopers and a wookie walk into a car…

Sometimes one just goes a bit crazy.

With cheap halloween costumes and a Zipcar rental, our trumpet-playing storm troopers and a wookie hit the town in a Mini Cooper convertible. Orchestra music from the app played through the car stereo in real time, as the iPad “listened” to the trumpet players to keep in sync with them.

Folks outside Berklee College of Music, Harvard, MIT, and the Loews theater were in for an odd sight. Videos and images posted by onlookers garnered over 500,000 views that single night. Maybe crazy works sometimes?