Kai Brueckers

On crafting a product that helps creatives to find & organize their inspirations

inspirabox

I would always send myself emails with interesting inspirations I found throughout the day. Since this was really inconvenient, I started thinking about how I could make this process easier and more enjoyable.

Visual content always fascinated me. I'm confident that a lot of inspiration comes from our surroundings and the things we visually consume. Especially in today's digital world, you get buried in designs, images, videos and more. It's hard to organize and catalogue all of this to get a grip on the good stuff. When I was in a hurry after finding something interesting, I used to just sent a quick link to my own email address. By the time I got home, I would either forget about it or lose any context. Sometimes I couldn't even find that exact email anymore.

This sucked.

So I wanted to change that and create a product that focuses on creatives to help them curate visual inspirations that are meaningful. First and foremost I wanted to build a product that I'd like to use myself, hence it got pretty personal right from the start, and Inspirabox was born.

So if you're with me here and want some context about how and why Inspirabox was created, I dig a bit deeper into the thought process in this case study.

  • Typography & Calligraphy 17 inspirations
  • Portrait Photography 14 inspirations
  • Fashion Ideas 29 inspirations
  • 3D Character Design 17 inspirations
  • Wonderful Art inspired
    by MC Escher
    63 inspirations
  • B/W Street Photography 32 inspirations
  • Interior Design 52 inspirations
  • Trip to Iceland Starter Kit 33 inspirations
  • Learn to work with
    pencil & paper
    80 inspirations
  • A Designer's Desk 21 inspirations
  • Automotive Design and Oldtimers 16 inspirations

After working on a concept with a lot of iteration during my free time, I teamed up with a friend of mine who at the time, was responsible for the whole back-end structure and development tasks that we needed to bring this idea to life. I came up with concepts, UX patterns, (endless) layouts and eventually coded everything front-endwise. In numerous nights we hacked away prototype after prototype to explore different approaches, allowing us to see things that worked and things that didn't.

Some decisions had to be carefully considered:

  • What exactly can be called an inspiration?
  • How could you interact with them?
  • Which categories do we need?

Even though conceptualization is the first step, product design never truly ends, and we came back to these initial questions many, many times.

With nearly all parts of Inspirabox, I relied a lot on iteration. As we were just two people, I pushed out new versions and enhancements to the developer as soon as possible, thereby allowing the design to remain quite lean and iterated on specific parts. In fact, the inspiration detail page was revised numerous times throughout the process to reflect one inspiration as a valuable item.

To provide a product that creatives around the world would love to use, we spent a lot of time defining clear objectives and a scope for our first version. In the end we decided to focus on a limited feature set, our core experience:

Discover

One of our main challenges was the flow, namely how inspirations could be saved in an easy and enjoyable manner outside of the web application. We developed browser extensions which allowed saving content from any website with just a few clicks. Thanks to our implementation of drag and drop, this process is even more fun and gives inspirations a certain weight to them. We also implemented support for some major websites like 500px, Dribbble or Pinterest, which allowed us to make things like naming, categorizing and tagging inspirations a breeze, because it worked entirely automatic. What reads itself like a fairly simple feature really made a difference, as it helped us to alleviate the daunting complexity for the user.

Obviously, we couldn't automate everything, so we went with »When it needs to be manual, it at least needs to be fun«. With that in mind, I designed an interface which is visually appealing and made it quite pleasant to add information.

Userflow Scribble

I developed different approaches to understand how users would work their way through this process. In the end I settled with this left sidebar that swipes from within the off-canvas to preserve most of the original website's space.

Library

Finding hundreds of inspirations without any organization can get pretty confusing over time. Imagine a big pile of really awesome and inspirational pictures, but you want to find that one picture, that you know you saved a while ago. It would certainly take some time to go through this mess. To help with the organization, we developed a library, which contains all of a user's inspirations and collections. Creating new collections and working on your existing ones would be possible in one single, convenient environment.

Getting this part of the UI to feel intuitive was complex:

  • To avoid intrusive modals & popup menus wherever possible, I enforced inline editing which leads to a great user flow when creating new collections for example
  • The same approach applies to the various action menus that are introduced with a fun, subtle animation
  • When selecting multiple inspirations and dragging them over to a new collection, you'll notice a few techniques there to achieve some more depth, emphasizing your moving stack of inspirations
  • To give every collection inside the library a distinctive look, the four most relevant inspirations are displayed in front of the title as a thumbnail

A lot of these things might seem pretty trivial afterwards, but it took a considerable amount of exploration and prototyping to get it just right.

I came up with the idea of additional filtering options, so that aside from searching within collections or displaying specific types of inspirations, you could also see your favorites from other users that are not in any of your collections. The good thing is this would happen inside the library, so no need to send the user somewhere else.

  • To make rearranging and sorting as intuitive as possible, we imitated the use and feel of working in Windows Explorer or Apple's Finder.

  • Creating new collections should be easy and intuitive to do. Modals are only introduced for advanced settings.

  • Filtering inspirations inside the user's Library helps to organize different types of items in a more efficient way.

Explore

The last key feature of Inspirabox is also the most distinctive one: All inspirations saved by users are accessible and searchable to provide a cumulative pool of ideas (Collections can be private, though). Users won't have to remain in an isolated bubble. This allows us to give users smart recommendations for new inspirations based on their collections without needing them to follow other people (which is possible, too), or choosing some interests out of an endless list during on-boarding. Of course, lots of different items displayed on a never-ending feed called for some obligatory filter options such as Popular (by time), Recent, and Trending.

We also developed a proprietary search that would differentiate between certain color palettes and correlation of tags which could help find inspirations that fit a certain mood or style.

  • red
  • ui
  • onboarding

What I learned

I think one of the most important things that I learned is when you build a product you're attached to, you're much more invested throughout the whole process and committed to the point. While this is very satisfying most of the time, it also forces you to evaluate your solutions more often.

‘Done’ is better than ‘perfect’.
— NELSON LEUNG

You have to get used to the fact that usually your first idea to solve a problem isn't the best but despite trying to work as lean as possible, I often found myself in situations where I iterated on designs and features that I knew deep down wouldn't work. It's hard to let go of a design you might like visually, but at the same time isn't serving any purpose in terms of user experience.

Eventually, I realized that sometimes it's indeed all about »trimming the Fat«. A lot of ideas got killed during production, but without those necessary cuts you run the risk of a product becoming too complex, unfocused and therefore unusable. It's important to define a scope at the beginning of every project that you can stick to and use to stay on track.

Of course, Inspirabox is not flawless and there are a lot of things left to be improved, but building a product from scratch with a small team and launching it eventually, helped me to really get a sense of how much effort and love is put into the products we use ourselves.

It's an experience I can build on, and that's something I don't want to miss.

Top