Design for TunaCam Android app helps users discover and connect with music in new ways
19/05/16

Case Study by Evelyn Csiszar RGD, Interface & Visual Designer / Owner at Evi Designs

 

I met Antonio Tari, an Android developer, at a HackerNest event in fall of 2014. As we chatted and sipped our drinks, he suddenly turned to me and asked “Have you ever had a moment that you wish you could capture with a song?” Taken by surprise, I didn’t quite know how to answer this question. He proceeded to tell me about an app idea he has had up his sleeve for a number of years, but has never gotten around to actualizing. 


The app would generate playlists for pictures taken by the user, and not just at random – it would create a playlist to match your surroundings, capturing a moment in time through music. This app would allow users to discover music in a new way. We discussed the possibility of working together to create an app like this and within a few weeks we set to work.

 

Project
Antonio was originally inspired by an article he read about how the brain can associate images and colours to sound waves, even when personal experiences vary. For example, even though some people might feel happy when it snows outside and others might feel depressed, the associations the brain makes can still be generalized. He developed an algorithm to do almost one to one mapping of the components of a digitalized song and the components of an image. The app analyzes a picture, generates tags and searches in a database of millions of songs to generate a playlist that matches the image attributes. This allows users to discover music in a whole new way.

 

Process

Based on advice I have received from people who have been involved in collaborative projects, I suggested that Antonio and I draw up an agreement before we started any work so we could identify each other’s roles and responsibilities up front. Antonio heard similar suggestions from his network as well, so we were both happy to draw up a contract together. This helped us to figure out who would be responsible for what during the design and development phases. The agreement was simple, outlining a brief description of the app idea, each of our responsibilities, percentage of ownership, division of income if the app ever ended up making money, how income would be tracked and handled, and what would happen if one of us decided to withdraw from the project. It also addressed confidentiality (primarily before the app was launched). 

 

We researched existing apps and did not find any that did what our app proposed to do. The closest apps were apps that helped users add music to photos, or record sound while taking a photo. The idea and purpose behind these type of apps was very different - it was focused more on documenting life with photos and music, rather than using imagery as a way to discover music. 

 

We wanted to make sure the name and the overall branding mirrored the youthful and fun qualities of the app. Through independent brainstorming and some collaboration with Antonio, we focused on finding a name that would be short, catchy and tied to both music and photography. We came up with the name TunaCam. “Tuna” is short for “tuner” which is a common vernacular used among musicians, and “cam” is short for “camera”. The name captures both the music and the photo aspects of the app, and is easy to remember since it sounds similar to “tuna can”. 

 

Once the name was established, I took the lead on the creative and developed a logo around the idea of a tuna fish. Inspired by the King of Rock ‘n’ Roll, I gave the fish an Elvis-style haircut – sideburns included. For the brand colours, I used a cool grey and a bright teal colour, which establish a lively, bold presence in print and online and also translate well into the app’s user interface design. The overall feel is fresh, fun and youthful.

 

 

With the branding approach established, the app’s interface was designed using the primary brand colours. We integrated the latest Android features and gestures to allow users to navigate between different menu items with just a swipe. The music artists’ imagery was also incorporated into the design, so users can become familiar with new artists.

 

I was familiar with designing websites and user interfaces, but this was my first time designing for an app. It was as much of a passion project as it was a learning project. Antonio handled the programming, and I made suggestions in terms of transitions and interactivity, which we discussed together. Antonio, being an experienced Android developer, incorporated additional interactive elements that enhanced the app even further. My experience creating user interfaces was helpful in this project, but this was my first practical experience working with UX for a mobile app. I am currently completing a UX Design course at Brainstation where I’m learning more about the complete process, including research, user flows and user testing.

 

 

In terms of workflow, I provided designs to Antonio in the form of ready mock ups in Illustrator or PDF formats. I also exported the individual assets for the app as PNG files, at the various sizes for various devices. If I were to redo this app today, I would probably have used Sketch to create the designs rather than Illustrator, as it offers tools more specifically created for designing interfaces and websites. 

 

