UX/UI Case Study – 2021
FloraGoGo – Flower Delivery App Concept
Project Overview
About FloraGoGo
FloraGoGo is a mobile-first flower delivery startup that delivers flowers to any destination in its operating cities within 60 minutes.
She does so by matching the orders with eligible florists who could make the delivery within the timeframe.
My Challenge
The goal is to design a frictionless and joyous experience for:
- The customer: setting up account, selecting flowers and completing the order;
- The florist: onboarding, adding products, and receiving orders.
My Process
Design Tools
Figma
Whimsical
Pencil & Paper
RESEARCH
Competitive Analysis
To begin on FloraGoGo, I need to understand how current flower websites are addressing users’ needs, and also to identify areas of potential growth. I started with an audit of competitors’ sites.
Growth Opportunities
WYSIWYG
Customers prefer websites with product images that are very close to the actual ones.
TRANSPARENCY
They also prefer to be notified early when seasonal flowers need to be replaced.
Insights
SIMPLICITY
Most websites are overwhelmed with small texts to optimize their SEO.
An app with simplified interface and gorgeous images would stand out.
FREEDOM TO BROWSE
Ecommerce apps usually want the users to sign up an account before even searching for products.
We want to turn it around and focus on completing an order.
EXECUTION
Customer Journey Mapping
After getting out the rough ideas, I started designing the user flows in Figma. The goal is to test them with users before applying the UI components to them.
Sketches
I first began with high-level sketches for each flow to get the rough ideas on paper before diving into the wireframes. The purpose is to flesh out and play around the various possibilities.
EXECUTION
Wireframing
After getting out the rough ideas, I started designing the user flows in Figma. The goal is to test them with users before applying the UI components to them.
EXECUTION
Hi-Fidelity Interfaces
After testing and confirming the flows with the wireframes, I worked on the visual elements and fleshed out the hi-fidelity user interface for each of the app’s screens.
HIGHLIGHT 1
Quick Flower Search
For new users of the app, they are able to skip to process of creating an account and start searching for flowers. We want them to be able to find something they like before even asking for their details.
Instead of showing them a typical landing page of flowers, we ask them upfront for what occasion are they buying for, where are they sending it for, and when do they need it by. We then display the most relevant flowers.
HIGHLIGHT 2
Guest Checkout
Even after deciding on the flower to buy, the users can still proceed to checkout as guest, if they choose to. They are in total control.
In addition to manually entering the credit card details or paying via Paypal / Apple Pay, there’s an option to scan the physical card and retrieve the details.
HIGHLIGHT 3
Retrieve Recipient Details From Contacts
For new users of the app, they are able to skip to process of creating an account and start searching for flowers. We want them to be able to find something they like before even asking for their details.
Instead of showing them a typical landing page of flowers, we ask them upfront for what occasion are they buying for, where are they sending it for, and when do they need it by. We then display the most relevant flowers.
HIGHLIGHT 4
Order Tracking
Once the order has been claimed by a florist, the user is able to track the order status from that point onwards until the flowers has been successfully sent to the recipient.
The user can communicate with either the florist or the driver if necessary, and they can swipe up the card modal and view the order details, as well as the order’s timeline.
HIGHLIGHT 5
Sign Up As Easy As 1-2-3
For new florists signing up with FloraGoGo, they can simply sign up using their email or mobile number.
If their business happens to be in Singapore, they can retrieve their business profile via MyInfo, which is integrated with the relevant government agencies.
HIGHLIGHT 6
Order Tracking By Florist
Similarly for the florist, once they claim an order, the app starts helping them to keep track of the driver’s estimated arrival timing.
The orders are broken up to various stages so the florists can track where they are for each order and how much time they’ve got.
Lessons Learnt
This project is both very enjoyable and challenging to design as I’ve to design screens for both the customer-facing and florist-facing side. These are the lessons learnt while designing this app:
I have to think really hard about the user’s point of view for ecommerce apps: providing them the freedom to:
- browse the products first to see if they find something they like before even asking them to sign up;
- complete the purchase as a guest; and
- scanning of credit card details.
The main idea is for them complete the order in the shortest steps possible, whereas signing up during this process impedes that flow.
As for the merchants, the focus is getting them onboard smoothly and leveraging on existing local utilities to retrieve business profile details, for example.
Next Project >>