Florindo

Florindo is a bouquet preview app that allows users to create a customized bouquet. It was my first hands-on project, designed as an exercise for the Google UX Design Certificate, and its main goal was to help me develop practical skills as a UX Designer. 

Role: UX and UI Designer

Period: March - October 2024

In the beginning, there was nothing…

… but the project prompt:

“Design a bouquet preview app
for a trendy florist.”

… and the Design Thinking process:

Source: Google UX Design Certificate - oct/2024.

The first step was to know my user…

In the Empathize and Define phases of the design process, I had to answer three main questions:

  1. Who are my users?

  2. What are their needs?

  3. What is the problem I am trying to solve?

I identified my primary user group as adults who enjoy buying flowers to decorate their places.

This analysis also allowed me to identify that people buy flowers to give to others on special occasions. Sometimes, they don’t have enough time to go to the florist in person, or they have to order from poorly designed websites and apps. Problems included outdated catalogues and no option to customize the bouquets as they wanted.

With all the information, I could identify the User Experience Pain Points, define the Problem Statement, represent the main Persona, and create a User Journey Map.

User Experience Pain Points

Persona

User Journey Map

Problem Statement

Clara is a creative young adult who needs to buy customized flower bouquets because she wants to decorate her shop in an exclusive and welcoming way.

Houston, I have a problem! And I need a solution.

Now that I knew the problem, I started thinking about how to solve it in the Ideate phase of the process.

Storyboards, Wireframes, and User Flows were created to visualize users' steps in buying a customized flower bouquet. The paper Wireframes were particularly important because they were the first screen-related deliverable and allowed me to consider how to organise information for the user on different screens.

Storyboards

User flow

The primary user flow outlines the steps for creating a personalized flower bouquet using the Florindo app. It should allow users to search for different flowers, select their preferred blooms, and choose a vase. After making their selections, users will see a preview of the bouquet they have created. If satisfied with the preview, they can proceed to the checkout to purchase their custom flower arrangement.

Digital wireframes

Low-fidelity prototype

Keeping the primary user flow in mind, I created low-fidelity digital wireframes to illustrate the layout and structure of the screens. This task turned out to be more complex than I initially anticipated.

I realized that the user flow was not completely aligned with our objectives. Specifically, the "Bouquet Preview" screen, which appears only after selecting all the flowers and the vase, was positioned too late in the process.

Our intention was to enable users to see the bouquet "construction" as they selected each element, rather than only at the end. To address this, the screens involved in this customization task now feature a preview area that displays a partial view of the bouquet. The "Bouquet Preview" screen still remains at the end as a final review step before checkout.

Other design decisions were made to support the app features and allow users a suitable experience.

Instead of only focusing on the screens for the primary user flow, I spent more time on this task and created supplementary screens for the app, as this project was an exercise in developing my hands-on skills. In total, 22 screens were created.

The low-fidelity prototype creation was the next step in the design process. While connecting all the screens, it was possible to find some gaps to complete the entire user flow for the bouquet customization. This way, a back-and-forth approach was necessary to add buttons, screens, and connections.

Paper wireframe

Ok Houston, we have it! Now, the look-and-feel.

The final step of this project was to concentrate on the app’s interface to create the high-fidelity prototype. Once there was no real client/business behind this project, I made all the decisions about color, typography, iconography, and images to suit the idea that flowers are a fresh, bright spark of joy in someone’s life.

Logo

Icons

Colors

Typeface

Two sans-serif fonts were chosen to keep the app minimalistic and modern. Poppins is the type family used all over the app, including in headings and text. Only buttons and the navigation menu use Roboto.

Mockup

Developing the high-fidelity mockup screens took many iterations since they were created as I advanced in the study course, and new knowledge was constantly brought in. Also, many details that weren’t noticed before need to be added to clarify and orient the user in customizing his bouquet and make his experience more accurate and satisfying.

High-fidelity prototype

The Florindo high-fidelity prototype is the final design product representing how users can use the Florindo app to complete their bouquet creation and add it to their cart.

Ufa!

Because of the nature of this project as being an educational exercise only, I can’t give metrics of impact on business, users, design culture or processes as would be expected. But by the end of this project, many things had impacted me and how I perceived the design job.

  • I am a designer!  I’ve worked as a Computer Science university lecturer for many years and advised many students in their end-of-course research and development projects. However, this was my first project where I had to be the “doer”. It was a solo job, and I had to do everything by myself: understand the design process, study the design concepts, learn how to use Figma, edit images, and so on. This was crucial to really put me in a designer's shoes. I could build on my existing knowledge and gain much more.

  • Feedback is essential for the evolution of design. That is an enormous failure of the Google UX Design course since you have to do everything alone and don’t have a mentor or peers to work with. Sometimes, the doubts pile up. With some punctual help, you can achieve much more as a designer.

  • You have to decide when to stop. Otherwise, it will be an endless job since we can continually improve our design. Defining when the goal is reached is vital to move on to the subsequent phases or other projects.