FAFA Shop Web app | 2023

Branding Meets
E-commerce

Role: Product Designer, Marketing Strategist
Cross Functional Team: Product Manager, Data Analyst, and Marketing
Platform: Responsive Website

Context

A Pleasurable Experience to Shop Sustainable Bouquet

FAFA shop is an accessible e-commerce platform that allows consumers to order and customize sustainable artificial flower arrangements themselves.

Problem

A Wasteful Floral Venue

Fresh flowers are wasteful and expensive, while shopping for artificial flowers is limited in the market.

According to our research, artificial flowers reduce the environmental impact of wasteful fresh flower event décor by up to 90% (UC Berkeley study). Event venues need to go green with floral decoration.

Goal

The client approached me to help them excel with two primary objectives:
1. Build the platform from 0-1
2. Offer an easy, reliable, and pleasurable shopping experience

My Role

Customer Insights& Ideation

I have collaborated with project managers to uncover customer insights and translate them into features that address customer behaviors and motivations.

experience strategy& vision

I created frameworks and prototypes to share the vision, design principles, and content strategy. This has helped to evangelize ideas, gain alignment, and drive decision-making.

Planning & scope definition

I have defined the product with the client, evangelized customer goals and balanced business goals, prioritized and negotiated features for launch and beyond

design execution& validation

I designed across two platforms to translate product features for each platform context, and designed, executed journeys, wireframes, prototypes, and design specs.

Final Design

One-Stop Shop for Sustainable Bouquet

FAFA shop is the first one-stop shop for high-quality, customizable artificial flower bouquets.

FAFA Shop Case Study Cover Image

Process

Discover Define Ideate Test Refine

Discover

Sustainable Event Décor in Demand
‍

artificial flower, Viable Alternatives
‍

growing desire for self-expression
‍

seeking the convenience and affordability of e-commerce

Visualizing the End-to End

We used experience mapping techniques to visualize and communicate the consumers end-to end experience across various touch-point with the scheme.Mapping out the user emotions was key to setting client expectations about the aspirational emotional state we are aiming to design for

Define

Reframing the Question

Starting at the end

In order to optimize the customization experience, there was only one thing we needed to know: the customized product components.

Storytelling about Ideal User Flow

Knowing who I exactly I was designing for allowed me to ask myself how the app fits into the lives of the users. I imagined ideal experiences and focus on how our personas think and behave rather than getting into specifics about interfaces or business goals.

Ideate

Wireframing

Test

Refining with Prototypes

6 participants participated in the usability study.
Prototyping was the effective way to gain meaningful feedback for usability testing.

Design Details

Neat, Modern and Friendly

Based on the branding and the business goals, I developed the design system that contains the documentation with the visual Design specs &Keylines.

Simplified Checkout Flow

The Checkout Flow is simplified into three easy steps: View my bags, Checkout, Complete. The progress is important to keep the customers instate.

3 Steps for Checkout

Easy Customization flow on your phone

Express yourself by simply tapping the flower in your mood. Each selection is accompanied by a confirmation message popping up.

5 steps for customization

Results

Results

Learnings