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:
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.
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.
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.
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.
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.