top of page
Cover(long).jpg

April Flowers

UX / VISUAL DESIGN

Project

Florist Website

Date

March 2022 - May 2022

Role

UX Researcher, Visual + UX Designer

First Image.jpg
iMac 27_ - Silver.png
Desktop_Homepage – 1.jpg
iPad Pro 11 - Space Gray - Portrait.png
Phone_Homepage.jpg
iPhone 11 Pro - Portrait.png
| 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

henry.png

“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.png

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.

P&P Wireframes_页面_1.jpg
P&P Wireframes_页面_2.jpg
P&P Wireframes_页面_2.jpg
P&P Wireframes_页面_4.jpg
P&P Wireframes_页面_5.jpg
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.

P&P Wireframes_页面_1.jpg

Desktop

P&P Wireframes_页面_6.jpg

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.

iMac 27_ - Silver.png
| 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.

iMac 27_ - Silver.png
iMac 27_ - Silver.png
| 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.

Desktop_Homepage – 1.jpg
iMac 27_ - Silver.png
Desktop_Homepage – 1.jpg
iPad Pro 11 - Space Gray - Portrait.png
Phone_Homepage.jpg
iPhone 11 Pro - Portrait.png
| 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.

First Image.jpg
bottom of page