Skip to main content
Branding/IdentityUIUX

Reel Mixtape App

By November 5th, 2015108 Comments

reel_mockup_small

My Role

User Research
User Personas
Wireframes
Interface Design
Prototyping
User Testing
Branding

Overview: Users feel nostalgic for the times when they could create a mixtape using a cassette or a cd and give it to the friends or the loved ones.

Problem: There currently aren’t mixtape apps that allow to share the playlists phone to phone, user to user that are mindful of Digital Rights Management.

Solution: A mobile app called Reel. It allows customers to make curated playlists of songs and music they would like to share with friends using Facebook. Reel partners with Google Play for it’s music storage and cataloguing capability. Users can search for music globally (Google Play) or locally (existing Mixtapes within the Reel app). Reel is mindful of DRM. The user will pay for share of a mixtape with a set number of songs.

Research

I started my research with learning about who my users are and what are if any competitors exist in the market place. According to my findings one of the most successful mixtape apps is My Mixtapez Music & Mixtapes. However, what I have discovered is while it does allow user to share music statuses with their friends via social networks, it doesn’t allow for sharing of an actual mixtape and ultimately doesn’t address the problem at hand.

I created a survey and learnt that one of the most desirable features for my target users was the ability to share the created mixtapes with friends and family on Facebook. This particular social network already has the existing apps as well as the existing shopping platform. Both would allow for Reel to integrate with ease.

User Personas

Based on my survey results I have created my user personas.

user_personas_reel-small

App Structure

After analyzing my research I decided to develope the App Structure. Not all of the screens and features got built out, but I felt like the structure would help organize the information and task flows.

App-structure-small

Paper Prototyping

Then I started paper prototyping. I was trying to figure out which would be the most intuitive screen features and how they would get displayed.

paper_prototype_pretty_small

Task Flows

Based on my user research and my user personas, I’ve created the task flows first using the pen and pencil method then I had drawn it out in Sketch.

Reel-task-flow_small

Wireframes

Based on the paper prototyping session, I created wireframes using Sketch, also, I created UX Pin prototype and started the initial user testing. I recorded the user feedback, made adjustments, and did another round of user testing of the prototype.

REEL_WIREFRAMES-small

Screen Designs

After two rounds of user testing and all of the adjustments, I was ready to create the skins for the app. I chose gradients and flat design for the visuals to appeal to my target users and referred to Google Material Design Guidelines. I wanted the app to look attractive but simple, so the design wouldn’t take away from the task at hand.

reel_screens-01-small

 

Phone App Prototype Video

To better illustrate the functionality of the app I created a prototype interaction video.

 

108 Comments

Leave a Reply