Reverse Engineering Bandcamp for Artists: A Lesson In Wireframing

For my second Ironhack Bootcamp challenge, I was asked to reverse engineer a popular application. I chose Bandcamp for Artists — an app I use regularly and feel I could learn from working backwards through the design process. While not extremely popular, the application is certainly a favorite amongst independent artists, as Bandcamp is one of the few streaming services that allows listeners to directly purchase and download music, purchase merch, and directly message with an artist.

To start, I took some screenshots as I went through the steps to directly message an individual “fan” (a Bandcamp user who has purchased my music and follows my artist page). I chose this specific userflow because I think communicating with listeners as an artist is an important way to establish a long-term connection with fans and drive music sales. I wanted to ask the question — How easy is it for me to contact one of my “fans” as an independent musician who wants to be heard and share my music with the world?

After I took six screenshots, I made an inventory of the UI elements I would need to create my wireframes. The elements I would need included: Buttons, icons, text fields, and toggles. Then, I drew a lo-fi userflow with paper and pencil (I have yet to buy sharpies, my apologies!)—

I then wrote up a quick description to clarify the task-analysis of this userflow:

The user is an independent artist who wants to communicate with their fans one-on-one. They start their journey by opening the Bandcamp for Artists app, where they can see an overview of their sales, listens, and followers over the last 30 days and all-time. Then they click the message icon at the bottom of the screen, where they see a history of their most recent group messages to all fans and releases. Then, the user clicks on fans, and can see a history by either date or amount spent of all fans that have purchased their music. The user may then click on a specific fan to view this specific person’s purchase history. Clicking upon “send a direct message” allows the user to send this fan a message and view their previous chat history. The user may go back to the previous screen or home-screen at any point throughout their journey.

My next step was to create (my first ever!) wireframes. I made these in Figma and used a lovely wireframing kit provided by Ironhack. I placed my screenshots directly next to the corresponding wireframes so that I could directly compare what I thought I should include and exclude from the wireframe relative to the fully-functioning application. Doing so helped me to understand how helpful the wireframes are in focusing on functionality and essentials in the early stages of the design process, saving some of the (also important!) stylistic elements such as color schemes for later.

Finally, I created a clickable prototype in Figma. In creating even this simple prototype, I could see just how complicated even a “simple” prototype can get as the web of possible clickable-routes grows (and perhaps simplifies) with each iteration of the design process.

A few takeaways:

• As an aspiring UX Designer, reverse engineering apps I already use and like can help me to walk through the decision making process that more experienced designers have already worked though. There is likely a reason I like the application!
• Wireframing helps designers to focus on functionality and the essentials and simplifies the design process. Trying to do everything at once ultimately results in bad UX.
• Even seemingly simple applications can get complicated very quickly. Focusing on a single userflow showed me how frequently “two roads diverge in a yellow wood”. Effective design thinking may often consist of isolating a problem or waypath and building up.