alexander lozada

2018 Mar

Resamplr sound library


I began working on Resamplr (or at least the foundations) around Senior year in High School. Since I was little, I always loved to create music digitally. I'd often use digitally "sampled" instruments to add some vibrancy to my tracks. As I grew older, I began to sample instruments of my own, including experiments like homemade instruments and strange combinations like bowed guitars. I shared these instruments with the internet, and the response was great.

Rev 2 (2016)

A year or so later, I came back with some new skills. I learned how to create full stack web applications through my job with iCanCode Club. I took my design knowledge from college and began applying that to my new layout.

User Flow

I began by defining a high-level user flow that would describe the site's interactions. Being a commerce site, the site stays close to with what most users are comfortable.

Additionally, I mapped the all-important checkout flow. Although it's fairly basic, I did make sure to reduce friction as much as possible. The greatest risk to smaller e-commerce sites is a complex, annoying, or time consuming sign-up process. I mitigated this by allowing users to add items to their cart as a guest. The site then will prompt them to create an account upon checkout.

This is important, as users feel more invested in creating an account after spending time adding items to a cart. If the site asked for an account first, less users would feel compelled to buy anything.

Revision 2 homepage Revision 2 login page Revision 2 product details page Revision 2 audio player

You can see how much I progressed with portions, typography, and color with this revision compared to my pre-college experiments. But as my friend Jack put it, It's boring. Music is a fundamental aspect of human creativity, and our design should reflect that!

I also began to realize that the majority of my customers were younger hobbyists, not professionals. This audience was looking more towards a relatable brand. My corporate look didn't convey that.

Rev 3 (2018)

Instead of looking at audio websites this time, I started my search with graphics and styles that fit the design language.

  1. Be Personal. Don't be corporate. Consumer should feel as though they always come first.
  2. Be Friendly. Don't over-complicate interactions. Rewarding users with unique interactions is great, but it shouldn't be overdone.
  3. Be Modern. Don't overuse imagery, borders, or other elements that can contribute to visual noise. This isn't a photography website, so make sure that images all contribute to the audio product being sold.
  4. Be Dynamic. After all, we're artists.

The main objective is to provide a different and better experience for all users - an experience that is easier, more intuitive, cleaner, and more developer-friendly than competitors.

Putting it together

With these ideas in mind, I created mockups.

Revision 3 home Revision 3 signup Revision 3 about Revision 3 product page Revision 3 product page

Creating it

So, what else is there to do but make it? Resamplr is live unfortunately due to hosting costs it has been taken offline. I used Rails 5 and traditional HTML/CSS for the current implementation.

I'm working to transfer the Rails project into a custom Rust based server with Elm as the frontend choice. You can see my progress here.

In the future, I would use a static site instead of a full server. It was a great project to learn from, but costs would be more manageable on a static platform.