top of page
IMG_2826.PNG
IMG_2828.PNG

DJ30-Record Screen, Music, & Voice

iOS • Wireframes • UX & UI • Animation • Prototyping 

DJ30 is an app that allows music lovers to create their own DJ mix. In order to help DJ30 stand out from other DJ apps, DJ30 introduces an ability to create visual mixes. 

Role

Project Overview

UI, UX Designer, Programmer
Time
Challenge
Seamlessly integrate a new feature to help expand DJ30's social capabilities and help users share visually with each other their DJ mix.
Solution
  • A record screen feature that allows user to create a visual DJ mix and share their creation on social media platforms.
4 weeks
Task
Design a new way to record music
Tools
Sketch, Xcode, Adobe XD

Research

To better understand what DJ30's background, competition, and target audience I began to research the top DJ apps on the AppStore. 

Research Goals

  1. Understand the pros and cons of all the DJ apps on the AppStore
  2. Identify the target market and why they are purchasing
  3. Read reviews of the competition both good and bad 
  4. Discover the needs of the user base in all these apps

Competitive Analysis

To understand what Im competing against I downloaded the top 2 rated DJ apps on the AppStore. I analyzed DJ30's top competitors to evaluate their strengths and weaknesses. This information helped me to understand what the trends are across all competitors, their unique differences, and why users might choose a particular service over another.
dj comparisosn.png

Provisional Persona

Now that I had a better understanding of the other DJ apps in the market space through research and competitive analysis, I wanted to start exploring and identifying who the target user might be. By creating a provisional persona, I was able to quickly figure out who that might be. With the other apps I realized their target audience was users that wanted to learn how to become a professional DJ or someone who was already a DJ and wanted to use the app in paid events. My app was for the social media crowd especially teenagers on instagram that made 30-60 second videos. 
persona.png

User Persona

Using what I learned from my research and what target audience I wanted to reach, I created a user persona that accurately represented who I am designing for. This persona helped guide my decisions along the design process to make sure the solution I am designing is centered on our user. Here I am focusing on the Gen-X population especially the 13-19 year old social media crowd that are on instagram. 

John 19 year old college student                                                      "Vibing, how about you"

College Friends

GOALS

NEEDS

  • Connect with people using my creativity
  • Sharing DJ skills with friends
  • Have fun without any experience
  • To be able to share music with friends
  • To be able to create a DJ mix without spending hours on it
  • To be able to pass time in a fun way 

MOTIVATION

FRUSTRATIONS

  • Connect with people through a new music sharing experience
  • Create videos that are visually appealing that includes music
  • Have fun without any experience
  • Not a profesional DJ
  • Wants a visual way to share music
  • Does not want to spend hours creating mix

User Flow

Now I wanted to take an even deeper look into the overall user’s journey while interacting with the record screen feature. I created a user flow to explore the scenarios the users would be in and the different paths and decisions they would encounter when trying to complete the key tasks defined.
user.png

Lofi Wireframe in Sketch

Using everything I learned throughout this phase, I then worked on creating lofi wireframes. Below is a step by step wireframe on what the user will encounter when entering DJ30 and how to navigate throughout the app.
Screen Shot 2022-05-05 at 6.23.51 PM.png

Hi Fi Wireframe

After creating the wireframes I went straight into creating my hi fi wireframes. From doing my research I knew that I wanted an arcade/game feel to my app. I didn't want users coming into this thinking its going to be a serious DJ app. For the colors I wanted something fun so I decided to go with a green and blue color set for each side of the turntables.
IMG_2827.PNG
IMG_2826.PNG

Usability Testing

Using the prototype and a rough build of the app I made on Xcode I was able to get some amazing feedback from friends and family members. 

Overview

Method: In Person
Participants: 5
Age: 15-27 years
Average Time: 3 minutes


 
Pain Points 

I identified common pain points encountered by users during testing leading to my discovery of key insights which helped me to identify design recommendations.

5/5 users had problems of not knowing if screen was recording
3/5 users showed some confusion if a button was pressed or not
3/5 had trouble adding songs to both turntables

Insights

People want the ability to use the front facing camera and show their face when recording
People wanted an animation when the sound effects button and fast/slow motion button was pressed
People expected to record their screen longer than 60 seconds

Recommendations

Add sound effect/animation when timer button is pressed
Have the ability to change the colors of the turntables
Add the ability to automatically stop the screen from recording when timer hits 0

Revisions

After getting the recommendations identified through testing, I started to make these revisions in the high fidelity wireframes. Added the ability to see how much time remaining when pressing record button. Now you can change colors using the theme picker. Finally automatically display record screen View Controller when timer hits 0. 
IMG_2828.PNG
:09
IMG_2829.PNG
IMG_2831.PNG

Final Product

After going through the research, competitive analysis, provisional personas, user persona, project goals, user flows, wireframes, and prototypes the final product looks like this. It took around ~2 months creating everything including the code but at the end I was extremely satisfied with the end result. 
750x750bb.jpeg
750x750bb (2).jpeg
IMG_4A2BD43A0C41-1.jpeg
750x750bb (1).jpeg
IMG_2830.PNG
IMG_2827.PNG

Reflection

As I reflect I can proudly say I enjoyed creating this app all the way from the ux, ui, code, and as a graphic designer. This has been my most downloaded, reviewed, and profitable app that I had in the AppStore. The reason for that is I spent a good amount of time carefully targeting my audience and made sure clearly what my app does and also doesn't do.

I had a pretty good first year in 2016 having had 27.2K total downloads. I did fall off after that because my app was built around the record screen function and by then every Apple device had that feature when Apple released their new software update. I tried to combat this by adding the ability to let users stream their screen live on youtube and periscope but it
didn't have the same effect like the record screen function had. In the end it was a good learning experience for me it was never about the downloads or how much money I made. I got to have some real world experience and get amazing feedback from the users. 
bottom of page