Petal Pop

September 2025 — October 2025

Robert Xu
Presented by Robert Xu
Project for Google UX Certificate
Petal Pop login screen mockup Petal Pop custom request mockup

Table of
Contents

Project
Summary

Petal Pop is a modern flower shopping and arrangement app that reimagines how users discover, design, and purchase floral creations. Built with a soft gradient UI, intuitive flow, and elegant aesthetics, Petal Pop combines the artistry of floristry with the simplicity of digital shopping.

The app allows users to browse curated collections and design their own bouquet, with seamless checkout and delivery tracking. PetalPop’s interface emphasizes visual appeal and emotional connection, helping users express love, celebration, or gratitude through flowers that reflect their style.

Petal Pop home screen mockup

Role and
Responsibility

PetalPop decorative image

Define Goals

Goals

Goal 1

Simplify the flower shopping experience through an intuitive and effortless app design.

Goal 2

Empower users to express emotion and creativity through custom floral arrangements.

Goal 3

Deliver a visually delightful and emotionally engaging checkout experience.

Empathise With User

User Pain
Points

Frustrated users while shopping for flowers

User Personas

Emma Liu - User Persona
Emma Liu - User Persona

User Journey Map

Visualizing the emotional and functional flow of a user’s experience with Petal Pop — from discovering flowers to completing their purchase.

User journey map showing stages, emotions, and opportunities

Creating the Problem Statement

Many users struggle to find personalisd meaningful floral gifts due to confusing interfaces and limited creative options.

Solution

Petal Pop is a modern user friendly shopping app designed to make buying flowers fast, simple, and enjoyable. The app allows users to browse a beautiful range of bouquets, save their favorites, and order them instantly, all with a few taps. Alternatively users are also able to customise their very own flower bouquet and arrangements.

Petal Pop app screens showcasing the solution

Starting the Design

Paper
Wireframes

Drawing the paper wireframes for the app, I prioritised which functions would provide the most value to users. For the home screen, I explored multiple layouts to offer different ways to browse and shop quickly.

Wireframe A Wireframe B Wireframe C Wireframe D Wireframe E Wireframe F

Digital
Wireframes

I overall decided to keep the searchbar as a standalone element. I placed buttons for the main navigation for easy shopping.

PetalPop digital wireframe phone mockup
Variety of elements on home page for fun easy shopping
Banner allows user to discover sales and seasonal items

Testing results

I conducted two rounds of usability studies. Below are the key findings.

Round 1

Core issues found

Users were unsure how much the “Rotate” and “Zoom” button rotated or zoomed in for.

Users reported there was no account feature so they could not save their ‘favourites’.

Users wanted to order flowers quickly.

Round 2

What to include/remove for the hi-fi prototype

Having a favourites button directly next to the product rather than having to click into the product.

Options to create custom arrangements rather than just picking preselected ones.

Banners and buttons should have a clear difference.

Refining the Design

Mockups

Customers wanted to order fast, so I added a ‘Shop Now’ button combined with a Hero Image. After the usability studies I added vibrant colours, an account feature and an instant save feature. I am thinking about adding drop shadows to make the images less flat.

Wireframe mockup
Final mockup

From the usability study the rotate and zoom button were unclear to use. Pinch to zoom is also an option I could have used. I also added a customise button to add/change arrangements. In future designs I may want to add what the arrangement includes to give users a more transparent purchase.

Before usability changes mockup
After usability improvements mockup
Final PetalPop app mockups showing key user flows

Accessibility Considerations

Consideration 1

Illustrations and icons to help users better understand designs.

Consideration 2

Followed color contrast accessibility standards for buttons and written content.

Consideration 3

Interactive elements such as buttons, cards, and icons are designed with adequate spacing and minimum touch sizes.

Prototype

Prototype Interaction

PetalPop interactive prototype demonstration
View Interactive Prototype

Going Forwards

Going Forward

Impact

The Petal Pop app empowers users to feel confident buying flowers online with complete transparency.

What I Learned

I learnt that design comes from continuous user research and figuring out pieces of the puzzles. Each iteration revealed new ways users interacted with the app. It taught me that user research is not a one-time step but an ongoing conversation.

User Feedback Quote

“Being able to save my favorite bouquets is such a nice touch. It makes future shopping way faster.”

What I Would Do Next Time

Design With Accessibility From the Start

I have to make sure to obey WCAG standards! I realised designing with accessibility in mind should be built into every design decision I make and not just added after testing around.

Explore More Design Options

If I could redo this project I would want to prototype more design reiterations — exploring a wider range of colour palettes, typography, layout, better use of whitespace, drop shadows, and different interaction methods such as a dropdown or navigation bar. This would allow me to uncover more innovative and visually appealing design solutions.

Think Beyond the Interface

While I focused a lot on Petal Pop's look and functionality, next time I would pay more attention to the emotional experience. Asking questions like “How would the user feel about this design?” helps create a memorable experience rather than just clicking buttons on a screen.

Conduct More Research

I think my biggest mistake when creating this project was not going in-depth enough in user research. I could have conducted more research on competitors, trends, and users, which would have led to more confidence in the original wireframes. Furthermore, I primarily relied on secondary sources such as local flower sites and online articles. I needed to focus more on primary sources like field studies, user interviews, surveys, and questionnaires to better understand how people buy and choose flowers in real life.