Pandora Driving Mode

Pandora Driving Mode

Driving mode prototype in action, no commentary (45 seconds). Tools used: Photoshop, Proto.io, AZ Screen Recorder.

Update 2/25/2015: I created an interactive demo using Proto.io, adding a link and embedding a video demo above. I also added a section discussing them in an Interactive Prototype section below the storyboard section.

Overview

Taking as a premise that Pandora’s mobile app (Android) is “clumsy, out of date, and not very mobile-friendly”, I took a design challenge to redesign it or to add features at my discretion. I focused on the core experience of Pandora’s mobile app—its Now Playing screen and its usage while on the go. Inspired by the Audible’s “Button-Free” mode, I created a “Driving Mode” for Pandora, focusing on gestures for core interactions, and both adding a simple, missing bit of navigation. Looking ahead, the gesture-based UI for the core interactions should be ideal for almost direct transplantation to apps for smaller screened devices such as smartwatches.

The Design Exercise: “Redesign Pandora”

Terms of The Exercise

Issues With Pandora

  • Clunky
  • Out of date
  • Not mobile friendly
  • Think about use cases of listening to music when you’re on the go (out running, in the car, on a bike, etc.)

Constraints

  • Use the Samsung Galaxy S5 as your target phone
  • Exercise duration: 48 hours
  • Do whatever you want to the app, including add features.

Current System(s) Summary Description and Evaluation

I have some familiarity with the Pandora service and mobile apps. I signed up with the website when I got my Palm Pre in 2010, noting that it had a Pandora app. It is this webOS Pandora app on my Palm Pre that provided me with the bulk of my Pandora usage experience.

On receiving the challenge, I did start the Pandora on my Samsung Galaxy S5 for the first time, and conducted an exploration of it, noting UX issues along the way.

Notes From Exploring Pandora’s Android App

I explored the app both sitting at my desk and, later, while driving.

Issues Noted

  • How do I change or choose what the output device is?
    • Not on the now playing screen, not on the Now Playing right sliding panel, not in the volume panel, …
    • Volume buttons of the GS 5 bring up the sliding volume panel, but not the standard volume pop-up.
    • Bug: On my Bluetooth headset, no sound, despite being connected for media and phone audio.
      • No way to change it aside from:
        • Turning off the headset
        • Turning off Bluetooth on the phone
        • Probably disconnecting the headset via phone’s Bluetooth Settings
  • Your current station does not show on the now playing screen.
  • There is no way to change your current station from the now playing screen.
  • Hierarchical screens with “back” navigation are good and clean conceptually, but a bit awkward and potentially wasteful on larger screens like the GS5’s.
    • It’d be nice to be able to view the “station” list without losing the context of the currently playing song.
    • Maybe more could be presented via slide-in panels.
    • Note: the use of a screen hierarchy works well with “back” navigation as seen in stock Android and Samsung’s Back button. This may argue against the use of a slide-in left panel, for instance, or something reminiscent of webOS 3.x’ panels.
  • Even with the large screen of the GS5 (relative to my previous phone, and iPhone 4S), interacting with the app while driving is awkward-requiring precision and attention at time when both those limited resources are better spent on driving:
    • The core interactions require hitting buttons/icons that are limited in size: thumbs up, thumbs down, play/pause, next.
    • Secondary interactions also require those resources: scrubbing the song along the time slider (the targets are very small), changing “stations” requires going back (GS5’s back button or an on-screen button at the top left of the screen) and selecting from a list of text elements

Candidate Elements for Redesign

  • Driving Mode a la Audible app
  • Offer a way to switch radio stations while on the Now Playing screen
  • Add access to an audio output selector
    • Maybe a section on the contextual panel off the right of the now playing screen
    • Maybe a menu off of an icon in the volume panel
  • For “background usage”:
    • Floating controls (Beat app on Android)
    • Controls in Notification Panel (webOS, Android)

Redesign Target: A More Driving-Friendly Experience

The Button-Free mode from the Audible app (Android). Available interactions are swiping left and right, as well as tapping and long pressing. These actions can be done anywhere on the screen, reducing the amount of attention and precision necessary, which should hopefully be a boon for driving safety.

