PlugIn is an application that brings musicians together in a centralized place to engage in what they do most off-stage: Find shows, collaborate with each other, and buy/sell gear. The way it accomplishes that task is by having an organized, safe, and convenient posting board to advertise or request collaborations, show venues, or gear. It also features ways to contact users as well as rate them to maintain a high standard of community.
The main problem I chose to focus on when designing this app was: There are too many outlets to choose from when musicians are looking to collaborate, find gigs, or buy/sell gear. Too many choices leads to wasting time, tedious repetition of content posting, and disorganization of assets and information. Aside from that, there are issues with legitimate users and feeling like posting boards are trustworthy environments.
The solution to these problems that PlugIn provides are: 1. ) An organized feed of posts that focus solely on what musicians are looking for (Collaborations, Gigs, and Gear). 2.) Easy contact storage to organize communications. And 3.) A rating system that ensures users are held accountable by each other to maintain a trustworthy environment.
The users and audience that we focused on tailoring PlugIn for were Gen Z and Millennial musicians. Through surveying we found that the predominant user base who showed interest in this application were those in the age range of 18-35. They typically work full time, are male, and white.
My role was very spectrum-wide this time around. I had a hand in every step of the process from user research, to building the information architecture, to branding, to bringing a high fidelity prototype to life. I always enjoy getting to have a hand in every step of the process and watching a project grow and come to life.
Discovery and Research
Information Architecture
Brand Development
High Fidelity Prototyping and Usability Testing
Competitive Analysis
I started with competitive analysis because I truly wanted to refine the problem I was looking to solve by designing PlugIn. I knew what I didn’t like about other services, but I didn’t have a streamlined thesis until I compared other outlets musicians might use to connect with each other. I compared, LinkedIn, Craigslist, and Reverb to start. These were the initial inspirations I wanted PlugIn to compete with.
Survey and Interviews
After getting an idea of what I wanted to tackle from the competitive analysis, I wrote up a survey to see if I could validate my initial solution ideas with potential users. After that, I followed up with some of the surveyors that gave me permission to contact them and interviewed them to gain more detailed insights into what they want from an application like PlugIn.
Personas
With all of that surveying and interviewing in my back pocket, it was time to create some personas that I could quickly reference throughout the design process. With these easily accessible, it was easy for me to stay on target and keep the user in mind with every decision I made moving forward. An example of the main one is below.
Brad:
Age: 33
Gender: Male
Work Load: Full Time
Characteristics:
-Musician
-Hobbyist
-Collaborative
-Educated
-Tech Savvy
Open Minded
Bio/Motivations:
Brad lives in an urban center of a moderately sized city in the United States. He is a musician as a side hustle to his day job of working in an office. He is mostly looking for a way to connect and collaborate with other musicians as well as find venues to play shows on the weekends. Occasionally, he buys/sells gear.
Goals:
-Simplify Connection
-Get More Shows
-Buy/Sell Gear
Frustrations:
-Too many options for places to post/connect
-Lack of meaningful connections
User Stories
Based on the research, there were five different user stories I wanted to focus on when delivering the minimum viable product. They are in the table below. These stories would help conceptualize the pathways necessary to complete the tasks the users are looking to accomplish.
User Flows
Each flow represents the steps it would take for the user to complete the task set out in the above user stories. These helped me to further understand and imagine/plan the necessary screens or actions that needed to be designed.
Site Map
With the flows in place, it was time to design and refine the blueprint of the application. This site map would ultimately be the skeletal structure of the app. It was during this time I truly was able to think about and examine the simplicity or complexity of the app. I had a first and second version of the site map (as seen below) and went with the more condensed version as I moved forward.
Wireframe Sketching
Now with the skeleton in place, it was time to start thinking about muscular structures. Functionality is the muscles of a product. That’s where wireframing comes in. We get to design pages to make the skeletal site map functional. Making these initial rapid sketches helped me churn out a lot of ideas quickly so I had plenty of different options to choose from moving forward. With these sketches I was able to do a few short user tests and use those results to pursue the best designs.
Wireframes
Here are the digital wireframes. These are the result of all of the planning and designing up until this point. From here, we are able to see how the functionality comes together and impacts what the pages of the app will look like and are organized. This was the final step in building the information architecture for PlugIn.
Color Palette
With the skeletal and muscular structures in place, it was time to make it pretty. Colors were my first step in bringing PlugIn to life. I considered many color schemes in my search to find the right feeling for PlugIn. This final color palette was chosen because it was inspired by the concept of nightlife. Something every musician is familiar with. Yep, the user is still being considered.. Even when choosing colors.
Typography
While I considered a few fonts for the headings and body type, I eventually decided to go with “Righteous” and “Lato”. Righteous has an electric guitar feel to it which makes sense for PlugIn. Lato was a good companion for Righteous because it was modern, readable, and plain enough to make sure Righteous stood out.
Logo
The final logo included the final typography choice and color choice as well as replacing the “I” in PlugIn with an audio jack. The thing you would “plug in” to an amplifier or sound board.
Style Tile
This is the final style tile. It defines the typography classes, the elements general positioning in the frame, and the colors in their accurate hierarchies of use. This was also when I tested the colors and typography for accessibility standards (AAA Passed!).
First Iteration
Here it is! The first iteration of PlugIn. The skeleton, muscles, and skin all in one place! It’s really starting to look like a living and breathing product isn’t it?
Usability Testing
Using the first iteration of the High Fidelity Prototype, I was able to conduct some usability testing and use that data to inform a first round of improvements for PlugIn. Below are the notes from the handful of tasks I asked users to complete.
Final Iteration
After going through the feedback from testing, I was able to implement the necessary changes that were brought to my attention. Those changes were things like: Adding splash pages to give the users feedback when they complete tasks, Adding an “All section to the top navigation bar instead of solely relying on the UI to give the user information about what they’re browsing, and including full size posts so users can see full images. With those in place, I now have the best possible design for a minimum viable product given the scope and time constraints in place. You can click the image below to experience the full clickable prototype.
In conclusion, I believe after this whole process I was able to come up with a solution to the problem I found when looking for ways to help musicians connect. Based on the data, musicians try to connect to accomplish three things: 1. Find gigs 2. Collaborate and 3. Buy/sell gear. By giving them one consolidated place to both post and review posts for those specific things, we solve the problem of being overstretched by the myriad of choices they have. By including a rating system we also solve the bonus problem of accountability within the community. I believe those solutions combined with the UI elements really bring a full and complete user experience to PlugIn.
Lessons Learned:
Became even more confident in Figma
The more I practice with softwares such as Figma the more competent I become. It’s simple. This project was no exception. I learned more quick keys and ways to make my workflow more efficient. This will help me in the future because the more quickly I can accomplish tasks, the more I am able to produce in a given amount of time.
Building more complex information architectures
This was the first project of mine that included sub-pages within a page. Sorting the “Stage” opened up a new world of information organization for me as a designer. I run into the concept when I use products all the time, but this was my first time designing it myself.
Having more informed/inspired choices when it comes to colors
Taking the time to decide what feeling I wanted to chase with the color scheme was a very cool and interesting practice. Ultimately, not only did it lead to the best choices possible, it helped me understand more fully that there is purpose in every decision. The apps that utilize that fact are the ones getting the most out of their UI.
Recommendations for Development:
Rinse and Repeat
This is a great first go. As features are added, I highly recommend reiterating the process to make sure the new features are held up to the same scrutiny the initial features were.
Pay a smidge more attention to accessibility
While it passes most standards, there is definitely room for improvement with things like reachability and readability (type size). As the project moves forward I would love to see a more detailed look into those things.
