Last week, I wrote about my final design to-do list for DJ Manny version beta. Making my way through that list has resulted in some key decisions about the identity and personality of our application. These decisions have been bringing us closer to a complete application — and our plan, as Dory and I begin our final week at Made by Many NYC together, is to have an application ready for a pre-release announcement.
My challenge was to make all of the micro design tasks on my to-do list culminate into a cohesive brand and experience. I built these details up from the visual skeleton already present in the application’s basic structure. For example, I knew the songs would display on cards, and that the options for Artist/Genre/City/Year would reside below the card. From there, I needed to refine the details of these design patterns in order to thoroughly fill out the intended feel of the application.
Here is a brief review of last week’s process, and some sneak peeks of the final design before the pre-release at the end of this week.
One of my first tasks was polishing up the card display. Since the main element of the card display is variable text (the song and artist name), and all the music controls are gesture-based, I treated the card mostly as a vehicle for the important song information.
The design of the song metadata was a little more flexible. We want this navigation to be the primary place of user interaction, so it was important to make it visually compelling, while not competing with the strong visual of the song card.
Together, these two elements construct the central player screen, in which the user will spend the most time. I extended the visual themes of this page to the search and history screens, which essentially exist at the margins of the player screens:
Because every “path” is associated with a color, color has a lot of meaning in our application, and of course, it sets the entire mood of the application. It was tough finding four colors that worked together, and were unique enough to be the voice of our application. Will suggested breaking down the design elements in order to explore the color relationships more carefully. Here are some examples of some color palettes I experimented with:
Choosing the final color scheme was a collaborative effort, and I got just as many opinions from the designers in the studio as the non-designers. I’m colorblind, so assembling a successful palette was no small victory! Will’s approach allowed me to think about the relationships of colors, rather than simply the appearances of them.
We eventually decided on these playful colors:
There’s still a bit more to do in terms of visual design, such as animation and introductory screens. Also, I’m continuing to refine the app’s language and story. Once these touches come together, I’ll be able to tighten up the brand for the big pre-release at the end of the week. I focused a lot on the details in this blog post, so you’ll be able to see all of these details operating as part of a completed product and experience. Look out for a product website, but don’t expect to see DJ Manny’s name on it — we’ll have a real app name by then!
