Designed responsive small flower arrangement shop website to streamline customer browsing and ordering.

Responsive web design




User experience, user research, visual design, user testing, prototyping


Figma, FigJam, Otter.ai, Google workspace


4 weeks


Florana is a small business based in Monterrey, Mexico. It likes to accompany its customers in their history, in their most special events, that is why the company is dedicated to make floral arrangements and / or balloon structures that reflect the personality of the person who receives them. It also offers theme workshops. Florana's values are creativity, inclusivity, love, and honesty. It offers its products through Instagram and Facebook which does not help in providing options for the customers to choose from.

Note: Through the end of the project, the business owner consider in switching to event flower arrangements only. Thus, the website wasn't created future work will focus on this new direction.


Florana is a small business based in Monterrey, Mexico. It likes to accompany its customers in their history, in their most special events, that is why the company is dedicated to make floral arrangements and / or balloon structures that reflect the personality of the person who receives them. It also offers theme workshops. Florana's values are creativity, inclusivity, love, and honesty. It offers its products through Instagram and Facebook which does not help in providing options for the customers to choose from.


Floriana's current system hinders both flower buyers and workshop attendees. Flower buyers struggle to find the perfect arrangement due to time-consuming browsing, limited product information, and inflexible customization options. Workshop attendees have limited scheduling options, restricting participation for busy lifestyles. This reduces sales, engagement, and ultimately, Floriana's impact.


A centralized e-commerce website which allows flower arrangement browsing, customization, and ordering, while offering a flexible workshop scheduling system. This improves the customer experience and boosts engagement.

Some screens are displayed

Let's explore to understand
the problem


What is Florana and its competitors doing?

I performed a competitive analysis to better understand Florana and its competitors in how they provide their products to their customers. The competitors were provided by Florana.

Key insights

  • Enviaflores and Cocoita provide an online catalog that enhances the browsing experience, enabling customers to easily explore and purchase their products. Within this catalog, they prominently feature their best-selling items, serving as eye-catching focal points on their website.

  • Enviaflores and Cocoita offer flower arrangements for gifts whereas Splendora offers floral arrangements for both grand events and thoughtful gifts.

  • Enviaflores and Cocoita have a dedicated website to offer their products. Maintaining a website enables them to reach a wider audience and increase their sales.


Is a website really the solution?

We dug into what Florana's customers liked (and disliked!) about her Facebook and Instagram presence. This helped us see if a website could be a better fit, and uncover any hidden frustrations or needs they might have.

28 participants

Answered the survey done in Optimal Workshop


of participants have used a competitor's website to make purchases


of participants preferred for Florana to have its own website


of participants preferred Florana's social networks


of participants had no preference website or social networks


participants expressed a desire for an online catalog that's up-to-date and organized by categories


Uncovering user pain points and needs

To understand Florana's customers better, I jumped on video calls with 5 amazing people in Mexico, aged 25-65. We chatted about their experiences with Florana and similar businesses. I used a handy interview guide to keep things focused, and Airgram for Spanish transcriptions.


"What I don't like about Instagram is that everything goes down, and when I want to search for something, it takes me a long time to find it"

“I don't know much about flowers, and I appreciate it when they offer me options”

“I don't know much about flowers, and I appreciate it when they offer me options”

“But if I have to stop it then I have to figure out like which episodes I'd have to start like there is no tracker”

From understanding to defining


Connecting the dots: Unveiling User Insights

After analyzing and synthesizing the participants' answers, I unveiled some

Beyond Beauty: The Emotional-Practical Tango

Floriana's customers aren't just buying flowers, they're sending emotions. Striking arrangements are key, but so is practicality. Users crave reliable delivery, flexible payment options, and budget-friendly choices.

Crystal Clear Catalog, Confident Decisions

Imagine a user staring at blurry flowers on a cluttered page, unsure of price or availability. Not ideal! Users prioritize a well-organized catalog with high-quality images, detailed descriptions, and clear pricing. This empowers them to make quick, informed choices with confidence.

The Power of Choice: From Pre-Made to Bespoke:

Some users love browsing ready-to-go arrangements, while others crave a more personal touch. We need to cater to both! The website should offer pre-designed options, flexible customization features, and even a "build-your-own" experience with expert guidance from Floriana. This gives users the freedom to create unique and meaningful floral expressions.

Workshops Made Easy

Users want clear workshop information and scheduling details readily available, not hidden in Instagram stories. Flexible timing options cater to busy lifestyles and maximize workshop participation.


Who I design for

Based on the user interviews and affinity mapping, I created 2 user personas which represent the target audience.

HMW create a seamless and delightful floral experience that caters to diverse needs, simplifies purchasing, and empowers customization?


Defining the goals for a clear direction

I aligned with the client on project goals to ensure a clear direction before brainstorming features.




From user needs to must-have features

Drawing on the user research insights and aligning them with the project goals, I created a comprehensive feature set. Through collaborative discussions with the client, we prioritized functionalities based on their importance and impact. This process resulted in a clear distinction between "must-have" features critical to the core user experience and "nice-to-have" features that could be considered for future iterations.


  • Account Creation

  • Landing Page

  • Search bar

  • Search results page

  • Filter

  • Catalog categories

  • Product information for flower arrangements

  • Product information for workshops

  • Customization options for flower arrangements

  • Flexible Workshop Scheduling

  • Expert Support in Arrangement Selection/Order


Blueprint of the MVP

Having identified the key features to prioritize, I developed a sitemap to provide a clearer visual representation of the website's structure.


Mapping the user journey

After defining the features and their structure, I also established user and task flows to help both Florana and its users efficiently achieve their objectives.

Defining brand voice and visual language


Florana's visual identity refresh

