Status:    Concept     Description   Lillipod lets the user assign playlists to customizable parts of a map.   Background   I'm a big fan of movies, and an even bigger fan of music. Movie soundtracks pick the perfect background music for each scene, and that got me thinking - what if I could hear the Beach Boys as I drive along the coast, or some Beastie Boys while I'm heading downtown?   Role   Designer and project lead in a team of 3   Design   Each color corresponds to a different playlist, and users can highlight areas as large or as small as desired. When the user is ready to begin listening, pressing the play button starts the music.   Challenges   The primary design challenge I faced was making interactions for map navigation and area coloring impossible to confuse. Early iterations allowed the user to toggle between coloring (with a traditional finger-painting method) and moving the map. This made it difficult to both color and move the map simultaneously, required two different sets of controls for drawing and navigation, and could result in frustration for the user as coloring the map precisely is difficult using just a finger.  I ultimately conceived the current system, which places a resizable circle at the center of the map. Controls at the bottom allow the user to fill or erase the contents of the circle, change the playlist's color, and undo the previous action.  By placing the selector over a region and using the fill tool, users can make precise adjustments without needing to worry about unintentionally highlighting unwanted regions, and users can move the map while holding the fill button down to draw on the map for as long as they desire.   Visual Language   The music note in the currently highlighted color selection lets the user know that tapping the icon will prompt playlist selection.  The circle selector features a grabbable tab on the side for adjusting size, consistent with the iOS grabber on the notification center. The fill and erase tools at the bottom also clearly correspond with the circle at the center.  The color changer is represented by three intersecting semitransparent circles, implying variance in color while using only white.       Main Interface V1 -  The toggle at the bottom left switched to the movement interface from the drawing interface, and was overly complex for what I was trying to create. In addition, this setup required a cluttered setup of buttons for brush size and erasing. I avoided using a traditional eraser in my iconography, and instead opted for a more direct digital representation of the action (the circle with the gradient line crossing through it). Unfortunately, this icon did not make its way into the final design, but I may use it in the future if necessary.
     Main Interface V2 -  Here, navigation can occur at any time by swiping and pinching around the map. Brush size is controlled by the grabber on the right side of the center circle. Buttons at the bottom left allow the user to fill and erase the contents of the circle. This setup allows for one mode of interaction that is not hindered by an ambiguity of whether touching the map will move it or draw on it.
MockupPlayV1.png
prev / next