Media Player

Introduction

Project Brief

I was involved with a startup that aimed to create a media player app designed for mobile. The app differentiated itself from other streaming services by focusing on messaging, sharing, and interactive live streaming. A major focus of the app was the ability for two or more people to create quick playlists from a single song selection.

Objective

As this was a startup, the people involved played a number of roles. A UX Designer was already involved, but also spent a significant amount of time on the business side. My role was to provide assistance to lighten the load. For this project, I was given a set of low fidelity mockups and tasked with creating high fidelity mockups. The goal was to generally stick to the proposed layout, but I was also invited to make slight changes where I thought there might the potential for improvement.

Responsibilities

  • Style Guide
  • UX Design
  • Visual Design
  • Prototyping

Tools

  • Sketch
  • InVision
  • Adobe XD

Available Assets

Colors

At the time of my involvement, there was no style guide or color palette available. I was given the freedom to create a color palette based of one primary color that the was available.

Low Fidelity Mockups

The team provided me with a set of low fidelity mockups that focused on the service’s messaging, sharing, and playlist capabilities. Below is a selection of some of the screens provided.

Design

Color Palette

I wanted to create an interface that mostly relied on shades of gray, allowing me to use color to promote hierarchy on the page. I used the provided primary color for the app toolbar, shades of gray for secondary interface elements, blue for primary actions, and green as a status indicator.

High Fidelity Mockups

I made a few departures from the lo-fi mockups, especially on the Message History screen, in order to add white space, decrease clutter, and use font weight and styles to differentiate between different types content like sender and message preview.

hi-fi media player contacts select

I created an interactive prototype using Adobe XD, which included a limited number of actions, like new message interactions and contact selection.

hi-fi media player playlist dropdown

Included in the prototype were drop down menu styles with a selection of user interactions that included options for music discovery, sharing, and instant mixes.

Reflection

This project was to serve as a concept to investors. I received positive feedback from the stakeholders, however, this was the last feature of the product I worked on, as that project did not materialize. Stakeholders were in the process of collecting user feedback to refine the UI/UX of the media player, but that user data did not become available to me. Future iterations of this project should involve more user data in order to learn which features are most important to users and how best to make users successful in carrying out their objectives.

This was one of the first native mobile apps that I worked on and as a result, I learned a lot about the importance of size and spacing on mobile devices. Taking into account finger size was an adjustment for me, but the knowledge I gained proved useful for future mobile projects.