Floriana's existing logo, created with pre-existing assets in Canva, didn't fully reflect her unique brand identity. To establish a stronger visual foundation, we decided to embark on a logo redesign before diving into the website sketches.

Previous logo on instagram

New logo

Logo for website

Logo for merchandise


Unveiling florana's essence

To capture the heart of Florana's business, I collaborated with the client to uncover their existing brand values. Through open discussions, we refined and solidified these values, ensuring they accurately reflect the brand's philosophy. With a clear understanding of the brand's DNA, I then crafted a cohesive brand style tile.

Brand's values

Embracing innovation

Constantly pushing the boundaries of floral design, crafting unique arrangements that surprise and delight.

Celebrate everyone

Flowers are a universal language of love and appreciation. Our arrangements are designed to make anyone feel special.

Honesty is the best policy

Clear communication and fair pricing. What you see is what you get – no hidden fees or surprises.

Brand style tile

Transforming ideas into solutions


Designing the features

Building upon the identified user needs and prioritized features, I designed low-fidelity wireframes. These wireframes served as the blueprint for the Minimum Viable Product (MVP), focusing on the essential functionalities and user interactions.

Flow 1 - Expert guidance customization

Flow 2 - Workshop interest inquiry form

Flow 3 - Selecting flower arrangement


Enhancing clarity

To give the client a clearer picture of the website's structure and interaction flow, I created mid-fidelity wireframes. These wireframes go beyond basic functionality by introducing a more defined layout and preliminary visual hierarchy. While final color palettes and fonts are reserved for the high-fidelity stage, the mid-fi wireframes establish the foundation. The wireframes were created for both mobile and desktop.


Crafting the UI component library

With the brand style tile established and mid-fidelity wireframes in hand, it was time to develop a UI Component Library. This library serves as the foundation for Florana's digital presence, ensuring consistent brand identity across all user interfaces.

For Florana, the brand essence aimed to evoke a feeling of freshness and delicate beauty. Eucalyptus emerged as a natural symbol that embodied these values. This theme subtly influenced the selection of the CTA color.


Bringing the design to life

With the brand identity established, I then started to design the high-fidelity (hi-fi) wireframes. These hi-fi versions represent the final visual design, incorporating color palettes, typography, and high-quality imagery. This level of detail allows me to present a polished and realistic representation of the website to the client. Through internal reviews and discussions with the client, we can ensure the design aligns with Florana's vision and objectives before proceeding to user testing.

Let's test it!


Testing the prototype

To gather user feedback on the design, I conducted an unmoderated usability test, using the tool Lyssna, with six participants.


  • Send a request for Expert Guidance on a Flower Arrangement.

  • "Pre-book" a Workshop.

  • Request a pre-defined Flower arrangement.

Success metrics

  • To assess the design's success, I defined the following key metrics:

  • Users are able to locate the Expert Guidance Customization Form in less than 5 min (300s)

  • Users are able to complete the Expert Guidance Customization Form in less than 10 min (600s)

  • Users give an average of 4 in content being clear

  • Users give an average of 4 in content meeting their expectations

  • Users give an average of 4 in the process to request a flower arrangement/workshop/expert guidance customization to be straightforward

  • Users are able to understand the purpose of the "Expert Guidance Customization Form"

In addition to asking users to rate each task, I included open-ended questions to address any difficulties, confusion, or areas where they felt improvements, changes, or removals were needed.


While most participants provided favorable ratings for the tasks, a primary concern emerged regarding the desire to perform all tasks directly from the home screen, rather than having to navigate to the menu screen each time. The feedback was ordered according to the frequency and severity mapping; however, given the limited amount of feedback received, I have decided that, for the next iteration, I will address all feedback, regardless of its severity or frequency.

Refining for a better experience


User feedback improves functionality

I made changes aimed at enhancing the test's usability, ensuring that users can complete the task quickly and with minimal clicks.


Visualizing the improved experience

Incorporating valuable user feedback from previous iterations, I desgined the final, high-fidelity prototype.


Design on desktop

While the initial design and prototyping focused on mobile, considered the user's preferred device, the project also consisted in designing for desktop. Thus, embracing the responsive design


Try the prototype

Click through the prototype below

Embracing the journey

Next steps

  • Centralized Organization: This project highlighted the importance of keeping all project assets organized in a single location. In the future, I'll prioritize using a unified document or design system for deliverables, promoting efficiency and clarity.

  • Product New Direction: As I mentioned before the client considered in switching to event flower arrangements only. That would mean to design an entirely new website. So, starting a new project with this new direction.

Lessons learned

  • Remote Collaboration: Working with a client in a different time zone (Mexico to Germany) presented challenges. Translating user interviews from Spanish and coordinating schedules were hurdles. We addressed this by mutually agreeing on English as the project language (for case study purposes). This emphasizes the importance of adapting communication strategies for remote collaborations.

  • Prioritization and Time Management: The project demanded building a responsive website with limited time. This meant prioritizing features and breaking the design process into manageable steps. This highlights the importance of having the ability to adapt to time constraints and make strategic design decisions.

  • Early User Feedback: The project reinforced the importance of early user feedback throughout the design process. It's a continuous loop, not a linear path. Early feedback allows for course correction and ensures the final product aligns with user needs.

  • Collaborative Design: This project echoed the power of design as a team sport. From user interviews to client meetings, collaboration fosters a thrilling and fulfilling experience, ultimately leading to a solution that bridges user needs and client vision.

See Other Work


Mobile app to help immigrants in their immigration process.







Adding a feature to help readers effortlessly manage their series and stay informed on their reading.

Adding a feature to help readers effortlessly manage their series and stay informed on their reading.

Adding a feature to help readers effortlessly manage their series and stay informed on their reading.

Add a feature


Let's make something
awesome together!


Copy email

Email copied!

© 2024 Claudia De León