Project Overview

The Moodboard project is designed for interior designers, providing them with an efficient and interactive tool for creating kitchen designs. It comes preloaded with elements like flooring, appliances, countertops, wall paints, cabinets, and more, allowing designers to quickly build and visualize multiple kitchen layouts.

Objective

The primary objective of the Moodboard project is to create a specialized tool that:

• Enhances the design process for interior designers and showroom professionals.
• Provides an intuitive, fast, and user-friendly interface.
• Enables users to generate and download images of their designs.
• Is developed within a short timeframe of less than 2 months.
• Functions as a SaaS model, allowing companies to subscribe and use the tool.
• Supports large touch screens in showrooms.
• Reduces confusion by allowing customers to visualize their choices.
• Allows users to upload custom items such as furniture and decor.
• Includes pricing for each item, enabling budget management.

Key Goals and Objectives

• Create a specialized tool for moodboards.
• Ensure fast and easy usability.
• Enable image generation and downloads.
• Develop within a two-month timeline.
• Deploy as a SaaS platform for businesses.
• Support 65-inch touch screens for showroom use.
• Streamline decision-making for customers.
• Allow custom item uploads.
• Incorporate pricing for budget planning.

Target Audience Persona

The primary users are:

• Interior designers who need a simple yet powerful tool.
• Countertop fabricator showrooms looking for an interactive customer experience.
  The tool must be easy to use, shareable as images, and enhance the customer’s engagement and decision-making.

Project Importance

Large showrooms can be challenging to navigate, especially during peak hours. Moodboard addresses this by providing customers with an interactive interface on touchscreens where they can create their own room designs and easily contact salespeople. This tool helps showrooms showcase their catalog without overwhelming the customer, increasing sales and promoting cross-selling.

Moodboard empowers customers to make informed decisions by visually exploring their options, leading to quicker and more confident purchases.

Overview Video

Insert video link or description here.

Project Journey

Project Background

The Moodboard project began as an internal solution to reduce the workload of sales staff by providing a touchscreen tool for customers. It organizes and displays a variety of elements, such as countertops, appliances, and wall colors, making it easy for users to visualize their ideal kitchen.

The initial exploration involved testing various libraries that could support the tool’s needs. While Canva was found to offer similar functionality, it lacked the capability for store-specific catalogs. The development team, therefore, created a custom library built on VueJS and called BraveVue, enabling more tailored and scalable solutions.

Development Process and Technology Stack

Technology Stack

• VueJS: The front-end framework for Moodboard.
• BraveVue: A custom-built component library for draggable, resizable, and interactive elements.
• PHP and MySQL: Backend APIs for data handling and storage.

Building the Solution

Moodboard originated from the need to simplify customer decision-making for selecting various kitchen components. The development team used manual tools like Canva to create mockups but found it limiting without an extensive catalog on hand. This sparked the creation of Moodboard, built to empower users with quick, intuitive tools and comprehensive catalogs.

Iteration and Testing

The design team rigorously tested the Moodboard tool, providing feedback that led to continuous improvements and the addition of new features.

Key Features and Functionalities

• Extensive Database: Includes popular paints, flooring, countertops, appliances, and more.
• Design Tools: Shapes, text tools, font selection, 3D visualization, shadow effects, and alignment features.
• Draggable and Resizable Elements: User-friendly interface for creating designs.
• Image Generation: Easily download and share creations as images.

Demo of Project in Action

Insert demo details or video link here.

Impact and Results

Project Outcome

Moodboard delivered exceptional results, including:

• 1.5x increase in sales.
• Enhanced user engagement.
• Interactive showroom experience through touch screens.

Timeline & Efficiency

The first stable version was completed in 45 days, with frequent updates to integrate new features and improvements.

Reflection and Learnings

The project team successfully built a custom design tool library with Canva-like functionality, gaining experience in developing advanced graphic tools using HTML and JavaScript.

Future Potential

Moodboard has the potential to evolve into a versatile app, expanding its use beyond interior design to cater to other creative industries.

My Role on the Project

I was responsible for building the VueJS components that enabled drag-and-drop and resizing functionality. I also architected the tool, ensuring it was lightweight and scalable without relying on third-party libraries. Additionally, I led the development team, maintaining quality standards and overseeing overall functionality.