diff --git a/assets/pabio-lounge/billing.jpg b/assets/pabio-lounge/billing.jpg new file mode 100644 index 0000000..c4d93a8 Binary files /dev/null and b/assets/pabio-lounge/billing.jpg differ diff --git a/assets/pabio-lounge/cover.jpg b/assets/pabio-lounge/cover.jpg new file mode 100644 index 0000000..133462a Binary files /dev/null and b/assets/pabio-lounge/cover.jpg differ diff --git a/assets/pabio-lounge/data-export.jpg b/assets/pabio-lounge/data-export.jpg new file mode 100644 index 0000000..e396cbf Binary files /dev/null and b/assets/pabio-lounge/data-export.jpg differ diff --git a/assets/pabio-lounge/delivery.jpg b/assets/pabio-lounge/delivery.jpg new file mode 100644 index 0000000..b5df9af Binary files /dev/null and b/assets/pabio-lounge/delivery.jpg differ diff --git a/assets/pabio-lounge/discount.jpg b/assets/pabio-lounge/discount.jpg new file mode 100644 index 0000000..1c48e93 Binary files /dev/null and b/assets/pabio-lounge/discount.jpg differ diff --git a/assets/pabio-lounge/financeability.jpg b/assets/pabio-lounge/financeability.jpg new file mode 100644 index 0000000..f8a3f46 Binary files /dev/null and b/assets/pabio-lounge/financeability.jpg differ diff --git a/assets/pabio-lounge/furniture.jpg b/assets/pabio-lounge/furniture.jpg new file mode 100644 index 0000000..dce9231 Binary files /dev/null and b/assets/pabio-lounge/furniture.jpg differ diff --git a/assets/pabio-lounge/invoice.jpg b/assets/pabio-lounge/invoice.jpg new file mode 100644 index 0000000..f5033e0 Binary files /dev/null and b/assets/pabio-lounge/invoice.jpg differ diff --git a/assets/pabio-lounge/product-categories.jpg b/assets/pabio-lounge/product-categories.jpg new file mode 100644 index 0000000..8b3bd8e Binary files /dev/null and b/assets/pabio-lounge/product-categories.jpg differ diff --git a/assets/pabio-lounge/product-category-sets.jpg b/assets/pabio-lounge/product-category-sets.jpg new file mode 100644 index 0000000..7e33314 Binary files /dev/null and b/assets/pabio-lounge/product-category-sets.jpg differ diff --git a/assets/pabio-lounge/proposal.jpg b/assets/pabio-lounge/proposal.jpg new file mode 100644 index 0000000..f30983a Binary files /dev/null and b/assets/pabio-lounge/proposal.jpg differ diff --git a/assets/pabio-lounge/render-markers.jpg b/assets/pabio-lounge/render-markers.jpg new file mode 100644 index 0000000..b84e473 Binary files /dev/null and b/assets/pabio-lounge/render-markers.jpg differ diff --git a/assets/pabio-lounge/returns.jpg b/assets/pabio-lounge/returns.jpg new file mode 100644 index 0000000..48765ee Binary files /dev/null and b/assets/pabio-lounge/returns.jpg differ diff --git a/assets/pabio-lounge/sales-pipeline.jpg b/assets/pabio-lounge/sales-pipeline.jpg new file mode 100644 index 0000000..3603aac Binary files /dev/null and b/assets/pabio-lounge/sales-pipeline.jpg differ diff --git a/assets/pabio-lounge/stock.jpg b/assets/pabio-lounge/stock.jpg new file mode 100644 index 0000000..2edd883 Binary files /dev/null and b/assets/pabio-lounge/stock.jpg differ diff --git a/assets/pabio-onboarding/8.jpg b/assets/pabio-onboarding/8.jpg new file mode 100644 index 0000000..0ea5efd Binary files /dev/null and b/assets/pabio-onboarding/8.jpg differ diff --git a/assets/pabio-onboarding/consulting-call.jpg b/assets/pabio-onboarding/consulting-call.jpg new file mode 100644 index 0000000..7b6a7f1 Binary files /dev/null and b/assets/pabio-onboarding/consulting-call.jpg differ diff --git a/assets/pabio-onboarding/cover.jpg b/assets/pabio-onboarding/cover.jpg new file mode 100644 index 0000000..8a5d084 Binary files /dev/null and b/assets/pabio-onboarding/cover.jpg differ diff --git a/assets/pabio-onboarding/floor-plan.jpg b/assets/pabio-onboarding/floor-plan.jpg new file mode 100644 index 0000000..a9fdc84 Binary files /dev/null and b/assets/pabio-onboarding/floor-plan.jpg differ diff --git a/assets/pabio-onboarding/photos.jpg b/assets/pabio-onboarding/photos.jpg new file mode 100644 index 0000000..bdde8b5 Binary files /dev/null and b/assets/pabio-onboarding/photos.jpg differ diff --git a/assets/pabio-onboarding/schedule-call.jpg b/assets/pabio-onboarding/schedule-call.jpg new file mode 100644 index 0000000..225d2a5 Binary files /dev/null and b/assets/pabio-onboarding/schedule-call.jpg differ diff --git a/assets/pabio-proposal/add-items.jpg b/assets/pabio-proposal/add-items.jpg new file mode 100644 index 0000000..ccc20af Binary files /dev/null and b/assets/pabio-proposal/add-items.jpg differ diff --git a/assets/pabio-proposal/compare-and-save.jpg b/assets/pabio-proposal/compare-and-save.jpg new file mode 100644 index 0000000..ad7b581 Binary files /dev/null and b/assets/pabio-proposal/compare-and-save.jpg differ diff --git a/assets/pabio-proposal/contract-addons.jpg b/assets/pabio-proposal/contract-addons.jpg new file mode 100644 index 0000000..2d342df Binary files /dev/null and b/assets/pabio-proposal/contract-addons.jpg differ diff --git a/assets/pabio-proposal/contract-delivery.jpg b/assets/pabio-proposal/contract-delivery.jpg new file mode 100644 index 0000000..be48236 Binary files /dev/null and b/assets/pabio-proposal/contract-delivery.jpg differ diff --git a/assets/pabio-proposal/contract-overview.jpg b/assets/pabio-proposal/contract-overview.jpg new file mode 100644 index 0000000..e5d0242 Binary files /dev/null and b/assets/pabio-proposal/contract-overview.jpg differ diff --git a/assets/pabio-proposal/contract-sign.jpg b/assets/pabio-proposal/contract-sign.jpg new file mode 100644 index 0000000..b8d491f Binary files /dev/null and b/assets/pabio-proposal/contract-sign.jpg differ diff --git a/assets/pabio-proposal/contract-subscriber.jpg b/assets/pabio-proposal/contract-subscriber.jpg new file mode 100644 index 0000000..0013997 Binary files /dev/null and b/assets/pabio-proposal/contract-subscriber.jpg differ diff --git a/assets/pabio-proposal/dashboard.jpg b/assets/pabio-proposal/dashboard.jpg new file mode 100644 index 0000000..388855e Binary files /dev/null and b/assets/pabio-proposal/dashboard.jpg differ diff --git a/assets/pabio-proposal/details.jpg b/assets/pabio-proposal/details.jpg new file mode 100644 index 0000000..0e757d2 Binary files /dev/null and b/assets/pabio-proposal/details.jpg differ diff --git a/assets/pabio-proposal/dots.jpg b/assets/pabio-proposal/dots.jpg new file mode 100644 index 0000000..a4cfd5c Binary files /dev/null and b/assets/pabio-proposal/dots.jpg differ diff --git a/assets/pabio-proposal/floor-plan.jpg b/assets/pabio-proposal/floor-plan.jpg new file mode 100644 index 0000000..b9bf329 Binary files /dev/null and b/assets/pabio-proposal/floor-plan.jpg differ diff --git a/assets/pabio-proposal/furniture.jpg b/assets/pabio-proposal/furniture.jpg new file mode 100644 index 0000000..2b719cf Binary files /dev/null and b/assets/pabio-proposal/furniture.jpg differ diff --git a/assets/pabio-proposal/product-details.jpg b/assets/pabio-proposal/product-details.jpg new file mode 100644 index 0000000..aa6fc7d Binary files /dev/null and b/assets/pabio-proposal/product-details.jpg differ diff --git a/assets/pabio-proposal/proposal.jpg b/assets/pabio-proposal/proposal.jpg new file mode 100644 index 0000000..c0f223f Binary files /dev/null and b/assets/pabio-proposal/proposal.jpg differ diff --git a/assets/pabio-proposal/select-alternate.jpg b/assets/pabio-proposal/select-alternate.jpg new file mode 100644 index 0000000..d2d4148 Binary files /dev/null and b/assets/pabio-proposal/select-alternate.jpg differ diff --git a/projects/2021/pabio-onboarding.md b/projects/2021/pabio-onboarding.md index fdd4f5e..4a49f75 100644 --- a/projects/2021/pabio-onboarding.md +++ b/projects/2021/pabio-onboarding.md @@ -1,13 +1,12 @@ --- -title: Pabio Onboarding +title: Onboarding on Pabio.com tags: projects intro: Style quiz and onboarding flow for Pabio's personalized interior design and furniture rental service date: 2021-12-22 -work: ["Web"] +work: ["Web", "Pabio"] bg: "#ed7470" style: cover -company: Pabio -img_src: /assets/pabio-onboarding/1q +img_src: /assets/pabio-onboarding/cover img_type: jpg stack: ["TypeScript", "React", "Next.js", "Tailwind CSS"] --- @@ -16,11 +15,30 @@ On the Pabio website, we designed a new onboarding flow to help users get starte The flow starts with a style quiz, which asks users to select their preferred interior design styles from a set of images. The quiz is followed by a short form to collect contact information and a few more questions about the user's needs. -https://youtu.be/8XnSy58YPPg - ![Step 1](/assets/pabio-onboarding/1.jpg) ![Style description in step 1](/assets/pabio-onboarding/1-style.jpg) + +The team at Cleverclip designed custom illustrations for the quiz and onboarding flow, and we implemented the flow in TypeScript, React, and Next.js, using Tailwind CSS for styling. + +We ask customers which rooms they want to furnish, and show relevant questions based on their answers. + ![Step 2](/assets/pabio-onboarding/2.jpg) ![Step 3](/assets/pabio-onboarding/3.jpg) ![Step 7](/assets/pabio-onboarding/7.jpg) +![Step 7](/assets/pabio-onboarding/8.jpg) + +Pabio is available in Switzerland and Germany. We automatically detect the user's current location and preselect their region to personalize the experience. If they're based in a region we don't serve yet, we show a message and ask them to sign up for our newsletter. + ![Step 13](/assets/pabio-onboarding/13.jpg) + +We then ask them to upload their floor plan and any photos of their empty apartment to be able to generate photorealistic 3D renderings of their furnished apartment. + +![Upload your floor plan](/assets/pabio-onboarding/floor-plan.jpg) +![Take some photos of your home office](/assets/pabio-onboarding/photos.jpg) + +Finally, we ask them to select a date and time for a free consultation call with one of our interior designers. We integrate with Calendly to show available time slots and automatically create a meeting in their calendars. + +![Step 14](/assets/pabio-onboarding/consulting-call.jpg) +![Step 14](/assets/pabio-onboarding/schedule-call.jpg) + +After the call, we send them a summary of the call and a link to their personalized furniture proposal, which you can see on the [Pabio.com proposal](/projects/2021/pabio-proposal) page. diff --git a/projects/2021/pabio-proposal.md b/projects/2021/pabio-proposal.md new file mode 100644 index 0000000..85dd8b6 --- /dev/null +++ b/projects/2021/pabio-proposal.md @@ -0,0 +1,53 @@ +--- +title: Proposals on Pabio.com +tags: projects +intro: Interactive proposals with photorealistic renders for Pabio +date: 2021-12-22 +work: ["Web", "Pabio"] +bg: "#ed7470" +style: cover +img_src: /assets/pabio-proposal/proposal +img_type: jpg +stack: ["TypeScript", "React", "Next.js", "Tailwind CSS"] +--- + +After a customer completes the [onboarding flow](/projects/2021/pabio-onboarding) and has as interior design consulting call, we generate a personalized proposal for them. The proposal includes a list of furniture items, a a 3D photorealistic rendering of their furnished apartment, and a price breakdown. + +![Dashboard](/assets/pabio-proposal/dashboard.jpg) + +The customer logs in to their account on Pabio.com to view their proposal. From their dashboard, they can also manage deliveries, view and pay invoices, claim insurance, and more. + +![Proposal](/assets/pabio-proposal/proposal.jpg) + +These renders are interactive, so customers can click on any item to see more details about the product, including the price, description, and dimensions. + +![Dots](/assets/pabio-proposal/dots.jpg) +![Product details](/assets/pabio-proposal/product-details.jpg) + +We show a 3D floor plan of the apartment, so customers can see where each item will be placed, along with a list of all the items in the proposal. + +![Floor plan](/assets/pabio-proposal/floor-plan.jpg) +![Furniture](/assets/pabio-proposal/furniture.jpg) + +Customers can also view and select alternate products for each item, or add additional items to their proposal. + +![Select alternate](/assets/pabio-proposal/select-alternate.jpg) +![Add items](/assets/pabio-proposal/add-items.jpg) +![Details](/assets/pabio-proposal/details.jpg) + +We also show a price breakdown, so customers can see how much they're saving by renting instead of buying. + +![Compare and save](/assets/pabio-proposal/compare-and-save.jpg) + +After clicking on "Order now", customers are taken to a page where they can a summary of the products in their proposal and select any optional addons. + +![Contract overview](/assets/pabio-proposal/contract-overview.jpg) +![Contract addons](/assets/pabio-proposal/contract-addons.jpg) + +After selecting addons, customers select a delivery date with a real-time calendar that shows available dates. They also enter their delivery information and review and e-sign the contract. + +![Contract delivery](/assets/pabio-proposal/contract-delivery.jpg) +![Contract subscriber](/assets/pabio-proposal/contract-subscriber.jpg) +![Contract sign](/assets/pabio-proposal/contract-sign.jpg) + +Internally, we set up these proposals, order furniture and manage deliveries, and everything else on [Pabio Lounge](/projects/2022/pabio-lounge). diff --git a/projects/2021/pabio-website.md b/projects/2021/pabio-website.md index 432d7f8..6c70f1a 100644 --- a/projects/2021/pabio-website.md +++ b/projects/2021/pabio-website.md @@ -3,10 +3,9 @@ title: Pabio.com tags: projects intro: Interactive marketing website and landing pages for Pabio date: 2021-05-21 -work: ["Web"] +work: ["Web", "Pabio"] bg: "#ed7470" style: cover -company: Pabio img_src: /assets/pabio-website/homepage-above-fold img_type: jpg stack: ["TypeScript", "React", "Next.js", "Tailwind CSS"] @@ -58,3 +57,5 @@ Here are some more screenshots of the website: ![Contact us](/assets/pabio-website/contact-us.jpg) ![Sustainability](/assets/pabio-website/sustainability.jpg) ![As seen in](/assets/pabio-website/as-seen-in.jpg) + +We also designed a new [onboarding flow](/projects/2021/pabio-onboarding) to help users get started with the service and better qualify leads. diff --git a/projects/2022/pabio-lounge.md b/projects/2022/pabio-lounge.md new file mode 100644 index 0000000..f55bd64 --- /dev/null +++ b/projects/2022/pabio-lounge.md @@ -0,0 +1,46 @@ +--- +title: Pabio Lounge +tags: projects +intro: Internal ERP and inventory management system for Pabio +date: 2022-01-03 +work: ["Web", "Pabio"] +bg: "#ed7470" +style: cover +img_src: /assets/pabio-lounge/cover +img_type: jpg +stack: ["TypeScript", "React", "Next.js", "Tailwind CSS"] +--- + +Pabio Lounge is Pabio's internal operating system. It's a web-based ERP, CRM, CMS, and inventory management system that we use to manage our sales pipeline, inventory, deliveries, billing, and everything else. + +The sales pipeline is the real-time dashboard of all our customers and their proposals. We can see the status of each proposal and track it as it moves down from sign up to sending the proposal to the customer to signing the contract to delivering the furniture. + +![Sales pipeline](/assets/pabio-lounge/sales-pipeline.jpg) + +After customers complete our [onboarding](/projects/2021/pabio-onboarding) process, they're added to the sales pipeline and we perform a soft credit check. Our team of professional interior designers and salespeople, aided by our internal 3D rendering tool, then create a personalized proposal for the customer. + +![Financeability](/assets/pabio-lounge/financeability.jpg) +![Proposal](/assets/pabio-lounge/proposal.jpg) +![Render markers](/assets/pabio-lounge/render-markers.jpg) + +Salespersons also place the furniture order with our suppliers and set up a delivery schedule that customers can view on their dashboard. They can also apply discounts and add addons to the proposal. + +![Delivery](/assets/pabio-lounge/delivery.jpg) +![Discount](/assets/pabio-lounge/discount.jpg) + +We also use Pabio Lounge to manage our inventory. We can see the status of each item, including whether it's in stock, on order, or in transit. We can also see the status of each invoice. + +![Furniture](/assets/pabio-lounge/furniture.jpg) +![Invoice](/assets/pabio-lounge/invoice.jpg) + +Other features of Pabio Lounge include billing management with predictions of future cash flow, data export, and an internal CMS for managing the website. + +![Billing](/assets/pabio-lounge/billing.jpg) +![Data export](/assets/pabio-lounge/data-export.jpg) +![Product categories](/assets/pabio-lounge/product-categories.jpg) +![Product category sets](/assets/pabio-lounge/product-category-sets.jpg) + +Additionally, we can view any returned products that we can refurbish and add back to our inventory, and track our in-stock inventory in real-time. + +![Returns](/assets/pabio-lounge/returns.jpg) +![Stock](/assets/pabio-lounge/stock.jpg)