The Button-Free mode from the Audible app (Android). Available interactions are swiping left and right, as well as tapping and long pressing. These actions can be done anywhere on the screen, reducing the amount of attention and precision necessary, which should hopefully be a boon for driving safety.

Inspired by the Audible App, I decided that Pandora’s app could benefit from having a mode dedicated to greater safety while driving, primarily requiring less precision and attention in interaction.

Process Steps Represented in This Document

This document represents a snapshot of the state of the described Samsung design exercise in terms of the process outlined above and how it got there.

  1. User research and heuristic analysis. While self-observation and introspection can often be suspect as a source of research, as focused design exercise, I executed based on the information in the exercise statement and my own experience with the Android App on my Samsung Galaxy S5. Artifacts:Notes included in Issues Noted, above
  2. Market research. Knowing from my phone conversation with the RedBeacon hiring manager that one of the directions that RedBeacon is considering is growing their service and app beyond being a point solution.
  3. Design. Where the rubber meets the road. Artifacts: Notes, sketches, Balsamiq mockups, Photoshop mockups, interactive prototypes, etc.

Artifacts Included in This Document

  • Typewritten notes
  • Notes and initial design explorations from sketchbook
  • High resolution images as prototypes, incorporated into a storyboard. The storyboard includes descriptions of available gestures, interaction, and transition animations.
  • An interactive prototype, and video demonstrations thereof (added 2/25/2015)

Design

Artifacts for this section: Notes, screen and interaction sketches, and a storyboard with hi-res screens and UI specifications, a link to an interactive prototype, and videos of the interactive prototype in action.

Design Considerations

  1. Use bigger gestures over tapping icons and smaller targets
    1. From Fitt’s Law
    2. Thumbs up, Thumbs down, pause, next
  2. Minimize the precision necessary.
    1. Fitt’s Law
    2. Driving safety
  3. Minimize context/screen switching for other “common” tasks
    1. Enable changing of station from Now Playing screen
    2. Enable changing audio output device from Now Playing screen
      1. Would not be as necessary if GS5, for instance, managed my Bluetooth devices more along the lines of how I use them: headset for phone, separate Bluetooth device for media to my car. They switch/connect/disconnect unpredictably.

Design Inspirations

  1. “Driving Mode”: Audible App’s “Button-Free” mode
  2. Interactions
    1. Zooming and pinch gestures: iOS, Pad++, Microsoft Surface (table-sized version)
    2. Swiping left and right to go through songs or stations: Photo gallery apps on iOS, webOS, Android, etc.
    3. Swiping up for Thumbs Up and swiping down for Thumbs Down: Tinder

Sketchbook First: Notes, Usage Scenario, and Design Sketches

Scans from my sketchbook.

Storyboard with High Resolution Screens

In the following storyboard, I present a sequence of screens in a scenario of a user starting out in a Now Playing screen in normal mode and switching to and interacting with a new Driving Mode in the Pandora Android app.

Step 1: Go to the Menu

The Now Playing screen

The Now Playing screen

Not yet driving, users will start from the normal mode Now Playing screen so that they can start Driving Mode before starting their drive.

Mostly the same as the current Now Playing screen, I added a station title and selector at the top of the screen.

Screen Exit: To get to Driving Mode, users will need to tap the Menu button.

Step 2: Select a Listening Mode—Driving

The sliding sidebar menu available from the Classic Mode Now Playing screen in my Pandora Driving Mode design (v0.1). Created in Photoshop, both from screenshots and with Photoshop's tools, this is a high-fidelity mockup.

Screen Exit:Tap Driving Mode

Step 3: Driving Mode

01-01 Drive Mode - Now Playing - normal, paused w Back button

Features of Driving Mode:

  • Full screen: No Status bar. Worth more consideration.
  • Station name is included at the top of the screen-visual hierarchy reflecting a conceptual one here.
  • The only real tap targets here are the scrub marker for the timeline, the audio selector at the bottom, and the station name at the top.
  • For the Pandora core interactions-thumb up, thumb down, next song and previous songs (for rating or reference)-gestures done anywhere on the screen anywhere on the screen . Gestures include:
    • Swipe up: thumb up
    • Swipe down: thumb down
    • Swipe left: next song
    • Swipe right: back to previous song.
    • Pinch: zoom out to station list/selector.
    • Tapping anywhere in the area of the cover art (full width of the screen, not jus the middle where the icon is) will play or pause the song.
    • Tapping on the station name at the top
    • The hinting for the gestures doesn’t seem the most elegant, but most elegant here would be no hinting at all, which would be troublesome for novices, though should be an option for experts in the settings. Samsung’s GS5 will have a more interesting option, described below.
    • The arrows are faded and go from narrow to wider at the arrowhead to suggest movement-here, swiping, rather than to hit the icons, which are faded a bit to allow attention to be drawn a little by the arrows.
  • The timeline scrub target is intentionally large to make it easier to hit when necessary.
  • The audio selector is a scrolling carousel, also with intentionally large targets.