We also created a promotional website to explain how the app works and provide links to the Google Play store. The tagline “Capture the perfect moment, with the perfect playlist” was created to express the intended purpose for the app, inspired by Antonio’s question from the first time we met. A surreal mountain biking image was used as the featured graphic on the site to tie into the idea of discovery. You can take a look at the live website at tunacam.ca.
 

 

Promotional cards were created to hand out at networking events. The cards feature various images on the back and three examples of the types of tags that generate a matching playlist. The cards quickly communicate the core idea behind the app and provide a glimpse into how the algorithm works.

 

As we continued to work on the app over the course of a year, we came up with more and more ideas for how to improve the experience. We gave users the option to customize their genre preferences to avoid genres they don’t like. We also added the ability to save songs as favourites, share songs with friends and direct users to third party services where they can buy the songs. Users can also type in keywords to generate a playlist, or upload a photo from their own photo library to begin listening to music. We're currently tweaking the app’s functionality and user interface to provide a smoother user experience.

 

Challenges

As is the case with many side projects, there were times when life just got in the way and other things had to take priority. As a result, the process was pretty lengthy. In hindsight, having a weekly or biweekly meeting set up ahead of time and forcing ourselves to schedule around it would have been a more efficient way of working, and aiming to have at least something completed for each meeting would have advanced our progress.

 

Next Steps
Once we finalize the app’s interface design and functionality, we will focus our efforts on marketing to generate awareness of the app. We’re hoping to add additional features, such as the ability to select from a library of existing images, so users can discover playlists without having to take photos themselves. We’ll be looking at increasing speed and responsiveness to create a better user experience overall. We also want to develop an iOS version of the app.

 

Designer Takeaways
While working on a side project can be a lot of fun, it can also be very challenging to see it through to completion. It’s hard to stay on track, especially when we have other commitments like full-time jobs, family obligations or school. Here are some lessons I’ve learned from the experience:
  1. Meeting in person or virtually through Skype or Google Hangouts is almost always more productive and more motivating than email exchanges. Take advantage of the opportunity to collaborate and bounce ideas off one and another. You’ll always end up with more ideas and usually more interesting solutions than if you were doing things by yourself.
  2. Keep notes and sketches of all of your ideas and share them on platforms like Slack, Google Drive or Trello. This will help you organize your ideas all in one place and ensure all parties involved will be on the same page.
  3. Create a plan on what needs to be accomplished and how you plan to accomplish it. That way you can break out a seemingly daunting project into manageable chucks, which you can then divide into smaller to do items that can be easily accomplished. Prioritizing each item also lets you create a road map and allows you to see what needs to be accomplished to move ahead.
  4. Having a weekly meeting to check in and see how everyone is moving along with his or her own responsibilities is a great way to keep the project top of mind. Aim to accomplish at least one item from your to do list for each meeting.
  5. I would also recommend creating a contract before you begin any work, even if you’re teaming up with a long-time friend. The contract should go into detail about each person’s role in the project, what’s expected of them and the terms under which you are working together. By doing this upfront, you will ensure that if any conflicts arise, you can refer to a written agreement to help resolve problems and misunderstandings. Not to mention, you’ll have a good base to start from if the project ends up turning into a profitable business.
  6. Last but not least, have fun with it! If you decide to take on a side project, make sure it’s something you are passionate about and will enjoy working on. Don’t bother taking on a project that you’re not that interested in or something you feel obligated to do. Side projects can be a lot of work, but when you’re enjoying what you’re working on, it won’t feel like work at all!

 

Credit:
Designed by: Evelyn Csiszar RGD
Developed by: Antonio Tari
Music powered by: 8tracks.com
Images powered by: last.fm

 

About Evelyn Csiszar

Evelyn is a visual and interface designer based in downtown Toronto with over 6 years of professional experience and a 4-year Bachelor's Degree in Design from York University. She's fascinated by how people think and act. And as a result, enjoys creating user-centred designs that are easy to use, easy to understand and easy on the eyes. This guiding principle applies to all her designs, whether in print or online. To find out more about Evelyn or to see a sample of her work, check out evi-designs.com.

 

Interested in submitting a case study? Download 'Guidelines for Contributing Content' and email news@rgd.ca