home

pktMusic

Music in your pocket
My Role: Sole UX Designer / Type: Personal Project

pktMusic is a minimal iOS music player application concept designed to be controlled from pockets or purses. With gesture-based control, the users will not need to pull the device out of the pocket every time just to skip a song or pause the music. Unlike other music gesture apps, pktMusic require no visual attention to perform the basic control task (next, previous, rewind, fast forward, play, pause), while still featuring the traditional menu mode.

pkt Promo

How It Works

pktMusic combines both the traditional mobile touchscreen music player with gesture controls. The user can switch between mode by dragging the mode bar to the top or bottom of the screen. The gesture mode is designed to be used without user looking at the screen, so it can be used in a jean’s pocket or while driving.

gestures mode changing

About

pktMusic is an individual project of an interaction design class at the University of Michigan. Every student is required to build a novel product from scratch using various UX tools and techniques. The final deliverable of the project is an medium-fidelity prototype.

The Process

1. The Problem

It’s not an uncommon behavior for music listeners to put the player in random mode but keep skipping the songs until they find the one they like. With most mobile music app, the user is required to look at the screen in order to perform such task, or using the remote control that built into some headphones.

However, as all audiophiles know, most of the high-end headphones do not feature remote control, so they need to shift their attention to the screen every time they want to perform a simple music control. This proves annoying for any pedestrians, and can be very dangerous for drivers who use their phones as music source.

2. Generating Ideas

I hosted a brainstorm session with 3 other classmates to exchange opinions about the possible solutions to the problem. With the information from the session, I’ve created a concept map and 40 different sketches of different solutions and features of my problem.

concept map concept map

3. Wireframes

I created the wireframes from the best ideas in my sketches.

wireframes

4. Paper Prototype and Testing

I create a paper prototype based on the wireframes, and host 4 sessions of usability testing.

paper prototype

5. Mockups and Prototype

I refined the design based on the insights from the usability testing with paper prototypes, then created the mockup designs of the product. I also built an interactive prototypes using the mockup with Adobe Flash.

mockups