Exiting Driving Mode

For GS5s and other Samsung devices with a dedicated Back button, the Back button will allow users to exit Driving Mode, taking them back to the Now Playing screen (with the right panel closed).

A Back button at the top left will do the same thing.

Step 3a (for GS5s, etc.): Progressive Enhancement

01-03 Drive Mode - Now Playing - subtle w Back

Because the Samsung GS5 and related phones and tablets can sense the proximity and location of a finger hovering over the screen, our design can use that to provide hinting or reminders on a more just-in-time basis, allowing the baseline state of the hinting to be more subtle.

So the normal state of the arrows and other hinting here is a little fainter than the one seen above. Hopefully enough to suggest and remind about the gestures.

Screen Exit: n/a

Step 3b (for GS5s, etc.): Hovering Brightens The Hinting

01-02 Drive Mode - Now Playing - Galaxy S5 hover lightbox w Back button paused v0-1-1

As the GS5 senses a finger’s proximity, it can then make the gesture hinting brighter and more obvious.

The option to remove the hinting could have a sub-option to also remove or potentially retain this hover-sensing enhancement.

Screen Exit: n/a

Step 4: Animated Feedback, “Play”

02c Play feedback w Back - Driving Mode

Intended as a keyframe for a feedback animation, here we see the play symbol in white and expanded from its smaller gray self when users tap on the screen around the cover art to play the song. The gesture hinting has also momentarily been faded away to emphasize this “play” action’s feedback.

The animation should continue beyond this frame to shrink and fade the play icon back to the appropriate device’s Step 3 or Step 3a screen, but now with the Pause icon in the middle, as seen on the left below.

Screen Exit: n/a

Step 4: Animated Feedback, “Pause”

02d Pause feedback w Back - Driving Mode

Intended as a keyframe for a feedback animation, here we see the pause symbol in white and expanded from its smaller gray self when users tap on the screen around the cover art to pause the song. The gesture hinting has also momentarily been faded away to emphasize this “pause” action’s feedback.

The animation should continue beyond this frame to shrink and fade the play icon back to the appropriate device’s Step 3 or Step 3a screen.

Screen Exit: n/a

Step 4: Animated Feedback, “Thumbs Up”

Thumbs Up feedback following a swipe up in my Pandora Driving Mode design (v0.1). Created in Photoshop, both from screenshots and with Photoshop's tools, this is a high-fidelity mockup.

Intended as a keyframe for a feedback animation, here we see the thumbs up symbol in white and expanded from its smaller gray self after users swipe up anywhere on the screen. The icon is also intended to animate while it expands from its normal position towards the top of the album cover image. The gesture hinting has also momentarily been faded away to emphasize this “thumbs up” action’s feedback.

The animation should continue beyond this frame to shrink, fade, and move the thumbs up icon back to the appropriate device’s Step 3 or Step 3a screen.

Screen Exit: n/a

Step 4: Animated Feedback, “Thumbs Down”

02b Thumbs down feedback w Back - Driving Mode

Intended as a keyframe for a feedback animation, here we see the thumbs down symbol in white and expanded from its smaller gray self after users swipe down anywhere on the screen. The icon is also intended to animate and move while it expands from its normal position towards the bottom of the album cover image. The gesture hinting has also momentarily been faded away to emphasize this “thumbs down” action’s feedback.

The animation should continue beyond this frame to shrink, fade, and move the thumbs down icon back to the appropriate device’s Step 3 or Step 3a screen.

Screen Exit: n/a

Step 4: Animated Feedback, “Next”

02e Next feedback w Back - Driving Mode

