{"id":998,"date":"2014-10-30T14:57:28","date_gmt":"2014-10-30T21:57:28","guid":{"rendered":"http:\/\/edwinli.com\/ux-2020-09-28-archive-dev01\/?page_id=998"},"modified":"2022-01-24T18:48:23","modified_gmt":"2022-01-25T02:48:23","slug":"pandora-driving-mode","status":"publish","type":"page","link":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/","title":{"rendered":"Pandora Driving Mode"},"content":{"rendered":"<h1 class=\"hidden\">Pandora Driving Mode<\/h1>\n<div class=\"lateralLinks\"><a title=\"Pandora Driving Mode write-up, pdf\" href=\"http:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Exercise-Report-v0-1-redacted-Edwin-Li1.pdf\">Download the write-up [pdf, 10MB]<\/a>\u00a0| <a href=\"http:\/\/youtu.be\/99R-kpeko-I\">Video\u00a0demo\u00a0only<\/a>\u00a0| <a href=\"http:\/\/youtu.be\/LyH6Gl580OY\">Video\u00a0demo\u00a0with\u00a0commentary<\/a>\u00a0| <a href=\"https:\/\/spaces.proto.io\/project\/7C35BFF3-FCD0-BE98-A1B6-177C2C710E9E\/Pandora-Driving-Mode\/\">Interactive\u00a0Demo\u00a0on\u00a0Proto.io<\/a> <span class=\"hidden\">\u00a0| <a href=\"#\">Dummy\u00a0prototype\u00a0link<\/a><\/span><\/div>\n<div class=\"wp-caption\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" title=\"YouTube video player\" width=\"900\" height=\"507\" src=\"https:\/\/www.youtube.com\/embed\/99R-kpeko-I?version=3&#038;rel=0&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<p class=\"wp-caption-text iframe-caption-customcss\">Driving mode prototype in action, no commentary (45 seconds). Tools used: Photoshop, Proto.io, AZ Screen Recorder.<\/p>\n<\/div>\n<div id=\"update\"><span class=\"inlineFieldLabel\">Update 2\/25\/2015:<\/span> 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 <a href=\"#sectionInteractivePrototype\">Interactive Prototype section<\/a> below the storyboard section.<\/div>\n<h2>Overview<\/h2>\n<p>Taking as a premise that Pandora&#8217;s mobile app (Android) is &#8220;clumsy, out of date, and not very mobile-friendly&#8221;, I took a design challenge to redesign it or to add features at my discretion. I focused on the core experience of Pandora&#8217;s mobile app\u2014its Now Playing screen and its usage while on the go. Inspired by the Audible&#8217;s &#8220;Button-Free&#8221; mode, I created a &#8220;Driving Mode&#8221; for Pandora, focusing on gestures for core interactions and also 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.<\/p>\n<h2>The Design Exercise: &#8220;Redesign Pandora&#8221;<\/h2>\n<h3>Terms of The Exercise<\/h3>\n<h4>Issues With Pandora<\/h4>\n<ul>\n<li>Clunky<\/li>\n<li>Out of date<\/li>\n<li>Not mobile friendly<\/li>\n<li>Think about use cases of listening to music when you&#8217;re on the go (out running, in the car, on a bike, etc.)<\/li>\n<\/ul>\n<h4>Constraints<\/h4>\n<ul>\n<li>Use the Samsung Galaxy S5 as your target phone<\/li>\n<li>Exercise duration: 48 hours<\/li>\n<li>Do whatever you want to the app, including add features.<\/li>\n<\/ul>\n<h2>Current System(s) Summary Description and Evaluation<\/h2>\n<p>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.<\/p>\n<p>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.<\/p>\n<h2>Notes From Exploring Pandora\u2019s Android App<\/h2>\n<p>I explored the app both sitting at my desk and, later, while driving.<\/p>\n\n\t\t<style>\n\t\t\t#gallery-1 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-1 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div data-carousel-extra='{&quot;blog_id&quot;:22,&quot;permalink&quot;:&quot;https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/&quot;}' id='gallery-1' class='gallery galleryid-998 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/2014-10-09-12-32-05\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/2014-10-09-12.32.05.png?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-1-1017\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/2014-10-09-12.32.05.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/2014-10-09-12.32.05.png?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/2014-10-09-12.32.05.png?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"1017\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/2014-10-09-12-32-05\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/2014-10-09-12.32.05.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"2014-10-09 12.32.05\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;The home screen&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/2014-10-09-12.32.05.png?fit=576%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-1017'>\n\t\t\t\tThe home screen\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/00-01-current-now-playing-screen-unaltered\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-01-Current-Now-Playing-screen-unaltered.png?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-1-983\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-01-Current-Now-Playing-screen-unaltered.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-01-Current-Now-Playing-screen-unaltered.png?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-01-Current-Now-Playing-screen-unaltered.png?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"983\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/00-01-current-now-playing-screen-unaltered\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-01-Current-Now-Playing-screen-unaltered.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"00-01 Current Now Playing screen &amp;#8211; unaltered\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;The Now Playing screen&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-01-Current-Now-Playing-screen-unaltered.png?fit=576%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-983'>\n\t\t\t\tThe Now Playing screen\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/pandora-now-playing-menu-2014-10-09-13-00-36\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/pandora-now-playing-menu-2014-10-09-13.00.36.png?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-1-978\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/pandora-now-playing-menu-2014-10-09-13.00.36.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/pandora-now-playing-menu-2014-10-09-13.00.36.png?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/pandora-now-playing-menu-2014-10-09-13.00.36.png?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"978\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/pandora-now-playing-menu-2014-10-09-13-00-36\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/pandora-now-playing-menu-2014-10-09-13.00.36.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"pandora now playing menu 2014-10-09 13.00.36\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;The sliding sidebar menu available from the Now Playing screen. (Pandora&amp;#8217;s existing app 10\/2014)&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/pandora-now-playing-menu-2014-10-09-13.00.36.png?fit=576%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-978'>\n\t\t\t\tThe sliding sidebar menu available from the Now Playing screen. (Pandora&#8217;s existing app 10\/2014)\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/edwinli.com\/ux-2020-09-28-archive\/pandora-website-nature-station-info-10-11-2014-12-48-12-am\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Pandora-website-Nature-station-info-10-11-2014-12-48-12-AM.png?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-1-980\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Pandora-website-Nature-station-info-10-11-2014-12-48-12-AM.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Pandora-website-Nature-station-info-10-11-2014-12-48-12-AM.png?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Pandora-website-Nature-station-info-10-11-2014-12-48-12-AM.png?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"980\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/pandora-website-nature-station-info-10-11-2014-12-48-12-am\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Pandora-website-Nature-station-info-10-11-2014-12-48-12-AM.png?fit=665%2C580&amp;ssl=1\" data-orig-size=\"665,580\" data-comments-opened=\"1\" data-image-title=\"Pandora website Nature station info 10-11-2014 12-48-12 AM\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;From the website, captured for look, feel, and color palette to inform any new or redesigned elements to come.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Pandora-website-Nature-station-info-10-11-2014-12-48-12-AM.png?fit=665%2C580&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-980'>\n\t\t\t\tFrom the website, captured for look, feel, and color palette to inform any new or redesigned elements to come.\n\t\t\t\t<\/dd><\/dl>\n\t\t\t<br style='clear: both' \/>\n\t\t<\/div>\n\n<h4><a id=\"issuesNoted\" name=\"issuesNoted\"><\/a>Issues Noted<\/h4>\n<ul>\n<li>How do I change or choose what the output device is?\n<ul>\n<li>Not on the now playing screen, not on the Now Playing right sliding panel, not in the volume panel, \u2026<\/li>\n<li>Volume buttons of the GS 5 bring up the sliding volume panel, but not the standard volume pop-up.<\/li>\n<li>Bug: On my Bluetooth headset, no sound, despite being connected for media and phone audio.\n<ul>\n<li>No way to change it aside from:\n<ul>\n<li>Turning off the headset<\/li>\n<li>Turning off Bluetooth on the phone<\/li>\n<li>Probably disconnecting the headset via phone&#8217;s Bluetooth Settings<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Your current station does not show on the now playing screen.<\/li>\n<li>There is no way to change your current station from the now playing screen.<\/li>\n<li>Hierarchical screens with &#8220;back&#8221; navigation are good and clean conceptually, but a bit awkward and potentially wasteful on larger screens like the GS5&#8217;s.\n<ul>\n<li>It&#8217;d be nice to be able to view the &#8220;station&#8221; list without losing the context of the currently playing song.<\/li>\n<li>Maybe more could be presented via slide-in panels.<\/li>\n<li>Note: the use of a screen hierarchy works well with &#8220;back&#8221; navigation as seen in stock Android and Samsung&#8217;s Back button. This may argue against the use of a slide-in left panel, for instance, or something reminiscent of webOS 3.x&#8217; panels.<\/li>\n<\/ul>\n<\/li>\n<li>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:\n<ul>\n<li>The core interactions require hitting buttons\/icons that are limited in size: thumbs up, thumbs down, play\/pause, next.<\/li>\n<li>Secondary interactions also require those resources: scrubbing the song along the time slider (the targets are very small), changing &#8220;stations&#8221; requires going back (GS5&#8217;s back button or an on-screen button at the top left of the screen) and selecting from a list of text elements<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>Candidate Elements for Redesign<\/h4>\n<ul>\n<li>Driving Mode a la Audible app<\/li>\n<li>Offer a way to switch radio stations while on the Now Playing screen<\/li>\n<li>Add access to an audio output selector\n<ul>\n<li>Maybe a section on the contextual panel off the right of the now playing screen<\/li>\n<li>Maybe a menu off of an icon in the volume panel<\/li>\n<\/ul>\n<\/li>\n<li>For &#8220;background usage&#8221;:\n<ul>\n<li>Floating controls (Beat app on Android)<\/li>\n<li>Controls in Notification Panel (webOS, Android)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Redesign Target: A More Driving-Friendly Experience<\/h3>\n<div id=\"attachment_981\" style=\"width: 179px\" class=\"wp-caption alignright\"><a href=\"http:\/\/edwinli.com\/ux-2020-09-28-archive\/portfolio\/pandora-driving-mode\/audible-button-free-2014-10-09-17-20-48\/\" rel=\"attachment wp-att-981\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-981\" data-attachment-id=\"981\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/audible-button-free-2014-10-09-17-20-48\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/audible-button-free-2014-10-09-17.20.48.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"audible button-free 2014-10-09 17.20.48\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;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.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/audible-button-free-2014-10-09-17.20.48.png?fit=576%2C1024&amp;ssl=1\" class=\"size-medium wp-image-981\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/audible-button-free-2014-10-09-17.20.48.png?resize=169%2C300\" alt=\"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.\" width=\"169\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/audible-button-free-2014-10-09-17.20.48.png?resize=169%2C300&amp;ssl=1 169w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/audible-button-free-2014-10-09-17.20.48.png?resize=576%2C1024&amp;ssl=1 576w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/audible-button-free-2014-10-09-17.20.48.png?resize=624%2C1109&amp;ssl=1 624w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/audible-button-free-2014-10-09-17.20.48.png?resize=84%2C150&amp;ssl=1 84w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/audible-button-free-2014-10-09-17.20.48.png?w=1080&amp;ssl=1 1080w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a><p id=\"caption-attachment-981\" class=\"wp-caption-text\">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.<\/p><\/div>\n<p>Inspired by the Audible App, I decided that Pandora\u2019s app could benefit from having a mode dedicated to greater safety while driving, primarily requiring less precision and attention in interaction.<\/p>\n<h3>Process Steps Represented in This Document<\/h3>\n<p>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.<\/p>\n<ol>\n<li><span class=\"inlineFieldLabel\">User research and heuristic analysis.<\/span> 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. <span class=\"inlineFieldLabel\">Artifacts:<\/span>Notes included in <a href=\"#issuesNoted\">Issues Noted, above<\/a><\/li>\n<li><span class=\"inlineFieldLabel\">Market research.<\/span> 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.<\/li>\n<li><span class=\"inlineFieldLabel\">Design.<\/span> Where the rubber meets the road. <span class=\"inlineFieldLabel\">Artifacts:<\/span> Notes, sketches, Balsamiq mockups, Photoshop mockups, interactive prototypes, etc.<\/li>\n<\/ol>\n<h2>Artifacts Included in This Document<\/h2>\n<ul>\n<li>Typewritten notes<\/li>\n<li>Notes and initial design explorations from sketchbook<\/li>\n<li>High resolution images as prototypes, incorporated into a storyboard. The storyboard includes descriptions of available gestures, interaction, and transition animations.<\/li>\n<li>An interactive prototype, and video demonstrations thereof (added 2\/25\/2015)<\/li>\n<\/ul>\n<h2>Design<\/h2>\n<p><span class=\"inlineFieldLabel\">Artifacts for this section:<\/span> 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.<\/p>\n<h3>Design Considerations<\/h3>\n<ol>\n<li>Use bigger gestures over tapping icons and smaller targets\n<ol>\n<li>From Fitt&#8217;s Law<\/li>\n<li>Thumbs up, Thumbs down, pause, next<\/li>\n<\/ol>\n<\/li>\n<li>Minimize the precision necessary.\n<ol>\n<li>Fitt&#8217;s Law<\/li>\n<li>Driving safety<\/li>\n<\/ol>\n<\/li>\n<li>Minimize context\/screen switching for other &#8220;common&#8221; tasks\n<ol>\n<li>Enable changing of station from Now Playing screen<\/li>\n<li>Enable changing audio output device from Now Playing screen\n<ol>\n<li>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.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h3>Design Inspirations<\/h3>\n<ol>\n<li>&#8220;Driving Mode&#8221;: Audible App&#8217;s &#8220;Button-Free&#8221; mode<\/li>\n<li>Interactions\n<ol>\n<li>Zooming and pinch gestures: iOS, Pad++, Microsoft Surface (table-sized version)<\/li>\n<li>Swiping left and right to go through songs or stations: Photo gallery apps on iOS, webOS, Android, etc.<\/li>\n<li>Swiping up for Thumbs Up and swiping down for Thumbs Down: Tinder<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h3>Sketchbook First: Notes, Usage Scenario, and Design Sketches<\/h3>\n<p>Scans from my sketchbook.<\/p>\n\n\t\t<style>\n\t\t\t#gallery-2 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-2 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-2 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-2 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div data-carousel-extra='{&quot;blog_id&quot;:22,&quot;permalink&quot;:&quot;https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/&quot;}' id='gallery-2' class='gallery galleryid-998 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-01.jpg?ssl=1\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-01.jpg?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-01.jpg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-01.jpg?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-01.jpg?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"1013\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/samsung-design-challenge-2014-10-08-notes-and-sketches-01\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-01.jpg?fit=1740%2C2280&amp;ssl=1\" data-orig-size=\"1740,2280\" data-comments-opened=\"1\" data-image-title=\"Samsung Design Challenge 2014-10-08 Notes and sketches 01\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-01.jpg?fit=781%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-02.jpg?ssl=1\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-02.jpg?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-2-1014\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-02.jpg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-02.jpg?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-02.jpg?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"1014\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/samsung-design-challenge-2014-10-08-notes-and-sketches-02\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-02.jpg?fit=1716%2C2256&amp;ssl=1\" data-orig-size=\"1716,2256\" data-comments-opened=\"1\" data-image-title=\"Samsung Design Challenge 2014-10-08 Notes and sketches 02\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;A sketched storyboard for how a user might use Pandora&amp;#8217;s Driving Mode&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-02.jpg?fit=779%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-1014'>\n\t\t\t\tA sketched storyboard for how a user might use Pandora&#8217;s Driving Mode\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-03.jpg?ssl=1\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-03.jpg?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-2-1015\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-03.jpg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-03.jpg?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-03.jpg?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"1015\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/samsung-design-challenge-2014-10-08-notes-and-sketches-03\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-03.jpg?fit=1692%2C2196&amp;ssl=1\" data-orig-size=\"1692,2196\" data-comments-opened=\"1\" data-image-title=\"Samsung Design Challenge 2014-10-08 Notes and sketches 03\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;Sketches of the Pandora Driving Mode now playing screen. Here, I iterate from v0 to v0.1 on a single page. That&amp;#8217;s part of the power of sketching&amp;#8211;fast ideation.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-03.jpg?fit=789%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-1015'>\n\t\t\t\tSketches of the Pandora Driving Mode now playing screen. Here, I iterate from v0 to v0.1 on a single page. That&#8217;s part of the power of sketching&#8211;fast ideation.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-04.jpg?ssl=1\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-04.jpg?resize=150%2C150&amp;ssl=1\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-2-1012\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-04.jpg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-04.jpg?zoom=2&amp;resize=150%2C150 300w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-04.jpg?zoom=3&amp;resize=150%2C150 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" data-attachment-id=\"1012\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/samsung-design-challenge-2014-10-08-notes-and-sketches-04\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-04.jpg?fit=1644%2C2148&amp;ssl=1\" data-orig-size=\"1644,2148\" data-comments-opened=\"1\" data-image-title=\"Samsung Design Challenge 2014-10-08 Notes and sketches 04\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;Sketches elaborating on Pandora Driving Mode v0.1.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Samsung-Design-Challenge-2014-10-08-Notes-and-sketches-04.jpg?fit=784%2C1024&amp;ssl=1\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-1012'>\n\t\t\t\tSketches elaborating on Pandora Driving Mode v0.1.\n\t\t\t\t<\/dd><\/dl>\n\t\t\t<br style='clear: both' \/>\n\t\t<\/div>\n\n<h3><a id=\"sectionStoryboard\" name=\"sectionStoryboard\"><\/a>Storyboard with High Resolution Screens<\/h3>\n<p>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.<\/p>\n<div id=\"storyboard\" class=\"storyboard\">\n<div class=\"storyboardRow\">\n<h4>Step 1: Go to the Menu<\/h4>\n<div class=\"storyboardScreenshot\">\n<div id=\"attachment_983\" style=\"width: 179px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-01-Current-Now-Playing-screen-unaltered.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-983\" data-attachment-id=\"983\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/00-01-current-now-playing-screen-unaltered\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-01-Current-Now-Playing-screen-unaltered.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"00-01 Current Now Playing screen &amp;#8211; unaltered\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;The Now Playing screen&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-01-Current-Now-Playing-screen-unaltered.png?fit=576%2C1024&amp;ssl=1\" class=\"size-medium wp-image-983\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-01-Current-Now-Playing-screen-unaltered.png?resize=169%2C300\" alt=\"The Now Playing screen\" width=\"169\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-01-Current-Now-Playing-screen-unaltered.png?resize=169%2C300&amp;ssl=1 169w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-01-Current-Now-Playing-screen-unaltered.png?resize=576%2C1024&amp;ssl=1 576w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-01-Current-Now-Playing-screen-unaltered.png?resize=624%2C1109&amp;ssl=1 624w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-01-Current-Now-Playing-screen-unaltered.png?w=1080&amp;ssl=1 1080w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a><p id=\"caption-attachment-983\" class=\"wp-caption-text\">The Now Playing screen<\/p><\/div>\n<\/div>\n<div class=\"storyboardFrameDescription\">\n<p>Not yet driving, users will start from the normal mode Now Playing screen so that they can start Driving Mode before starting their drive.<\/p>\n<p>Mostly the same as the current Now Playing screen, I added a station title and selector at the top of the screen.<\/p>\n<p><span class=\"inlineFieldLabel\">Screen Exit:<\/span> To get to Driving Mode, users will need to tap the Menu button.<\/p>\n<\/div>\n<\/div>\n<div class=\"storyboardRow\">\n<h4>Step 2: Select a Listening Mode\u2014Driving<\/h4>\n<div class=\"storyboardScreenshot\"><a href=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-02-Right-panel-with-Listening-Modes-section.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"987\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/00-02-right-panel-with-listening-modes-section\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-02-Right-panel-with-Listening-Modes-section.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"00-02 Right panel with Listening Modes section\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;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&amp;#8217;s tools, this is a high-fidelity mockup.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-02-Right-panel-with-Listening-Modes-section.png?fit=576%2C1024&amp;ssl=1\" class=\"size-medium wp-image-987\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-02-Right-panel-with-Listening-Modes-section.png?resize=169%2C300\" alt=\"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.\" width=\"169\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-02-Right-panel-with-Listening-Modes-section.png?resize=169%2C300&amp;ssl=1 169w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-02-Right-panel-with-Listening-Modes-section.png?resize=576%2C1024&amp;ssl=1 576w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-02-Right-panel-with-Listening-Modes-section.png?resize=624%2C1109&amp;ssl=1 624w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/00-02-Right-panel-with-Listening-Modes-section.png?w=1080&amp;ssl=1 1080w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a><\/div>\n<div class=\"storyboardFrameDescription\">\n<p><span class=\"inlineFieldLabel\">Screen Exit: <\/span>Tap Driving Mode<\/p>\n<\/div>\n<\/div>\n<div class=\"storyboardRow\">\n<h4>Step 3: Driving Mode<\/h4>\n<div class=\"storyboardScreenshot\"><a href=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-01-Drive-Mode-Now-Playing-normal-paused-w-Back-button.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"988\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/01-01-drive-mode-now-playing-normal-paused-w-back-button\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-01-Drive-Mode-Now-Playing-normal-paused-w-Back-button.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"01-01 Drive Mode &amp;#8211; Now Playing &amp;#8211; normal, paused w Back button\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-01-Drive-Mode-Now-Playing-normal-paused-w-Back-button.png?fit=576%2C1024&amp;ssl=1\" class=\"alignleft size-medium wp-image-988\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-01-Drive-Mode-Now-Playing-normal-paused-w-Back-button.png?resize=169%2C300\" alt=\"01-01 Drive Mode - Now Playing - normal, paused w Back button\" width=\"169\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-01-Drive-Mode-Now-Playing-normal-paused-w-Back-button.png?resize=169%2C300&amp;ssl=1 169w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-01-Drive-Mode-Now-Playing-normal-paused-w-Back-button.png?resize=576%2C1024&amp;ssl=1 576w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-01-Drive-Mode-Now-Playing-normal-paused-w-Back-button.png?resize=624%2C1109&amp;ssl=1 624w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-01-Drive-Mode-Now-Playing-normal-paused-w-Back-button.png?w=1080&amp;ssl=1 1080w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a><\/div>\n<div class=\"storyboardFrameDescription\">\n<p>Features of Driving Mode:<\/p>\n<ul>\n<li>Full screen: No Status bar. Worth more consideration.<\/li>\n<li>Station name is included at the top of the screen-visual hierarchy reflecting a conceptual one here.<\/li>\n<li>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.<\/li>\n<li>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:\n<ul>\n<li>Swipe up: thumb up<\/li>\n<li>Swipe down: thumb down<\/li>\n<li>Swipe left: next song<\/li>\n<li>Swipe right: back to previous song.<\/li>\n<li>Pinch: zoom out to station list\/selector.<\/li>\n<li>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.<\/li>\n<li>Tapping on the station name at the top<\/li>\n<li>The hinting for the gestures doesn&#8217;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&#8217;s GS5 will have a more interesting option, described below.<\/li>\n<li>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.<\/li>\n<\/ul>\n<\/li>\n<li>The timeline scrub target is intentionally large to make it easier to hit when necessary.<\/li>\n<li>The audio selector is a scrolling carousel, also with intentionally large targets.<\/li>\n<\/ul>\n<h5>Exiting Driving Mode<\/h5>\n<p>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).<\/p>\n<p>A Back button at the top left will do the same thing.<\/p>\n<\/div>\n<\/div>\n<div class=\"storyboardRow\">\n<h4><a id=\"step3aGS5Hover\" name=\"step3aGS5Hover\"><\/a>Step 3a (for GS5s, etc.): Progressive Enhancement<\/h4>\n<div class=\"storyboardScreenshot\"><a href=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-03-Drive-Mode-Now-Playing-subtle-w-Back.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"990\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/01-03-drive-mode-now-playing-subtle-w-back\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-03-Drive-Mode-Now-Playing-subtle-w-Back.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"01-03 Drive Mode &amp;#8211; Now Playing &amp;#8211; subtle w Back\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-03-Drive-Mode-Now-Playing-subtle-w-Back.png?fit=576%2C1024&amp;ssl=1\" class=\"alignleft size-medium wp-image-990\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-03-Drive-Mode-Now-Playing-subtle-w-Back.png?resize=169%2C300\" alt=\"01-03 Drive Mode - Now Playing - subtle w Back\" width=\"169\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-03-Drive-Mode-Now-Playing-subtle-w-Back.png?resize=169%2C300&amp;ssl=1 169w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-03-Drive-Mode-Now-Playing-subtle-w-Back.png?resize=576%2C1024&amp;ssl=1 576w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-03-Drive-Mode-Now-Playing-subtle-w-Back.png?resize=624%2C1109&amp;ssl=1 624w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-03-Drive-Mode-Now-Playing-subtle-w-Back.png?w=1080&amp;ssl=1 1080w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a><\/div>\n<div class=\"storyboardFrameDescription\">\n<p>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.<\/p>\n<p>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.<\/p>\n<p><span class=\"inlineFieldLabel\">Screen Exit:<\/span> n\/a<\/p>\n<\/div>\n<\/div>\n<div class=\"storyboardRow\">\n<h4>Step 3b (for GS5s, etc.): Hovering Brightens The Hinting<\/h4>\n<div class=\"storyboardScreenshot\"><a href=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-02-Drive-Mode-Now-Playing-Galaxy-S5-hover-lightbox-w-Back-button-paused-v0-1-1.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"995\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/01-02-drive-mode-now-playing-galaxy-s5-hover-lightbox-w-back-button-paused-v0-1-1\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-02-Drive-Mode-Now-Playing-Galaxy-S5-hover-lightbox-w-Back-button-paused-v0-1-1.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"01-02 Drive Mode &amp;#8211; Now Playing &amp;#8211; Galaxy S5 hover lightbox w Back button paused v0-1-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-02-Drive-Mode-Now-Playing-Galaxy-S5-hover-lightbox-w-Back-button-paused-v0-1-1.png?fit=576%2C1024&amp;ssl=1\" class=\"alignleft size-medium wp-image-995\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-02-Drive-Mode-Now-Playing-Galaxy-S5-hover-lightbox-w-Back-button-paused-v0-1-1.png?resize=169%2C300\" alt=\"01-02 Drive Mode - Now Playing - Galaxy S5 hover lightbox w Back button paused v0-1-1\" width=\"169\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-02-Drive-Mode-Now-Playing-Galaxy-S5-hover-lightbox-w-Back-button-paused-v0-1-1.png?resize=169%2C300&amp;ssl=1 169w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-02-Drive-Mode-Now-Playing-Galaxy-S5-hover-lightbox-w-Back-button-paused-v0-1-1.png?resize=576%2C1024&amp;ssl=1 576w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-02-Drive-Mode-Now-Playing-Galaxy-S5-hover-lightbox-w-Back-button-paused-v0-1-1.png?resize=624%2C1109&amp;ssl=1 624w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/01-02-Drive-Mode-Now-Playing-Galaxy-S5-hover-lightbox-w-Back-button-paused-v0-1-1.png?w=1080&amp;ssl=1 1080w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a><\/div>\n<div class=\"storyboardFrameDescription\">\n<p>As the GS5 senses a finger\u2019s proximity, it can then make the gesture hinting brighter and more obvious.<\/p>\n<p>The option to remove the hinting could have a sub-option to also remove or potentially retain this hover-sensing enhancement.<\/p>\n<p><span class=\"inlineFieldLabel\">Screen Exit:<\/span> n\/a<\/p>\n<\/div>\n<\/div>\n<div class=\"storyboardRow\">\n<h4>Step 4: Animated Feedback, &#8220;Play&#8221;<\/h4>\n<div class=\"storyboardScreenshot\"><a href=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02c-Play-feedback-w-Back-Driving-Mode.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"993\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/02c-play-feedback-w-back-driving-mode\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02c-Play-feedback-w-Back-Driving-Mode.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"02c Play feedback w Back &amp;#8211; Driving Mode\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02c-Play-feedback-w-Back-Driving-Mode.png?fit=576%2C1024&amp;ssl=1\" class=\"alignleft size-medium wp-image-993\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02c-Play-feedback-w-Back-Driving-Mode.png?resize=169%2C300\" alt=\"02c Play feedback w Back - Driving Mode\" width=\"169\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02c-Play-feedback-w-Back-Driving-Mode.png?resize=169%2C300&amp;ssl=1 169w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02c-Play-feedback-w-Back-Driving-Mode.png?resize=576%2C1024&amp;ssl=1 576w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02c-Play-feedback-w-Back-Driving-Mode.png?resize=624%2C1109&amp;ssl=1 624w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02c-Play-feedback-w-Back-Driving-Mode.png?w=1080&amp;ssl=1 1080w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a><\/div>\n<div class=\"storyboardFrameDescription\">\n<p>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 \u201cplay\u201d action\u2019s feedback.<\/p>\n<p>The animation should continue beyond this frame to shrink and fade the play icon back to the appropriate device\u2019s Step 3 or Step 3a screen, but now with the Pause icon in the middle, as seen on the left below.<\/p>\n<p><span class=\"inlineFieldLabel\">Screen Exit:<\/span> n\/a<\/p>\n<\/div>\n<\/div>\n<div class=\"storyboardRow\">\n<h4>Step 4: Animated Feedback, &#8220;Pause&#8221;<\/h4>\n<div class=\"storyboardScreenshot\"><a href=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02d-Pause-feedback-w-Back-Driving-Mode.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"984\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/02d-pause-feedback-w-back-driving-mode\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02d-Pause-feedback-w-Back-Driving-Mode.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"02d Pause feedback w Back &amp;#8211; Driving Mode\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02d-Pause-feedback-w-Back-Driving-Mode.png?fit=576%2C1024&amp;ssl=1\" class=\"alignleft size-medium wp-image-984\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02d-Pause-feedback-w-Back-Driving-Mode.png?resize=169%2C300\" alt=\"02d Pause feedback w Back - Driving Mode\" width=\"169\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02d-Pause-feedback-w-Back-Driving-Mode.png?resize=169%2C300&amp;ssl=1 169w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02d-Pause-feedback-w-Back-Driving-Mode.png?resize=576%2C1024&amp;ssl=1 576w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02d-Pause-feedback-w-Back-Driving-Mode.png?resize=624%2C1109&amp;ssl=1 624w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02d-Pause-feedback-w-Back-Driving-Mode.png?w=1080&amp;ssl=1 1080w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a><\/div>\n<div class=\"storyboardFrameDescription\">\n<p>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 \u201cpause\u201d action\u2019s feedback.<\/p>\n<p>The animation should continue beyond this frame to shrink and fade the play icon back to the appropriate device\u2019s Step 3 or Step 3a screen.<\/p>\n<p><span class=\"inlineFieldLabel\">Screen Exit:<\/span> n\/a<\/p>\n<\/div>\n<\/div>\n<div class=\"storyboardRow\">\n<h4>Step 4: Animated Feedback, &#8220;Thumbs Up&#8221;<\/h4>\n<div class=\"storyboardScreenshot\"><a href=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02-Thumbs-up-feedback-w-Back-Driving-mode.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"991\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/02-thumbs-up-feedback-w-back-driving-mode\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02-Thumbs-up-feedback-w-Back-Driving-mode.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"02 Thumbs up feedback w Back &amp;#8211; Driving mode\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;Thumbs Up feedback following a swipe up in my Pandora Driving Mode design (v0.1). Created in Photoshop, both from screenshots and with Photoshop&amp;#8217;s tools, this is a high-fidelity mockup.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02-Thumbs-up-feedback-w-Back-Driving-mode.png?fit=576%2C1024&amp;ssl=1\" class=\"size-medium wp-image-991\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02-Thumbs-up-feedback-w-Back-Driving-mode.png?resize=169%2C300\" alt=\"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.\" width=\"169\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02-Thumbs-up-feedback-w-Back-Driving-mode.png?resize=169%2C300&amp;ssl=1 169w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02-Thumbs-up-feedback-w-Back-Driving-mode.png?resize=576%2C1024&amp;ssl=1 576w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02-Thumbs-up-feedback-w-Back-Driving-mode.png?resize=624%2C1109&amp;ssl=1 624w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02-Thumbs-up-feedback-w-Back-Driving-mode.png?w=1080&amp;ssl=1 1080w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a><\/div>\n<div class=\"storyboardFrameDescription\">\n<p>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 \u201cthumbs up\u201d action\u2019s feedback.<\/p>\n<p>The animation should continue beyond this frame to shrink, fade, and move the thumbs up icon back to the appropriate device\u2019s Step 3 or Step 3a screen.<\/p>\n<p><span class=\"inlineFieldLabel\">Screen Exit:<\/span> n\/a<\/p>\n<\/div>\n<\/div>\n<div class=\"storyboardRow\">\n<h4>Step 4: Animated Feedback, &#8220;Thumbs Down&#8221;<\/h4>\n<div class=\"storyboardScreenshot\"><a href=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02b-Thumbs-down-feedback-w-Back-Driving-Mode.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"992\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/02b-thumbs-down-feedback-w-back-driving-mode\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02b-Thumbs-down-feedback-w-Back-Driving-Mode.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"02b Thumbs down feedback w Back &amp;#8211; Driving Mode\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02b-Thumbs-down-feedback-w-Back-Driving-Mode.png?fit=576%2C1024&amp;ssl=1\" class=\"alignleft size-medium wp-image-992\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02b-Thumbs-down-feedback-w-Back-Driving-Mode.png?resize=169%2C300\" alt=\"02b Thumbs down feedback w Back - Driving Mode\" width=\"169\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02b-Thumbs-down-feedback-w-Back-Driving-Mode.png?resize=169%2C300&amp;ssl=1 169w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02b-Thumbs-down-feedback-w-Back-Driving-Mode.png?resize=576%2C1024&amp;ssl=1 576w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02b-Thumbs-down-feedback-w-Back-Driving-Mode.png?resize=624%2C1109&amp;ssl=1 624w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02b-Thumbs-down-feedback-w-Back-Driving-Mode.png?w=1080&amp;ssl=1 1080w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a><\/div>\n<div class=\"storyboardFrameDescription\">\n<p>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 \u201cthumbs down\u201d action\u2019s feedback.<\/p>\n<p>The animation should continue beyond this frame to shrink, fade, and move the thumbs down icon back to the appropriate device\u2019s Step 3 or Step 3a screen.<\/p>\n<p><span class=\"inlineFieldLabel\">Screen Exit:<\/span> n\/a<\/p>\n<\/div>\n<\/div>\n<div class=\"storyboardRow\">\n<h4>Step 4: Animated Feedback, &#8220;Next&#8221;<\/h4>\n<div class=\"storyboardScreenshot\"><a href=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02e-Next-feedback-w-Back-Driving-Mode.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"985\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/02e-next-feedback-w-back-driving-mode\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02e-Next-feedback-w-Back-Driving-Mode.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"02e Next feedback w Back &amp;#8211; Driving Mode\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02e-Next-feedback-w-Back-Driving-Mode.png?fit=576%2C1024&amp;ssl=1\" class=\"alignleft size-medium wp-image-985\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02e-Next-feedback-w-Back-Driving-Mode.png?resize=169%2C300\" alt=\"02e Next feedback w Back - Driving Mode\" width=\"169\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02e-Next-feedback-w-Back-Driving-Mode.png?resize=169%2C300&amp;ssl=1 169w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02e-Next-feedback-w-Back-Driving-Mode.png?resize=576%2C1024&amp;ssl=1 576w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02e-Next-feedback-w-Back-Driving-Mode.png?resize=624%2C1109&amp;ssl=1 624w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02e-Next-feedback-w-Back-Driving-Mode.png?w=1080&amp;ssl=1 1080w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a><\/div>\n<div class=\"storyboardFrameDescription\">\n<p>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 (\u201cNext\u201d) after users swipe left anywhere on the screen. The \u201cNext\u201d 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 \u201cNext\u201d action\u2019s feedback.<\/p>\n<p>The animation should continue beyond this frame to shrink, fade, and move the thumbs down icon back to the appropriate device\u2019s Step 3 or Step 3a screen.<\/p>\n<p><span class=\"inlineFieldLabel\">Screen Exit:<\/span> n\/a<\/p>\n<\/div>\n<\/div>\n<div class=\"storyboardRow\">\n<h4>Step 4: Animated Feedback, &#8220;Pinch&#8221; or &#8220;Zoom Out&#8221;<\/h4>\n<div class=\"storyboardScreenshot\"><a href=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02f-Pinch-feedback-w-Back.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1009\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/02f-pinch-feedback-w-back\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02f-Pinch-feedback-w-Back.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"02f Pinch feedback w Back\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02f-Pinch-feedback-w-Back.png?fit=576%2C1024&amp;ssl=1\" class=\"size-medium wp-image-1009\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02f-Pinch-feedback-w-Back.png?resize=169%2C300\" alt=\"Test caption\" width=\"169\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02f-Pinch-feedback-w-Back.png?resize=169%2C300&amp;ssl=1 169w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02f-Pinch-feedback-w-Back.png?resize=576%2C1024&amp;ssl=1 576w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02f-Pinch-feedback-w-Back.png?resize=624%2C1109&amp;ssl=1 624w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/02f-Pinch-feedback-w-Back.png?w=1080&amp;ssl=1 1080w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a><\/div>\n<div class=\"storyboardFrameDescription\">\n<p>Pinching is a command to zoom out from the song level to a station level.<\/p>\n<p>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\u2019s feedback. Semantically, this will zoom out from the song to a view of users\u2019 stations.<\/p>\n<p>The animation should continue beyond this frame to shrink, fade, move back to its normal location for the appropriate device\u2019s Step 3 or Step 3a screen.<\/p>\n<p><span class=\"inlineFieldLabel\">Screen Exit:<\/span> n\/a<\/p>\n<\/div>\n<\/div>\n<div class=\"storyboardRow\">\n<h4>Step 5 (Optional): Changing Stations<\/h4>\n<div class=\"storyboardScreenshot\"><a href=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/03-Drive-Mode-Station-carousel.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"986\" data-permalink=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/03-drive-mode-station-carousel\/\" data-orig-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/03-Drive-Mode-Station-carousel.png?fit=1080%2C1920&amp;ssl=1\" data-orig-size=\"1080,1920\" data-comments-opened=\"1\" data-image-title=\"03 Drive Mode &amp;#8211; Station carousel\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/03-Drive-Mode-Station-carousel.png?fit=576%2C1024&amp;ssl=1\" class=\"alignleft size-medium wp-image-986\" src=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/03-Drive-Mode-Station-carousel.png?resize=169%2C300\" alt=\"03 Drive Mode - Station carousel\" width=\"169\" height=\"300\" srcset=\"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/03-Drive-Mode-Station-carousel.png?resize=169%2C300&amp;ssl=1 169w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/03-Drive-Mode-Station-carousel.png?resize=576%2C1024&amp;ssl=1 576w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/03-Drive-Mode-Station-carousel.png?resize=624%2C1109&amp;ssl=1 624w, https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/03-Drive-Mode-Station-carousel.png?w=1080&amp;ssl=1 1080w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a><\/div>\n<div class=\"storyboardFrameDescription\">\n<p>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).<\/p>\n<p>A tap on the focused station will zoom into that station, going to a Now Playing screen\u2014e.g., Step 3a (for GS5s, etc.): Progressive Enhancement\u2014with a song playing.<\/p>\n<p><span class=\"inlineFieldLabel\">Screen Exit:<\/span> text<\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3 id=\"sectionInteractivePrototype\">Interactive Prototype [Added 2\/25\/2015]<\/h3>\n<p>In the past few months, I found a bunch of different prototyping tools to potentially add to my toolbox (along with <a href=\"https:\/\/popapp.in\/\">POP &#8211; Prototyping On Paper<\/a>), each offering a slightly different set of features, with slightly different foci, strengths, and weaknesses, including <a href=\"http:\/\/www.invisionapp.com\/\">InVision<\/a>, <a href=\"https:\/\/proto.io\/\">Proto.io<\/a>, <a href=\"http:\/\/www.pixate.com\/\">Pixate<\/a>, and<a href=\"http:\/\/www.kony.com\/products\/visualization#overview\">Kony Visualizer<\/a>, And those are just the ones that I signed up to try for now.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>For now, my <a href=\"https:\/\/spaces.proto.io\/project\/7C35BFF3-FCD0-BE98-A1B6-177C2C710E9E\/Pandora-Driving-Mode\/\">Pandora Driving Mode project<\/a> is available as an interactive demo at Proto.io&#8217;s Spaces.<\/p>\n<h4>Video Demos of the Interactive Prototypes [Added 2\/25\/2015]<\/h4>\n<p>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.<\/p>\n<p>I made these demos using high fidelity screen mockups previously made in PhotoShop, Proto.io&#8217;s player app (available for both <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=io.proto.player\">Android<\/a> and <a href=\"https:\/\/itunes.apple.com\/app\/proto.io-player\/id854504039\">iOS<\/a>) on my Android phone, and the AZ Screen Recorder app (<a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.hecorat.screenrecorder.free\">Android<\/a>).<\/p>\n<p>Commentary free (45 seconds), &#8220;<a href=\"http:\/\/youtu.be\/99R-kpeko-I\">Driving Mode for Pandora, UX demo only<\/a>&#8220;:<br \/>\n<iframe loading=\"lazy\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/99R-kpeko-I?rel=0\" width=\"640\" height=\"480\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>&#8220;<a href=\"http:\/\/youtu.be\/LyH6Gl580OY\">Driving Mode for Pandora, UX Demo w Commentary<\/a>&#8221; (7 minutes 25 seconds), presenting the demo:<br \/>\n<iframe loading=\"lazy\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/LyH6Gl580OY?rel=0\" width=\"640\" height=\"480\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3>Carrying The Design Beyond The Smartphone<\/h3>\n<p>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\u2019s 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.<\/p>\n<p>Part of that adaptation, I would expect, would be removing the audio output selection section of the screen.<\/p>\n<nav>\n<h2>More About Edwin<\/h2>\n<ul class=\"navInternal\">\n<li><a title=\"About Edwin\" href=\"\/ux\/about\/\">About Edwin<\/a><\/li>\n<li><a title=\"Resume\" href=\"\/ux\/resume\/\">Resume<\/a><\/li>\n<li><a title=\"Portfolio\" href=\"\/ux\/temp-portfolio\/\">Portfolio<\/a>\n<ul>\n<li><a title=\"Design Processes, Work artifacts, and Work Style\" href=\"\/ux\/temp-portfolio\/process\/\">Design Processes, Work artifacts, and Work Style<\/a><\/li>\n<li><a title=\"Redbeacon Design Challenge\" href=\"\/ux\/temp-portfolio\/redbeacon-design-challenge\/\">Redbeacon Design Challenge<\/a>\n<ul>\n<li><a title=\"Essential Use Cases [Redbeacon]\" href=\"\/ux\/temp-portfolio\/redbeacon-design-challenge\/essential-use-cases-redbeacon\/\">Essential Use Cases [Redbeacon]<\/a><\/li>\n<\/ul>\n<\/li>\n<li><span class=\"here\">Pandora Driving Mode<\/span><\/li>\n<\/ul>\n<\/li>\n<li><a title=\"Job Quest\" href=\"\/ux\/quest\/\">Job Quest<\/a>\n<ul>\n<li><a title=\"Ideal Job Description\" href=\"\/ux\/quest\/ideal\/\">Ideal Job Description<\/a>: What I am looking for in a company, role, and work environment, presented as a job description. Are you what I&#8217;m looking for?<\/li>\n<\/ul>\n<\/li>\n<li><a title=\"LinkedIn profile\" href=\"http:\/\/www.linkedin.com\/in\/edwinli\">LinkedIn profile<\/a><\/li>\n<\/ul>\n<\/nav>\n","protected":false},"excerpt":{"rendered":"<p>Pandora Driving Mode Download the write-up [pdf, 10MB]\u00a0| Video\u00a0demo\u00a0only\u00a0| Video\u00a0demo\u00a0with\u00a0commentary\u00a0| Interactive\u00a0Demo\u00a0on\u00a0Proto.io \u00a0| Dummy\u00a0prototype\u00a0link 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\u2026<\/p>\n<p> <a class=\"continue-reading-link\" href=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/\"><span>Continue reading<\/span><i class=\"crycon-right-dir\"><\/i><\/a> <\/p>\n","protected":false},"author":1,"featured_media":999,"parent":231,"menu_order":1,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-998","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Pandora Driving Mode - Edwin Li, UX Designer - Archived<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pandora Driving Mode - Edwin Li, UX Designer - Archived\" \/>\n<meta property=\"og:description\" content=\"Pandora Driving Mode Download the write-up [pdf, 10MB]\u00a0| Video\u00a0demo\u00a0only\u00a0| Video\u00a0demo\u00a0with\u00a0commentary\u00a0| Interactive\u00a0Demo\u00a0on\u00a0Proto.io \u00a0| Dummy\u00a0prototype\u00a0link 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\u2026 Continue reading\" \/>\n<meta property=\"og:url\" content=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/\" \/>\n<meta property=\"og:site_name\" content=\"Edwin Li, UX Designer - Archived\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-25T02:48:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Pandora-Driving-before-after-v0-1-1-1024x1024.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/temp-portfolio\\\/pandora-driving-mode\\\/\",\"url\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/temp-portfolio\\\/pandora-driving-mode\\\/\",\"name\":\"Pandora Driving Mode - Edwin Li, UX Designer - Archived\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/temp-portfolio\\\/pandora-driving-mode\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/temp-portfolio\\\/pandora-driving-mode\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2014\\\/10\\\/Pandora-Driving-before-after-v0-1-1.png?fit=2337%2C2337&ssl=1\",\"datePublished\":\"2014-10-30T21:57:28+00:00\",\"dateModified\":\"2022-01-25T02:48:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/temp-portfolio\\\/pandora-driving-mode\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/temp-portfolio\\\/pandora-driving-mode\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/temp-portfolio\\\/pandora-driving-mode\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2014\\\/10\\\/Pandora-Driving-before-after-v0-1-1.png?fit=2337%2C2337&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/wp-content\\\/uploads\\\/sites\\\/22\\\/2014\\\/10\\\/Pandora-Driving-before-after-v0-1-1.png?fit=2337%2C2337&ssl=1\",\"width\":2337,\"height\":2337},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/temp-portfolio\\\/pandora-driving-mode\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Portfolio\",\"item\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/temp-portfolio\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Pandora Driving Mode\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/#website\",\"url\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/\",\"name\":\"Edwin Li, UX Designer - Archived\",\"description\":\"Seeing the world through UX-colored glasses\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/edwinli.com\\\/ux-2020-09-28-archive\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pandora Driving Mode - Edwin Li, UX Designer - Archived","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/","og_locale":"en_US","og_type":"article","og_title":"Pandora Driving Mode - Edwin Li, UX Designer - Archived","og_description":"Pandora Driving Mode Download the write-up [pdf, 10MB]\u00a0| Video\u00a0demo\u00a0only\u00a0| Video\u00a0demo\u00a0with\u00a0commentary\u00a0| Interactive\u00a0Demo\u00a0on\u00a0Proto.io \u00a0| Dummy\u00a0prototype\u00a0link 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\u2026 Continue reading","og_url":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/","og_site_name":"Edwin Li, UX Designer - Archived","article_modified_time":"2022-01-25T02:48:23+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Pandora-Driving-before-after-v0-1-1-1024x1024.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/","url":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/","name":"Pandora Driving Mode - Edwin Li, UX Designer - Archived","isPartOf":{"@id":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/#website"},"primaryImageOfPage":{"@id":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/#primaryimage"},"image":{"@id":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Pandora-Driving-before-after-v0-1-1.png?fit=2337%2C2337&ssl=1","datePublished":"2014-10-30T21:57:28+00:00","dateModified":"2022-01-25T02:48:23+00:00","breadcrumb":{"@id":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/#primaryimage","url":"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Pandora-Driving-before-after-v0-1-1.png?fit=2337%2C2337&ssl=1","contentUrl":"https:\/\/i0.wp.com\/edwinli.com\/ux-2020-09-28-archive\/wp-content\/uploads\/sites\/22\/2014\/10\/Pandora-Driving-before-after-v0-1-1.png?fit=2337%2C2337&ssl=1","width":2337,"height":2337},{"@type":"BreadcrumbList","@id":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/pandora-driving-mode\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/"},{"@type":"ListItem","position":2,"name":"Portfolio","item":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/temp-portfolio\/"},{"@type":"ListItem","position":3,"name":"Pandora Driving Mode"}]},{"@type":"WebSite","@id":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/#website","url":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/","name":"Edwin Li, UX Designer - Archived","description":"Seeing the world through UX-colored glasses","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"jetpack_shortlink":"https:\/\/wp.me\/PcpW5x-g6","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/pages\/998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/comments?post=998"}],"version-history":[{"count":5,"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/pages\/998\/revisions"}],"predecessor-version":[{"id":1449,"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/pages\/998\/revisions\/1449"}],"up":[{"embeddable":true,"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/pages\/231"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/media\/999"}],"wp:attachment":[{"href":"https:\/\/edwinli.com\/ux-2020-09-28-archive\/wp-json\/wp\/v2\/media?parent=998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}