The Problem
Independent music production is largely a solo effort, with a community focused on the end product. This model doesn’t give producers the resources needed to improve at a higher rate.
Every producer has a network. Migrating this network to an online platform will provide them tools to share feedback, exchange production insight, and expand their music circle.
The project
Produce was the product of the University of Washington Information School’s Capstone 2019 program. Capstone is a 6-month project spanning two quarters of school where students form groups and aim to harness information technology in order to solve a problem.
My role
I acted as Project Manager and Design Lead alongside 3 full-stack developers. I created the branding, design language, and UI/UX for my developers to implement. I then styled the live user interface using CSS and HTML according to my high-fidelity mockups.
Tools used
Axure
Sketch
Adobe Illustrator
HTML / CSS / JavaScript (React) / Git
Scrolling through the live landing page
How it works
Produce operates as a feed for producers to interact with what their connections are currently working on. This allows users to develop relationships with producers that they respect, providing feedback for each other and learning as they continue to create and share their work.
Our process
We were led by a Capstone advisor who acted as our mentor, prompting us to dig deeper into our idea. We had weekly deliverables including project outlines, research plans, site maps, and workshop reflections.
Home feed, displaying tracks recently posted by a user’s network
A blank canvas for creativity to shine
We wanted to give artists the opportunity to maintain their brand image while keeping interfaces minimal and unobtrusive. By centering Produce’s design language around simplicity, we can set the stage for music to shine.
By creatives, for creatives
We leveraged our team’s music production experience to pour insight into our design decisions.
For example, the user profile should have some degree of customization in order for artists to maintain their brand identity. Links to relevant streaming sites can direct fan traffic to their finished work, while the ‘Tracks’ section showcases what they’re working on currently.
Each profile acts as the artist’s hub for connection and creativity. By imagining a production network as something similar to a professional network, musicians can find other users making interesting music and collaborate on something new.
Challenge #1: Identifying value
Our first challenge was identifying how Produce would be used and where it’s value comes from. While we initially wanted a platform to provide feedback for musicians, we realized that people often want to get feedback but don’t want to give it. This prompted us to explore how we can incentivize user interaction.
We also wanted to think closely about unique tools we can offer producers to integrate feedback more effectively.
This is one example of what a waveform looks like on our platform. Instead of the conventional volume view, we give a live visualization of the audible energy spectrum from 0hz to 20000hz. Users can drag-select to filter and listen to different portions of the audio file.
If users want to listen more closely to the lows without hearing the mids and highs, they can filter out those frequencies for a more focused listen.
Gamification = Verification
By allowing profiles to showcase achievements within our community, users can verify their knowledge and engagement. Giving feedback, interacting with other artists, uploading unfinished work, and joining discussions will help users develop a reputation as a trusted source of information.
Song page high-fidelity mockup
Techniques are the topic
Produce is focused on providing quality feedback for producers.
By taking individual network connections and combining them into forum-style threads, trusted users can have discussions surrounding the poster’s music. More ears on a project means more perspectives that they can incorporate into their work.
The original poster will have the ability to endorse feedback that specifically helped their project along, improving both users’ reputation.
Challenge #2: Developer handoff
Because we were students, most of the time we were learning how to build this project while we were building it. This led to a lot of confusion, especially in the implementation of what I designed. Sometimes we needed to implement technical work-arounds, compromising initial designs and requiring a pivot.
Musical metadata
By imbuing user content with relevant tags, Produce develops a user-generated taxonomy that can be used to find work fitting specific parameters.
For example, if a producer is having trouble mixing a unique trumpet sample into an electronic song, they can search for tracks with ‘trumpet’ and ‘electronic’ tags and see examples of how others have attempted this. Beyond genre, this tool allows music to be indexed by instrumentation and techniques.
Music production meets version control
Each track page has the ability to store previous versions of the same track. Users can experience the evolution of a track as feedback is incorporated, or revisit concepts used previously. Maybe the new drums are great, but the previous melody was better. Commenters can reference previous versions to help the creator generate ideas.
Challenge #3: Time crunch
We were very optimistic in what we could accomplish, but in the end we realized that building polished, robust products is very, very difficult. Narrowing our scope helped us focus on core features, and while our imaginations ran wild with the possibilities of our platform, it would take a larger team with more resources to achieve that.
Keep up with your network
Get notified when your connections post tracks or updates, keep tabs on who’s in the studio, and stay involved with other artists’ journeys.
Have a group of talented musicians whose feedback you can’t live without? Mark them as ‘Homies’ to make sure that your closest connections are getting enough attention.
Our booth at Capstone Night
Embroidering custom shirts at a campus makerspace
Lessons learned:
Thorough user research will guide you to the best solutions
While we thought we had a strong enough understanding of the problem, we didn’t have much to point us in the right direction besides our own opinions. More research would have helped validate our idea and propel us forward.
Understanding your team will help you understand what is possible
As badly as we wanted to jump in and create a polished web application, it required so much technical and conceptual planning that we spread ourselves very thin. Starting with a smaller scope would have let us focus all of our effort into what was most important.
Test design concepts before implementation
We thought that the quickest way to a finished product would be to prototype the core screens then jump straight into code. Wrong. So much backtracking and refactoring would have been eliminated if we prototyped all of our screens before we started coding, focusing on important user flows.
Overall, this was the most comprehensive and intense design project I have ever worked on. I would do a lot of things differently, but it was so much fun sharing this experience with my team.
