Retrospective: Bottomfeeder

Background

Bottomfeeder Records is an up-and-coming house music record label based in LA.

I was excited when Daniel and Scotty, the cofounders, first approached me about building and designing the web product. At the time, Bottomfeeder had signed more than 20 passionate artists, released a handful of great records, and built a small cult following in the underground House music scene.

The independent record label's brand was already fun, interesting, and people already loved it. At the time, Daniel and Scotty we're seeking to take their brand to the next level.

Needless to say, I was ecstatic.

Version 1 (MVP)

The Bottomfeeders were in the middle of redesigning their logo, so we agreed to launch an MVP version of the site when they unveiled the new logo.

We quickly started sketching ideas over discussions about the brand.

When we finished the first version, Daniel and Scotty were excited and loved it. The working relationship was fantastic and the first iteration was a good start, but I knew the product could better represent their fun and unique brand.

Knowing this needed another iteration, I was already taking notes and sketching for the next one.

Summary points:

  • In our discovery process, we learned a lot about the brand. The brand evolved organically from the cofounders personalities, so it took extra time to unearth their goals and vision for the brand.
  • The process was unclear. Beyond sketches, I didn't create mockups or kick off discussions with clear intent.
  • My experience building web applications resulted in an easy-to-use product, but the design didn't represent their brand yet.
  • Despite them being very happy with the product, I knew we could do better.

Version 2

Daniel and Scotty were brilliant creators. I wanted to push our limits to see what we could create together.

With the V2, I wanted something that the founders could be proud of and would represent the brand they worked hard to create.

To get a better result, I wanted to approach the process differently.

The Process

Before we got back to sketches I approached the design more holistically. Here's a breakdown of the process.

  1. Learn about the brand, aspirations, goals, and inspirations

    • Use word maps and mind maps to get to the feeling keywords that will inform the design
    • Get inspired with other websites, in the same industry or adjacent
  2. Create sketches

    • Use timed sessions to explore different layouts
  3. Create mockups of the best sketches

    1. Establish colors and fonts
    2. Create mockups
    3. Get feedback on the best mockups
    4. Make edits
  4. Build

This process was far more efficient. The discussions were more fruitful and actionable. By the time I was got to the code, our certainty for what the end product design was 90-95%.

This made the building step far faster, as I simply had to copy over what was in our mockups. Any changes were simply polish, as opposed to rewrites.

Learnings

Having worked in larger organizations, I had less experience spearheading the design and discovery process. I was initially less comfortable to push the client, but I realized that it's my job to interpret their vision into the product.

Before I even started coding, I brought my sketches to life with low-fidelity mockups in Sketch. Then, I created high-fidelity mockups of the best ideas. Finally, I brought these ideas to Daniel and Scotty. This step-by-step process was key, because iterations are faster in the mockup stage and we could squash bad ideas before they were ever written in code.

To finish this off, I'll leave a rule of thumb that Carolina de Bartolo, my design mentor, told me.

Never show the client something you're not proud of. Like some ironic rule of the universe, the client always seems to pick that option.

Be thoughtful and deliberate about your suggestions.