
April Flowers
UX / VISUAL DESIGN
Project
Florist Website
Date
March 2022 - May 2022
Role
UX Researcher, Visual + UX Designer







| Project Vision |
April Flowers is a website selling flowers online.
The florist website is selling flowers online. It provides quick selection for users who don’t have much time for shopping or don't know how to choose appropriate flowers. Also, it provides an online community for users who would like to share stories about flowers or learn some knowledge about them.
| Challenges |
1
Provide a quick way for users to purchase appropriate flowers.
2
How to balance the quick selection and the normal shopping by category.
3
Create an online flower community for users.
| User Testing & Observation |
I interviewed a sample of four participants when conducting research during the first sprint cycle.
1
How to Choose Flowers
Two participants in the research mentioned that they know nothing about flowers. They only need to purchase flowers when they need to send someone a gift. One participant was busy with his work, so he didn’t have much time to look forward appropriate flowers. Therefore, a florist website with quick selection of flowers can help them find the right flower within a short period of time.
"I know flowers are romantic, but I really have no idea about them."
2
Online Flower Community
One participant was eager to learn knowledge about flowers. Another participant did know lots of tips about growing flowers or making dry flowers, and she always posted these knowledge on her social media. If there is an online community for users to share and learn flowers, it would be helpful for different users.
"I’d love to make dry flowers. The truth is that I have already taught several friends how to make beautiful dry flowers!"
| Personas |
Henry

“I never buy flowers for myself.
I always send them as gifts”
Goals
-
Buy flowers for friends or his girlfriend as gifts.
-
Find the flowers he wanted quickly.
Frustrations
-
Hesitating about purchasing what kind of flowers.
-
Purchasing flowers with wrong flower meanings.
Age: 29
Education: Bachelor’s degree
Hometown: Los Angeles, USA
Family: Single
Occupation: Investor
Henry is an investor working at a financial company. He mainly purchases flowers for his friends or girlfriends as gifts when necessary, like celebrating a birthday or a holiday. He wants to find the appropriate products quickly. But sometimes he may hesitate about purchasing what kind of flowers and, once, he even sent flowers with wrong meanings.

Yanan
“I love decorating my room with flowers and make dried flowers by myself.”
Goals
-
Purchsing flowers once a week.
-
Sharing her experience with purchasing or growing flowers.
Frustrations
-
No florist website allows users to share experience with flowers except purchase review.
Age: 38
Education: Master’s degree
Hometown: Beijing, China
Family: Married, one child
Occupation: Architect
Yanan is an architect living in Beijing. She loves flowers and purchase fresh flowers every week. And she would like to make them into dried flowers so that she can keep them for a longer time. She hopes there might be other discussion area online to share her experience of making dried flowers. But most florist website only allow users to write product reviews.
| User Flow |
In this project, I keep the normal shopping method with tags and add another user flow, quick selection.
Usually, florist website provides different tags in catalog for users to look forward the flowers they want, which is time consuming. In this project, I keep the normal shopping method with tags and add another user flow, quick selection. Users only need to answer several simple questions, then we can recommend appropriate flowers to them. Besides purchasing flowers, I also create an online community for users to learn or share somthing about flowers.

| P&P Wireframes |
1
Homepage
I tried different layouts for the homepage. And I always keep the navigation bar on the top of the screen, so I keep this element as a necessary part of the homepage. Then, I picked the best parts from each page and merged them into the final homepage.





2
Responsive Design
I designed the homepage with two different versions, one for desktop and the other for mobile phone, so that users can shop on the website well with different devices.

Desktop

Mobile
| Lo-Fi Prototype |
After designing paper wireframes, I began to create initial prototype with two main user flows, quick selection and catalog selection, and the checkout page through Adobe XD.
Quick Selection
1
Catalog Selection
2

Checkout
3
| Usability Study |
1
Research Questions
-
How long does it take for a user to purchase an appropriate flower with quick selection and normal catalog purchasing respectively?
-
How satisfied are the users with the quick selection?
2
Participants
-
Participants are adults, three males and two females.
3
Methodology
-
Location: Online
-
Five participants complete the purchasing tasks on their own. Each participant completes a questionnaire on their experience privately.
-
Each session will last 40 minutes, and will include an introduction, a list of tasks, and a short questionnaire.
| Insights |

Checkout
Quick Selection
Catalog Purchasing

1
Quick Checkout
One participant mentioned that the checkout process is a little bit long. If there is a quick checkout function works with quick selection, users can fulfill purchasing more quickly.
“The checkout process is still long.”
— Zida, an architect from NYC.
2
Multiple Shipping Addresses
Two of five participants complained that they would like to send flowers to different addresses, but this is not allowed.
“There is no place for me to add another address!”
— Henry, an investor from NYC.
3
Specific Shipping Date
Two participants would like to select specific shipping dates, rather than just choosing a rough shipping speed.
“I believe it's important to set specific shipping dates for flower shop.”
— Hannah, an engineer from NYC.
| Updated Prototype |
Flower Page

Checkout - Address

Different Addresses
Allow users to add different addresses for different items.
Checkout - Shipping

Specific Date
Add calendar for users to select specific shipping dates
Quick Checkout
Add “Quick Checkout”button to help users checkout quickly with past information.
| Final Hi-Fi Prototype |

Quick Selection
Set quick selection on the homepage to help users look forward appropriate flowers.
Category Selection
Provide categories for users to choose and purchase flowers.


Flower Community
Create an online flower community for users to learn or share stories and knowledge about flowers.


| Quick Selection and Quick Checkout |
Quick selection can help users find appropriate flowers in a short time. And quick checkout can help users checkout with past address, fastest shipping speed and payment information that has been used.
| Category Selection and Normal Checkout |
Category selection and complete checkout process provide normal shopping experience for users. In this way, users can browse all information on the website.




| Reviews |
Users can write or read reviews about flowers. In this way, they can learn more information about this product or help other consumers have more accurate psychological expectation.
| Responsive Website Design |
Mobile App, Tablet, Desktop
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.






| Takeaways |
This design is a comprehensive florist website. Users can not only purchase appropriate flowers in a very short time, but also share or learn knowledge about flowers through the online flower community. Through this project, I learned the importance of responsive website design. I learned how to consider different layouts for different devices users would choose, like desktop or cellphone.
I will take another user research to get more feedback so that I can iterate this florist website project in a positive way. Right now I have finished all pages for desktop version. I will continue to finish the whole user flow for mobile phone version, too. For the online community, it's more like a concept right now and it needs more development.
