app design

Dubplate

A music app to find and hire your next DJs, tune in to their live performance, create playlists and events, and stay updated on your favorite DJs.

Role
‍UI Designer

Tools
‍Adobe XD

Timeline
‍3 weeks

Text and image placeholders were used in Dubplate's mockups and preview. Some project details were omitted on request.

Role
‍IA
User flow
Wireframing
Mockups
UI design

Tools
‍Adobe XD

Timeline
‍3 weeks

Summary

Scope & Design Requirements

Scope

Create high-fidelity mockups for key screens that illustrate the app's core offering, with a focus on layout, structure, hierarchy and visual appeal.

Design Requirements

Color palette
Dark mode UI
Font

Objectives & Constraints

Objectives

Visualize the concept for easier communication on design details.
Have a user-friendly interface.

Constraints

Time

Deliverables & Outcome

Deliverables

Sitemap
Wireframes
Wireflows
Mockups

Outcome

The high-fidelity mockups solidified the layout, as well as the look and feel of Dubplate that our target users were happy with. It also allowed my client to better communicate to his developer in order to accurately build the Dubplate MVP.

See final mockups

Get the best beats.

Design Requirements

color scheme

01

pantone 7578 c
#e16b33

02
‍
white
#ffffff

03

black
#000000

The use of the brand's orange color (#E16B33) for CTAs, titles, navigation icons, and other important elements; white for secondary elements; and black for body text.

typography

The use of brand font, Skia, as the principal font to match with the initial brand logo.

Features

Browse DJs by different categories
Sort and filter DJs
Book a DJ
Search for an event, DJ or another user
Livestream a DJ set
Curate playlists

Browse upcoming performances
Communicate with hired DJ
Play DJ music
Keep track of and stay updated on favorite DJs
Invite other users to a booked event

Target Users

According to my client, the majority of the target users was expected to be millennials.

Given the limited timeframe, I was not able to do a deep research to confirm this.

So I looked into Dubplate's expected competitors to find out who the majority of their users were, as a basic confirmation that millennials will most likely be Dubplate's target users as well.

Sitemap

Since there was no existing design, I organized and grouped the expected content to create a sitemap and to provide structure for the app. I also created user flow diagrams to plan logical flows for users.

Sitemap and user flow diagrams were updated as my design evolved.

See in full

Sitemap for Dubplate

Low-Fi Wireframes

After getting client approval for the initial sitemap and user flow diagrams, it was time for wireframing.

With limited time, I considered designing high-fidelity mockups straight away. But I felt that it was more important to quickly visualize the app idea and to get a better sense of my client's preference on the core layout and functionality to ensure my design was heading in the right direction.

Using low-fidelity wireframes as a checkpoint also allowed me to test out the Skia font, which my client was keen on using and which I thought exuded a Greek vibe and therefore ill-fitted for the modern aesthetic that my client had in mind for Dubplate.

Examples of low-fidelity wireframes for Dubplate

User Testing & Feedback

The scope of this project did not include user testing, but I knew doing some testing would bolster the effectiveness of my wireframes. Fortunately, my client agreed and provided users to test out the wireframes on user flow, usability, navigation architecture, and to identify pain points, dead ends, or items that needed to be re-evaluated.

Here are some of the users' responses to the low-fidelity wireframes:

I often find it very challenging to communicate directly with the DJ when party planning. It would be great if there's a way to communicate with the DJ within the app and request specific tracks.

I like that the app makes it easy to create an event and book a DJ. But how do I let other users know about it?"

I would like to be able to search, sort and filter in the app to narrow down what I need to look for.

Based on user feedback, I adjusted the wireframes and created some wireflows.

font change

New Typography

The low-fidelity wireframes proved to my client that Skia was not quite the right font for this project.
‍
As my design progressed from low-fi wireframes to mockups, I chose a new typography that my client was satisfied with:

Circular

A simple, modern, geometric san-serif font

Display

Circular - bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Headings

Circular - bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Body copy

Circular - book
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Circular

A simple, modern, geometric san-serif font

Display

Circular - bold
ABCDEFGHIJKLMNOQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Headings

Circular - bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Body copy

Circular - book
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Wireflows

To ensure there were no missing scenarios pertaining to the app's offerings, I also created wireflows. The layout of the app was organized to show the placement of elements and features, and to show the intuitive flow of the interface.

Wireflows also served as a useful artifact for me to visually communicate the interface and flow in the most effective way to my client, so he could better understand what and why a particular screen was a key screen to be designed.

Wireflows were updated as my design evolved.

See in full

Wireflows for Dubplate

Mockups

My wireframes eventually iterated towards high-fidelity mockups. Here is a selection of them.

Lessons

While this was a short project, there were a few things I learned.

Establish clear channels of communication.

Working remotely in different time zones can be challenging. My client and I had different working hours, the meetings were time-bound, making it difficult to brainstorm and discuss every issue or answer every question.

What we agreed on from the get-go that worked really well was establishing clear channels of communication. Comments that could be pointed out directly from the design were done within Adobe XD’s commenting platform. This kept design feedback and reviews centralized and streamlined. For issues that required long elaboration, we used email. And for the regular check-ins and brief updates, we used Slack.

Just dive in and start.

Sometimes, it’s difficult to know where to start, where you’re immersed in the documents and information you are provided with. The best way to move past (or forward from) this is to just...start. Start working on it, however and whatever step that may be. Eventually, the pieces will start connecting and the idea taking its shape.

Detach to explore other ideas and to boost productivity.

This is something I regularly reminded myself throughout the project: Do not get too attached to the project, leave room for other ideas or thoughts. Detaching from a certain idea allow other ideas to be explored. It is equally true for work as well. Taking a break from work allow for greater productivity and the mind to re-energize.

Get the details.

Read how I transformed Dubplate from concept to high-fidelity mockups.

See the full process

Check out other projects.

Next Episode

A self-initiated exploration of a popular TV show tracking app.

Check it out

Postscent

Designing a scent-infused, create-your-own-postcard app for MVP development.

Check it out