DJ Directory Mobile App

Overview

The DJ Directory is a mobile app for the organizers of the events, parties, and club owners. They want to hire a DJ for their event/club/party based on music style, proximity, price, rating and popularity.

DJ Directory is intended to help organizers to find the best DJ for their event.

DJ directory is created as a mobile app only because users are busy people that don’t have time to surf and search the DJs online. This will help them to have all the information in one place.

The UX design part of the project was completed in 8 weeks. There were only 2 of us on this team: developer and designer. The work wasn’t linear, but iterative.

‍

Problem Statement

Oftentimes, club owners, event or party planners have a hard time finding the right DJ for their club/party/event.

The information is scattered all over the internet, and often incomplete. The idea is to create a directory of DJs in ONE place so users can easily browse and contact the right DJ for their event. It will also help him to get more gigs and another advantage is that he can monetize the other DJs directory listing presence.

Client was also a DJ and he saw those things as a pain point in his business and wanted to solve this problem. Even though DJ will have to pay the fee for the directory listing entry, it will be an investment for them to get more exposure, and more gigs for themselves as well.

This is the first launch of the project.

‍

Users & Audience​

The app is intended mostly for:

1. the club owners,
2. party/events organizers,
3. private parties
4. birthdays or other ceremonies

It is all USA only based. They are very busy people, business owners, and they need to find the right DJ easily without any problem.

‍

Roles & Responsibilities​

The client hired me as a UI/UX designer and one other frontend developer as remote freelancers, for his app project. He presented his problem and what he wanted to solve with this app.

My role was the entire UX design process, because I was the only UI/UX designer on board. I had to wear different UX hats, which was interesting. Although this project was small, I have gone through each step of the process.

I’ve been using a plain whiteboard for wireframes [add wireframe] and Adobe XD for high fidelity mockups. I used collaboration tool Zeplin to share the screens with the developers.

‍

Scope & Constraints

We had a flexible timeline, but within reason. No need to rush, but to be thorough. The deadline for the design part was 4 weeks, which I delivered before the deadline. It was a part time engagement.

We’ve agreed upon a budget per project and we stick to that. No new features have been added in the later stage. Because the planning part was done properly.

‍

Process & What I Did​

My role was to do the plan, research, create personas, create wireframes, prototypes, define user stories, create reusable components, design the UI based on approved wireframes, UI’s final approval by client, share the mockups with explanation with the developer, designers review of the implementation.

‍

The flow:

1. Plan: We met with the client and he explained what he wanted to achieve with this app. We have outlined the features and how they would work together. Also plan the timeframe of each of the steps.

‍

2. Emphatize: The research was done by the client, because he is a DJ himself and he is very familiar with the pain points and the issues that his clients have. I used a user-centered approach here and we started to define the problem.
3. Define: I think that my client summarized it pretty nicely:“My clients need to find an easy way to see all the DJs in a directory, so they can choose them based on the music type, proximity, popularity, etc.”
4. Ideate: I’ve created personas based on the description. Start to think about how to solve the problem in the best way. Check the competitor’s apps to familiarize myself with the tone and the layout of the similar apps. I started with the rough sketches of the flow, and how it can be all interconnected. I draw a wireframe on the whiteboard. And shared it with the client.
5. Prototype: After the client approved it, I started with the Low-Res prototype in Adobe XD. I’ve added the interactions and connected the screens.

‍

6. Test: When the prototype was done I sent it to a client to test it. After a few iterations it was ready to design high fidelity mockups.
7. Final designs are done and exported to Zeplin so the developer can get the assets and the CSS of the mockups.
8. Colors
   We have 3 color modes that can be set up in settings screen:
   • Light (Black/Purple)
   • Dark (Light Grey/Blue)
   • Auto (changes with day light)

‍

9. Fonts – I’ve been using Product Sans for the Headlines 1-6 and Roboto for the rest of the elements.The Material Design type scale includes a range of contrasting styles that support the needs of your product and its content.
10. Sizing – All components align to an 8dp square baseline grid for mobile, tablet, and desktop.
    You can check out the design on the left to see the paddings, margins and sizes of the certain elements

‍

11. Design review – After the development phase is done, I’ve done another round of design review. After a few iterations, the app is published.

‍

Takeaways

The project is completed. It will go on AppStore and Google Play. There will be mobile versions for Android and iOS. The lesson I’ve learned here is how to build an app from scratch all by myself, going through all of the phases of the UX design process. Also, I’ve learned how to collaborate with engineers and how to make the process smooth. We used the Zeplin app to share the designs that will show CSS (colors, fonts, components…).

The client’s feedback and instructions were very helpful.

‍