UX Project 1: Rapid Prototyping

Have you ever driven before, and tried to change a track you were listening to on your phone? I’m sure everyone has at some point. Small buttons and text make it difficult to discern information on a screen that is designed to fit in our pocket. How can we solve this problem?


For my first UX project at General Assembly NY, I was given the task to design a media player. The project was meant to demonstrate some essential prototyping and mockup skills, which I feel are extremely important to any UX process. Some skills I’ve picked up as part of this project:

  1. Interviewing target users
  2. Affinity maps
  3. Lo-fi mock-ups
  4. Getting feedback
  5. Prototypes
  6. Usability tests
  7. Iteration
  8. Presenting

The topic I was given for this first project was media player, which could be a music app, video, or a combination of the two. My initial assumption with media player apps is that there are a variety of different apps i.e. Youtube, Spotify, etc. which means that there are several unique use cases, depending on location and activity.

Interviewing target users

To start, I prepared six questions to ask users on their app usage preferences for media player apps, both music and video. Some of the questions I came up with:

  • What is the most important feature for you in a media player?
  • What is your go-to app for 1) viewing videos, 2) listening to music, and 3) sharing music or videos? How often do you use these apps?
  • How do you typically use a media player app?

After interviewing my first two users, I decided to focus on music players, since both of them were frequent users of those types of apps. Most of the users I interviewed were relatively satisfied with the current music apps they used, such as Spotify and iTunes, but had specific use cases in mind that none of their apps addressed efficiently.

After gathering feedback from three different users, I put together an affinity map.

Affinity Map

I had quite a few behaviors recorded, as I noticed my users enjoyed talking about their individual usage scenarios when prompted to do so. Another thing worth noting is that many users had different ‘wishlist’ items depending on their most common individual usage scenarios.

After sorting, I ended up with these common themes:

Since ‘Adaptable UI’ had the most themes (and seemed the most intriguing to me) I decided to focus on it for my project.

After organizing all my interview notes, I realized that one of the common themes was that people wanted more fluid experiences in their music apps, with a focus on personalization and customization depending on their current listening activity.

Lo-Fi Mockup

For my initial mockup, I focused on building a personalization menu around exising music app UI’s.

Some feedback I got from my peers:

  • Cool, dynamic interface
  • I like the driving mode
  • Simplicity
  • Needs more continuity between screens
  • Constant UI changes could challenge user discoverability

Prototype #1

I kept most of the elements from the lo-fi mockup, and expanded upon the personalization options I played around with earlier to capture a specific use case: changing the icon for “car” mode to a tank.

Usability Tests

I came up with a persona named Bobby, a young working professional who drives for his daily commute. I had users do the “hug” method of recording their interaction with the app while vocalizing their experience. I got a lot of useful feedback using this method, most notably the fact that users were unsure of what to do once they reached the home screen from the login page.

Prototype #2

Based on the feedback, I opted to include a intro to the main feature set of the app, since many users were having a hard time understanding the purpose of the activity modes.

Presentation

For my presentation, a six-minute Pechakucha-style presentation gave me enough time to review all the design stages I went through, but kept me on my toes in terms of how deep I could dive into some of the justifications for my design choices. I think it went relatively well, and even incorporated a mock survey of the class to engage them and provide additional insight into just how useful an adaptable UI would be. Many of my peers also mentioned this in their reviews of my presentation. Some areas I need to work on are presentation skills, i.e. facing the audience, making eye contact, and using less text in my slides.

Next Steps

If I were to continue working on this app, the next stage would be to continue refining the concepts I started out with and exploring different button layouts to minimize confusion. After many, many more iterations, I would produce a high-definition mock-up to pass off to developers to build, test, and deploy to production.


Conclusion

I learned a lot from this whole process, and gained a lot of insight into the early stages of UX design i.e. sketching, interviewing, and prototyping. As a former product manager, I had a rough idea of these concepts but actually executing on them myself has allowed me to appreciate the structured process that UX designers have developed. I look forward to the next projects and eventually creating detailed, high-definition mockups.