Bill of Quotation Builder

Product

Canvas

Scope of Work

Redesign User Journey
UX/UI
Interaction Design
Component Library

Project Objective

Design Goal

Enable an Interior Designer build Bill of Quotations against Designs that they showcased to their clients and place order against it.

Purpose of a BOQ

A BOQ (Bill of Quotation) enables a customer understand details of a project to a level of what products, services & materials have been used in interior designing a project.
It’s a proposal, On approval, the same can be used to build production ready designs & products.

Three interior designers working in a bright studio; one pins fabric and wallpaper swatches to a large pinboard while two colleagues review the scheme from a table of laptops

Two designers at a white table comparing paper samples over an open drawer of material swatches, with shelves of wood, fabric and stone finishes behind them

Project Overview

Problem Areas

A designer was using generic tools like Excel to create a Quote that would not give a user a Rich experience to understand or interpret a BOQ, neither its enticing as an experience.

The earlier design of the BOQ builder was unintuitive and had usability flaws that confused the designer.

Designers faced losing many project pitches due to an unconvincing BOQ in their pitches.

Understanding User needs & Usability issues

Methods used:

UAT for existing platform

Heuristics

Competitive analysis

The original BOQ builder screen being audited: a dark left rail, a project tab bar with BOQ selected, an empty Rooms panel showing zero net payable, and an empty BOQ items table

User research: Interview

We conducted interviews with the aim of finding out the challenges with tasks they have to achieve using the platform.

What are the most important info
do you need while building a BOQ?

What information do you want to
show your customers in your quotes

Look at this Quote, What do you
like about it and dislike about it?

How do you create multiple quotes
and share with your clients?

Take us through step by step with
creating a Quote and place an order.

How do you use your old BOQs
for new projects?

Heuristics Evaluation & UAT results

We conducted both these exercises and jotted down the problems with the interface and how broken the overall experience it.

The old BOQ builder greyed out and marked up with five red call-out boxes and speech bubbles: the BOQ/Payments/Orders tabs are separate flows rather than one journey; Clone and Download BOQ belong later in the journey; Update Prices needs to be tied to the quote expiry date; Net Payable needs a discounting engine behind it; and the item row's Finish column is redundant next to discounting and availability

UX/UI Design

UserStory

As a User, I want to create a New Quote for my Client’s 3 BHK Flat as per their family req. that they shared with me.

Usecases

1. Add a Product (e.g. Furniture) in the Quote. 2. Add a service (e.g. Painting) in the Quote. 3. Apply discounts on Products.

4. Organise Products by Rooms 5. Preview and Publish Quote.

Video still of the new quote flow: the customer workspace for Aniket Mukherjee with a Quotes tab, a Drafts list showing BOQ names, dates and totals, and a Create Draft Quote button

UserStory

As a User, I want to generate a presentable document for the client in order to make a convincing pitch for BOQs stating all relevant information in the interior design project, also justifying the cost.

Usecases

1. Export a customer facing BOQ and previous it. 2. Share the BOQ with the Client. 3. Send the BOQ for Production

Video still of the export flow: the same customer workspace and Drafts list, from which a customer-facing BOQ document can be generated and shared

UserStory

As a User, I want to apply and manage coupons and clearly by able to justify the price of each item.

This New Feature was added that was powered by our Coupon Engine.

The coupon experience: an Apply Coupon panel with a code field and a scrollable list of available offers, beside a quote line item showing the struck-through price, the amount saved, and a Pricing popover itemising each discount

UserStory

As a User, I want a seemless integration with the Product and Services catalog to view items, Edit them and add to the BOQ.

Better Navigation and Search UX was designed, Also most important info was restructured for quicker decision making for the user.

Component Library

A Robust library was created parallely to support functionalities needed for All Livspace applications and platforms.