Add-on Interactive Concept
This Humid House
This Humid House (THH) is a botanical design studio established in Singapore. The studio's intention is to develop a language for their tropical imaginarium composed of flora and foliage. A living vocabulary inspired by our endless summer.
The Problem
Orders for THH's floral products are only accepted via the online shop. Customers who wish to purchase bespoke floral products spend a frustratingly long time feeling stuck during the ordering process due to limited customizability and engagement.
Goal
To provide a platform where customers can customise floral products that meet their needs with ease, improving THH’s relevance, engagement and user experience for customers.
DURATION
June 2022
ROLE
User research
UI/ UX Design
TYPE
a self-initiated project as part of the Google UX Design Professional Certificate
DELIVERABLES
Mobile Web Interactive Prototype
TOOLS
Figma
Photoshop
01
Existing Design
HOUSE Bespoke Offering
THH's house bouquet is a designer's choice product that is also able to offer bespoke. The signature blend features favourite flowers of the moment, always artfully composed with the intention to delight.
Home Page > Shop Florals > House Bouquet > Style & Size Selection > Add to Cart > Confirm Order & Payment
.png)
Home Page
Shop Florals
House Bouquet
Style & Size Selection
Add to Cart
Confirm Order & Payment
The Problem
Consumers who wish to purchase bespoke floral products spend a frustratingly long time feeling stuck during the ordering process due to the rigid and oversimplified user interface, limiting customizability and engagement.
Existing Customization Screen
The current UI only allows consumers to input their requests for bespoke florals through a single text box during purchase, with no other prompts provided.
Challenge
How might we utilise the online platform to create floral products that meet customers' needs, while improving THH’s relevance, engagement and user experience?
02
Understanding the User
Research Goals
-
What are users’ goals and needs in customising floral products?
-
What are users’ pain points during the customisation process?
-
What can we learn from THH's competitors in providing customization services (offline & online)?
-
Figure out ways to make the experience of customising a bouquet engaging and personalized for users
Primary Research
Usability Interview
A user interview was conducted to better understand current consumers' experience with online customizing of floral products. 10 participants, representative of THH's consumer demographics, were recruited for this study.
Key Findings
.png)
User Interview Findings
Key Insights
Consumers who wish to purchase bespoke floral products spend a frustratingly long time feeling stuck during the ordering process due to the rigid and oversimplified user interface, limiting customizability and engagement.
The lack of visual confirmation of the end product, makes it even harder for consumers to proceed with the order.
As consumers would still look to THH for their highly unique and stylish creations, there is a great potential to make the selection process more personalized, visually guided and engaging, cultivating consumers’ purchase likelihood and improving their experiences with THH.
Secondary Research
Competitive Audit
A competitive audit is conducted on some of THH's competitors, analyzing the UI, user flow, information architecture, and vital features. Based on the findings, it was evident how the competitors make use of responsive questionnaires, visual references, and clear name taggings, to provide their consumers with close guidance in the customisation process. These features can be considered for the design concept later.
.png)
Competitive Audit
Key Insights
Gaps
-
Rigid UI for consumers to submit customisation requests
-
Customizability is limited, no preview of the end product
-
Limited guidance and references to help consumers decide on suitable florals
Opportunities
-
Feature for previewing updated look of bouquet before purchasing
-
Mood board: Journal photo collections of previous customizations, for users to have a greater variety of references during customization
-
Feature for the florist to update (draft) image of bouquet online once done
-
To incorporate screen reader technologies/ language translation
Problem Scoping
User Painpoints
3 primary user pain points were identified based on user research.
01
Limited & rigid user interface
Consumers can only input their requests for bespoke florals through a single text box during purchase, with no other prompts provided.
Consumers that are inexperienced with floral products might struggle with coming up with inputs. By limiting requests to texts, there is a higher chance for miscommunication to happen, leading to a mismatch of expectations.
02
Lack of visual confirmation for end product
There is no direct way for consumers to obtain a visual preview of how their order would turn out.
It is important to the consumers that they can review if the quality and style of floral products fit with their/ recipient's liking before making the purchase.
03
Lack guidance & engagement
Floral designs have no clear categorisation for style & occasions, which are key to consumers who are looking to gift or stylize their living environments.
User Personas
With the data collected from research, 2 personas representing the ideal users of THH were crafted. The persona study aims to give an in-depth understanding of the user goals and frustrations so that solutions can be explored to answer specific user needs.
Work From Home Architect, Rachel
Rachel is an architect with a busy and demanding schedule. As she is working from home and spends long hours at her desk, she makes it a point to liven up the atmosphere by placing flowers around the house.
She enjoys the experience of visiting a florist and choosing new flowers for herself, making sure they are fresh and smell pleasant. She dislikes it when the florist is inexperienced and is unable to answer her questions.
.png)
Devoted Boyfriend, Ross
Ross is a fresh graduate that has just started working. He saves money by taking public transport and prepping his meals to work. His girlfriend is his priority, and he is willing to spend a little more during special occasions such as Valentine's Day and birthdays on special gifts and flowers for his girlfriend.
He often feels frustrated when choosing a bouquet, especially when the florist is unable to give him guidance, as his preferences differ from his girlfriend and he is also inexperienced in floral arrangements.
Through the journey
A user journey is then mapped to visualize their emotional experience across all touchpoints in the floral customisation process to help resonate with the users better and identify areas for improvement to better answer their needs.
.png)
Rachel's User Journey
Ross's User Journey
04
Starting the Design
Problem Statement
Orders for THH's floral products are only accepted via the online shop. Customers who wish to purchase bespoke floral products spend a frustratingly long time feeling stuck during the ordering process due to limited customizability and engagement.
The lack of visual confirmation of the end product makes it even harder for consumers to proceed with the order.
Goal Statement
The project aims to let consumers customise their own floral bouquet/ arrangements easily, which will affect anyone looking to purchase THH's floral products for gifting/ stylizing environments, by providing a simple interface to replace flowers and preview designs in real-time. Effectiveness will be measured by the time taken to build and add the order to the cart and reviews.
To provide a platform for users to efficiently customise floral products that meet their needs, improving floral products’ relevance, engagement and customisation for users.
Design Principles
Intuitive & streamlined customization process
Real-time visual preview before purchase
Variety of templates with clear categorization
Clean and consistent UI as with existing design
Testing the Concepts
.png)
Style Selection
-
Touch-friendly slider to browse floral styles guided with collection/ themes
-
Filter, sort and view function for an efficient and seamless browsing experience
-
Interactive mood board of templates for customers to like, save, share and customise
.png)
Customisation
-
Real-time preview for customers to customise florals and arrangements to their liking
-
Floral species selections for customers to replace or add. Choices are limited to 4 for efficient selection.
-
Floral Types: Focal, Filler, Line, Greenery, Accesories
-
Floral Colours: curated by florists
Flower Arrangement Type
Flower Species & Colours
Bouquet Preview & Arrangement
Navigation Bar
Assembled
.png)
Floral Customisation: Assembly of layers
.png)
Order Confirmation
Delivery Date & Time
Delivery Information
Carting Out
The information and payment process has been reviewed to include an option for customers to deliver the product directly to the recipient's address.
The UI has also been improved for a more seamless and clean checking-out experience.
05
One of a Kind
Proposed Customization Flow
A clean solution was crafted to keep customers focused on the inputs that matter most to them (choice in flowers and style) with transparent pricing, while streamlining browsing and buying to optimize ordering for efficiency.
Home > One of a Kind > Browse Themes & Templates > Customize Template > Cart > Payment
.png)
Main Screens
The Experience
Homepage
Carousel with slider control browsing through services offered by THH.
Florals > One of a Kind > Workshop > Events
01
One of a Kind
Customisation service for users to select between floral bouquets or table arrangements.
Menu > One of a Kind
02
Themes & Templates
Customers can browse through the different collections & themes depending on their purpose of purchase & occasion. Customisable templates are laid out in masonry format for a seamless & interactive browsing experience with the help of filter, sort & view function.
Bouquet > Garden Collection > Single Column Layout
03
Customise & Preview
Within the starter template, customers are able to customise the species & colour of the focal, filler, line and greenery flowers. Each category is limited to four choices for a more efficient & straightforward selection.
Changes made to the template can be previewed in real-time so that customers can make informed decisions before purchasing.
Template > Flower Type > Colour > Rearrange > Done
04
Flower Arrangement Type
Flower Species & Colours
Bouquet Preview & Arrangement
Navigation Bar
Assembled
.png)
Floral Customisation: Assembly of layers
Customization Flow
Information & Payment
The information and payment process has been reviewed to include an option for customers to deliver the product directly to the recipient's address.
The UI has also been improved for a more seamless and clean checking-out experience.
Cart > Information > Payment
05
Information & Payment Flow
