Aldoshik LogoCSSFILTERS.CO + shutter4Moodboard LogoOyo LogouiGradientsZomato logo

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.

Objectives

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

  • Intuitive and put focus on the users content without compromising usability
  • Flexible to accommodate future business requirements and product features
  • Modularized to enable reuse of components for supporting interfaces
Moodboard Wireframes
Wireframing

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

  • To move away from a standard left side navigation and instead utilize the full width of the screen to display the pins (images)
  • Add a secondary navigation below the main head to house the page details and view actions like sorting, filtering, layout modes etc.
  • Opt for a full page view of the content detail page rather than an overlayed modal

Brand Elements

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

Typography Avenir Next and a few sans-serif fallback fonts were the typeface of choice. This is used in the headings, buttons and some text elements on the site.
Moodboard Brand Typography
Iconography I opted to use outline icons with thin outlines to match the overall aesthetic of the product and keep things clean.
Moodboard Brand Typography
Colors For the colours, I chose a light background with various shades of blue as the primary palette accompanied by a few accent colours for notifications and alerts.
Moodboard Brand Typography

Design Details

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.

Navigation

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.

Moodboard top left header typography
The two progress bar indicate how much of capacity is left on the free plan. The breadcrumbs also serve as quick links to go back to previous screens. The info on the third row are the view details, these change according to the screen the user is on
Moodboard top left header typography
The secondary navigation houses some of the actions possible on the view such as downloading, sharing a link, creating a new model, accessing screen settings etc. This is extendable as actions can be added or removed as required

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.

Boards

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.

Moodboard cards design
This figure shows the thumbnails in different states - normal, hover and selected. Since one of the actions of the page are to filter by starred moodboards, the thumbnails contain an easy access way to star or unstar.

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

Final Outcome

Moodboard boards page
The first page the user sees when logging into the app. The few main action points on this page are the sorting, filtering, layout changes, starring and the creation of new moodboards
Moodboard boards page
This is the actual moodboard, where the user can see all his collected inspiration displayed in a long, flowing, easy to consume manner. Apart from the standard sorting, filtering and CRUD actions, the user can also chose to individually resize a particular board to make it visually more prominent on the board.
Moodboard boards page
This is the pin page, here the user can see the pinned asset, edit it's name, description, tags and also leave a note if required. In plans where team collaboration is allowed, the user can also annotate and discuss plans with his/her teammates

I’m on the lookout for an exciting new project.

Let's Work Together

Created with love, sweat and lots of coffee