FLOWER SHOPPING

Flower shopping has become such an interesting experience, because now there is a type to cater to almost everyone's preferences.
I love gifting flowers, and skilled at picking out beautiful bouquets that I know my recipients would love. But my knowledge about flowers is a different story — you could even say it is the main reason why I take too long to actually place an order. And it does not help that when I visit a new flower store online, their website navigation bar looks something like this:

I also realised that although gifting flowers is relatively personal, very few stores offer an option to customize your own arrangement. After all, since many online stores require a user to create an account, I thought, "Why not leverage on this to make customizations possible?"

WIREFRAMING SOME IDEAS

How might we help customers choose flowers more confidently and efficiently?

I wireframed a simple flower guide for an online flower shop website.

• The flower guide can be accessed from the site's navigation bar. There are only 3 main links, each with a different purpose, so that users do not feel overwhelmed with their starting point.
• Users can filter the catalog from the guide page to browse arrangements with only flowers they are interested in.
• The flower guide can also be pulled up from the bottom of the screen when users are browsing the catalog. This is to provide users with a quick reference to the guide without navigating away from the catalog page.

How might we allow customers to personalize their flower orders?

I also wireframed a simple customization page for the website.

• The page would be highly visual, with images accompanying each option to help customers choose what they want as accurately as possible.
• A "My Customizations" feature can be added to a customer's account, where they can name and store their unique flower arrangements, and order again in future.

HOW DO PEOPLE FEEL?

I reached out to a few people in my social circle to test out my simple prototype as I wanted some feedback about the abovementioned features. To my pleasant surprise, I received a number of constructive comments about how I could improve them and fix areas that I overlooked.

FEATURES ITERATIONS

Following up with the valuable feedback, I created second wireframe iterations for the flower shop features. Here are before and after comparisons with changes written in bullet points below:

FLOWER GUIDE ITERATION 1

FLOWER GUIDE ITERATION 2

• Flower image is flushed to the left to improve readability.
• Colour pills are added so that users are aware of what flower colours are available in this store.

MINI FLOWER GUIDE ITERATION 1

MINI FLOWER GUIDE ITERATION 2

• More breathing space is added for each flower section.
• Like the full guide, a filter catalog button is added so that users can browse the items they are interested in more efficiently.

CUSTOMIZATION ITERATION 1

CUSTOMIZATION ITERATION 2

• Instead of only a quantity toggle, an overlay will appear when users click on the '+' icon on a flower. There, users can adjust desired quantities and colours.

SAVE CUSTOMIZATION ITERATION 1

SAVE CUSTOMIZATION ITERATION 2

• Instead of placing it at the sidebar, the save customization box will be shifted to the bottom of the screen. As users scroll the page to complete their customizations, they can review them at the bottom, providing a smoother user flow as well as allocating more breathing space to the earlier segments.

MOCKUPS

I designed some high-fidelity mockups with real images of flower arrangements, fonts and colours to mimic what the online flower shop could look like embodying the features.

LANDING PAGE

SHOP ALL CATALOG

FLOWER GUIDE

MINI FLOWER GUIDE ON CATALOG SCREEN

CUSTOMIZATION

FLOWER SELECTION ON CUSTOMIZATION PAGE

LOOKING BACK...

This case study was done almost a year ago. Revisiting it has opened my eyes to new areas of improvement on how I would design differently to further improve user experience.

CONCLUSION

This case study, although self-initiated, has brought about many learning points for myself, especially how usability testing is a powerful tool to upgrade designs for optimal user experiences. On top of that, projects like this automatically creates a platform for myself to exercise creative freedom, and to learn or sharpen UI skills on tools like Figma and Adobe XD.