Intended as a keyframe for a feedback animation, here we see the Next symbol in white and expanded from its smaller gray text version of itself (“Next”) after users swipe left anywhere on the screen. The “Next” text is also intended to animate, move, and become the icon as it travels from its normal position towards the left of the album cover area. The gesture hinting has also momentarily been faded away to emphasize this “Next” action’s feedback.

The animation should continue beyond this frame to shrink, fade, and move the thumbs down icon back to the appropriate device’s Step 3 or Step 3a screen.

Screen Exit: n/a

Step 4: Animated Feedback, “Pinch” or “Zoom Out”

Test caption

Pinching is a command to zoom out from the song level to a station level.

This screenshot, intended as a keyframe for a feedback animation, here we see the Pinch symbol in white and expanded from its smaller gray version of itself after users pinch on the screen. The pinch arrows are also intended to animate, grow, brighten, and move towards the center. The gesture hinting has also momentarily been faded away to emphasize this pinch action’s feedback. Semantically, this will zoom out from the song to a view of users’ stations.

The animation should continue beyond this frame to shrink, fade, move back to its normal location for the appropriate device’s Step 3 or Step 3a screen.

Screen Exit: n/a

Step 5 (Optional): Changing Stations

03 Drive Mode - Station carousel

Pinching anywhere on the Driving Mode Now Playing screen zooms users out to the Station level (with attendant animation to communicate the conceptual movement up the hierarchy). Once here, users can scroll left and right by swiping in the same directions as in the song navigation (consistency).

A tap on the focused station will zoom into that station, going to a Now Playing screen—e.g., Step 3a (for GS5s, etc.): Progressive Enhancement—with a song playing.

Screen Exit: text

Interactive Prototype [Added 2/25/2015]

In the past few months, I found a bunch of different prototyping tools to potentially add to my toolbox (along with POP – Prototyping On Paper), each offering a slightly different set of features, with slightly different foci, strengths, and weaknesses, including InVision, Proto.io, Pixate, andKony Visualizer, And those are just the ones that I signed up to try for now.

I went back to this Pandora Driving Mode project to create an interactive prototype with each tool as a means to evaluate how they might meet my needs.

The one that allowed me to create my prototype first is Proto.io. Their free account that I used for evaluation only allows one project with limited screens. Understanding that the time it took to create this prototype included time spent learning the tool, doing thing inefficiently, and redoing things done more effectively, along with doing the same in various tools simultaneously, I probably spent an additional 15-24 hours with these new prototyping tools.

Having learned how to use Proto.io to my current level of expertise, however, I could probably replicate this prototype, given the existing Photoshop files, in one to two hours.

Of course, I iterated upon my design as I worked on the prototype, elaborating the design a little as I went. The primary change is the addition of the currently playing song shrinking into a pane available as shortcut on the Driving Mode if users scroll back in the song list to previous songs, offering a return to the currently playing song with a tap in that pane or a swipe up from that pane.

Along with some of the other tools, Proto.io offers a design tool that operates as a web app in your browser, along with a player app for both iOS and Android to allow designers, collaborators, and testers to interact with your design on actual devices, enabling prototyping to go another step closer to actual use.

For now, my Pandora Driving Mode project is available as an interactive demo at Proto.io’s Spaces.

Video Demos of the Interactive Prototypes [Added 2/25/2015]

To showcase the demo in action, I created two video demos, one without commentary, and another with commentary explaining the rationale for the redesign, essentially a presentation of the design, both embedded below.

I made these demos using high fidelity screen mockups previously made in PhotoShop, Proto.io’s player app (available for both Android and iOS) on my Android phone, and the AZ Screen Recorder app (Android).

Commentary free (45 seconds), “Driving Mode for Pandora, UX demo only“:

Driving Mode for Pandora, UX Demo w Commentary” (7 minutes 25 seconds), presenting the demo:

Carrying The Design Beyond The Smartphone

Because the core of the interactions in Driving Mode is gesture-based, and since those gestures can be done over most of the screen, these Driving Mode gestures, especially for Pandora’s core interactions (Thumbs Up, Thumbs Down, Previous Song, Next Song) should be ideal for almost direct transplantation to apps for smaller screened devices such as smartwatches.

Part of that adaptation, I would expect, would be removing the audio output selection section of the screen.

Comments are closed