As the name suggests, Moodboard.io is a simple tool which provides users with a private place to store all inspiration collected from various places over the internet and create a visual moodboards for their projects.
* Disclaimer - The designs shown in the thumbnails and pins are for representive purposes. They have not been created by me and have been sourced from dribbble as examples of a user's curated images.
This project started out due to a personal problem of not being able to store and more importantly consume the content in a way which suited me. Being the sole driving force behind this project, it was important for me to work smart and maximize the output from the effort involved.
Keeping in mind the various requirements and the project constraints, it quickly became clear to me the key objectives of the project. I needed to design an product experience and interface which should be:-
I started by creating a few rough sketches on paper. After shortlisting a few different variations, I created a few full scale, low fidelity wireframes which helped me get a better understand the nuances of each screen and identify possible short comings in some the layouts.
After this stage, I decided upon three major things:-
Once I was satisfied with the basic skeleton of the layout and the placement of the action buttons, I proceeded to finalized some the brand assets such as the primary color palette, fonts, and iconography
At this point I had the pieces I needed and was clear in my head about the direction I wanted to take with the visual design. I started creating the designs keeping in mind the initial objectives of making it intuitive and extendable at the same time.
Being an app with a relatively less number of “pages” the navigation aspect was quite straight forward. A breadcrumb serves the dual purpose of acting as a navigation helper as well as informing the user of his location at any given moment.
The secondary header houses the screen specific action items. This approach is flexible and future-proof as it provided a consistent location to place all action items, while maintaining the ability to add or remove specific items from the list depending upon the product features or business requirements.
After logging into the app, the first screen that the user sees is the boards screen. This houses thumbnails of all the moodboards by that user. Apart from showing the latest three items added to the moodboard, the thumbs also display some addition information such as the number of pins in it, last updated timestamp, main action items etc.
The split view on the cards display the three latest additions to the board. This aids the user in remembering the contents of the card. The stacked appearance of the cards is a subtle reminder of its nature of being a collection of pins/inspiration