Streamlining wedding florist inquiry process to enhance the user experience and increase conversion

ROLES

UX Researcher

UX/UI Designer

TIMEFRAME

80 hours

TOOLS USED

Figma

Adobe Illustrator

PROJECT TYPE

Client Project

Responsive Web

BACKGROUND:

Who are The Flower Girls?

The Flower Girls is a local floral and wedding coordination business based that manages inquiries through Instagram, lacking a fully-responsive website.

The Flower Girls is run by Michelle D., a skilled florist and wedding coordinator with over ten years of experience. Michelle and her team have a dated website linked to the business’s Yelp page, but it lacks high website traffic and conversions. Michelle is looking to expand the business’s online presence with an updated inquiry process.

“Our website is outdated - there is only so much information that we can convey on the Instagram page. We need an improved web experience and a brand refresh in order to properly convey our inquiry process”

-- Michelle D., Business Owner

THE PROBLEM:

The Flower Girls' outdated website results in a discrepancy between client expectations and the actual quality of service.

The lack of an efficient and streamlined inquiry process puts a burden on the team, leading to additional workload and inefficiencies.

While Michelle and The Flower Girls have stellar reviews on Yelp (5-star rating), their dated website does not accurately reflect the quality and creativity that they are known for.

Furthermore, operating from their Instagram page limits the small business’s potential to expand its client base. Messaging Michelle through Instagram increases the “back and forth” between Michelle and the client. This could deter potential clients while waiting for a response.

The task at hand:

Redesign a responsive website and refresh the brand identity for The Flower Girls, focusing on an application/inquiry flow to best accommodate both business and user goals

Poor Accessibility

Outdated branding

Unresponsive on mobile

Lack of streamlined inquiry process

Redesign with accessibility in mind

Update brand image

Improve current inquiry process

Design a responsive site

Business Goals

Before starting other research, I interviewed the client to understand how she defines success.

Improve user trust/confidence to work directly with The Flower Girls

Increase their website traffic, increase the number of people who inquire directly on website

Increase # of bookings outside of wedding season months

Maintain a high customer satisfaction rate

HEURISTIC EVALUATION:

Auditing the Existing Design

I carried out a thorough audit of the existing website, assessing the current shortcomings based on accessibility and usability principles. This audit also helped convey the site’s core accessibility issues to non-designers.

ISSUE #1:

Poor accessibility coupled with low image quality

The landing page currently has no content other than a dated hero image and a navigation bar, making it difficult for first-time users to understand who The Flower Girls are and what they do.

ISSUE #2:

Challenges with Visibility of System Status in the Contact Form

Currently, the simple contact form requires a subject and message before the user hits the “Send” CTA. The “Send” CTA does not have a hover or focused state, and this lack of affordance and visual clarity could cause user confusion or bounce rates.

Furthermore, the client requires other information, such as the wedding date, in order for a formal consultation. Therefore, form fields should be changed to reflect the necessary information required from the user.

ISSUE #3:
The font choice and absence of a clear visual hierarchy hindered efficient page-scanning.

The website suffers from a strong imbalance of content distribution - there’s either no copy (providing no context to their floral services and background) or too much text (as in the case of their About section), making it difficult to read and comprehend.

RESEARCH

USER SURVEY

Users prefer inquiring directly online instead of by phone

In order to better understand user expectations when visiting a florist’s website, I conducted a user survey with 18 participants that had experience working with a wedding florist, or were interested in booking a florist for an upcoming wedding/event.

66.7%

of participants stated that the website design and overall aesthetics contribute greatly to their decision of choosing a floral designer.

55.6%

of participants prefer to book an intake call or consultation through the florist’s website.

44.4%

of participants believe that understanding the florist’s booking process is somewhat important in order to feel more comfortable knowing what to expect.

USER INTERVIEWS:

The user interviews were very insightful, particularly in terms of the subjects’ thoughts and feelings towards making an inquiry.

I spoke to 5 users interested in booking a florist for their upcoming wedding or event. I aimed to understand what motivates users to inquire for estimates, uncover potential pain points, and learn more about what users expect to see on a florist website.

Participants

5

Age

26-42

Type

Remote, Zoom

Here are the key themes, derived from affinity mapping.

THEME #1:
Social anxiety is a barrier to inquiry - rejecting a wedding vendor after receiving an estimate is uncomfortable.

A common barrier for potential clients is social anxiety, with 4 out of 5 users expressing concern about initiating a consultation due to fear of receiving an unaffordable price estimate.

“When you have to initiate, it's a hard thing to go through and talk to a stranger and then tell them no thanks. If I knew what your costs were upfront, then I could pinpoint if I should reach out or not.”

THEME #2:
Fear of articulating their floral vision inaccurately

There is a common fear among users that their florist may misunderstand their vision, resulting in inaccurate execution on the biggest day of their lives.

“I find it difficult to accurately communicate the kind of flowers I wanted.”

THEME #3:
Lack of knowledge of flower seasonality and substitutions

All five interviewees demonstrated a limited understanding of floral design and associated costs, resulting in potential overspending. The lack of knowledge about floral design and the inquiry process is prevalent among couples who are working with a florist for the first time.

“When it’s your first time working with a wedding vendors, I feel like you never really understand what you need”

COMPETITIVE ANALYSIS

The competition lacked a way for users to check if their wedding date is available prior to inquiring for an estimate.

3/4 competitors DO NOT showcase color palette options within their gallery. This could potentially be helpful for users who lack a clear vision or are indecisive on color scheme.

3/4 competitor websites DO NOT provide expectations about the floral booking process. This gap in understanding could potentially be an opportunity for a solution.

Being able to check date availability could potentially be a solution for both the business and the user, saving time and effort.

DEFINE AND IDEATE

USER PERSONA

Meet Melissa, the Perfectionist

Melissa is looking to hire a florist for her wedding. She has a strict budget without room for compromise. It is her first time working with wedding vendors and she wants to ensure that her big day matches her vision.

USER JOURNEY MAPPING

A more holistic view of Melissa’s experience

A “Current State” and “Future State” journey map helped the client visualize the current user journey navigating the Flower Girls website. With Melissa’s needs and pain points in mind, I created a future state map that addresses potential opportunities and outcomes for the new responsive site.

How might we help couples undergoing the wedding planning process feel confident that their florist will accurately execute their vision?

BRAINSTORMING IDEAS

From Research Insights

Design Decisions

With my research synthesized, I completed two rounds of collaborative ideation sessions using timed constraints to turn research insights into solid design decisions.

DESIGN INSIGHT #1:
Inform users of what to expect prior to making the first point of contact

To minimize uncertainty to inquire, the website could benefit from an updated content strategy that provides necessary information of ser and expectations of the booking process.

DESIGN INSIGHT #2:
Provide education and guidance on floral design elements

Providing education and guidance on floral design elements, such as seasonality and substitutions, is crucial to help couples execute their vision and stay within their budget.

DESIGN INSIGHT #3:
Incorporate visual aids like a wedding portfolio to help users share their preferences and inspirations through an online inquiry form

Emphasize the florist's commitment to understanding and executing the client's vision accurately on the website, and provide guidance on aesthetic scope and vision.

Incorporate a section in the inquiry form for users to optionally share preferences for their big day.

SITE MAP

Structuring the User Experience

The old IA had 5 main pages, including a ‘Packages’ page. This IA was consistent with other florist websites. Recent sales have indicated that wedding packages are unpopular due to a lack of customization and limited options. Therefore, the client opted for a ‘Services’ page with an updated content strategy for both Full-Service and A-La-Carte floral designs.

DESIGN

LOW-FIDELITY SKETCHES

Low-Fidelity Sketches for quick ideation of page layout

With the user and task flows handy, I sketched options for page layout, including a single and multi-step inquiry form process. I opted for a multistep form to make the amount of information requires appear more organized and less overwhelming.

Mid-Fidelity Wireframes

Fine-tuning the layout and interaction design

Translating the sketches into mid-fidelity frames helped test the content design and interaction design and gain feedback from the client and other designers early before moving into high-fidelity.

Mid-fidelity desktop “Home” screen (left) and desktop “About” screen (right)

BRANDING

Expressing a friendly and inviting visual identity

I collaborated with the client to discuss a new branding direction. She wanted a complete brand refresh, noting that the previous sage brand color felt “cold” and “uninviting.” With brand values in mind, I updated the logo for a more refreshed, modern look.

The Flower Girls’ brand values: Friendly, Inviting, Transparent, Delightful, Creative

TESTING AND ITERATIONS

Assessing confidence and comfort level with the new inquiry process

I conducted moderated usability testing via Zoom with five users in the target user base. I focused mainly on quantitative data using a Likert scale (1 - 5) to assess confidence levels, comfort levels, and ease of use.

SUCCESS METRICS:
The design will be successful if...

It quickly and clearly conveys information about who the Flower Girls are, and what they offer.

Clarity of copy and information: 4.6

It evokes trust and confidence in the business and its services.

Comfort level with inquiry form: 4.6

It is simple to navigate, evoking user comfort in making the first point of contact.

Ease of navigation: 5.0

Here are some key findings after organizing verbatim quotes, first impressions, and nonverbal observations within an affinity map:

The redesign felt more professional and inviting, inspiring confidence to work with The Flower Girls.

“I feel like this is kind of the optimal florist website - it clearly lays out services, expectations, and a timeline. It makes inquiring less anxiety-inducing because it gives a starting point to talk about”

Overall, the new inquiry form’s questions evoked comfort and enhanced willingness to inquire with an average comfort level rating of 4.6.
  • 5/5 users stated that they were pleasantly surprised with the vision preferences on the inquiry form, and expressed greater confidence in inquiring.

“If you didn’t have that [vision preferences] on the inquiry form, I think I'm kind of left wondering… as a creative does this person not want my input? I think that's why it does feel more inviting.”

“There was no point that I felt like there were too many questions or that the questions were invasive”

The clarity of content scored an average rating of 4.6 - users were able to articulate the differences between the types or services offered.

“I appreciate the clear breakdown of services - it takes the guesswork out of what to talk about in the consultation call”

Prioritizing Iterations

After discovering common themes, I placed them into a prioritization matrix to prioritize the changes. The high-impact, low-effort findings are therefore the most “severe.”

Here are the high priority key findings and the iterations they inspired:
FINDING #1:
Users felt slight hesitation towards inputting an exact budget on the form.

To minimize hesitation, I changed the form field into a dropdown where users can select a budget within the user's desired range. This helps avoid potential hesitations in completing this form.

Before
After
FINDING #2:
The copy within the service cards was not presented in a digestible format.

I enhanced the clarity of service cards to clearly articulate the unique benefits of each service.

Before
After
FINDING #3:
Users expressed confusion on the necessity of the “Where are you in your planning?” question.

Users felt that the question wasn’t necessary, and one user expressed hesitation in answering due to fears that the business might treat her differently if she picked “just getting started” vs. “ready to book.”

To align with the business goals of maximizing inquiries, I opted to remove this question from the form as it currently served as a potential barrier to inquiry.

Before
After
THE SOLUTION:

The Final Desktop Screens

A transparent, inviting homepage

The new hero image and headline give the user a reason to scroll, advertising a transparent Full Service minimum of $2000 from the get-go.

An explanation of their booking process is clearly outlined

A clear comparison of the differences between The Flower Girls and a traditional florist are highlighted, clearly outlining the unique selling point of the business.

Wedding date availability checker that streamlines inquiries, saving the user time and effort

Users can check the availability of their wedding date prior to completing the multistep inquiry form

This streamlines the business’s inquiry process and minimizes double bookings or phone calls.

An online inquiry form with the option to input vision and color preferences provides a more delightful user experience and enhances confidence to inquire.

A source of visual inspiration to enhance user confidence

Users now have a more visual context of the color palettes and bouquet shapes designed in previous weddings

The beginning of the gallery features wedding portfolios that showcase previous designs

MOBILE SCREENS:

Screens optimized for mobile

REFLECTIONS

KEY TAKEAWAYS
The success of the website lies in finding the sweet spot where user goals are met, ensuring a delightful user experience, while simultaneously achieving the desired business outcomes.

This project was my first with a real client and actual users. The challenges of having to design a real-world project helped push me to determine what was necessary to deliver the MVP and stay focused on designing with real users in mind. I gained valuable experience in working with a client and balancing user and business needs.

  • Perform round 2 of usability testing on the high-fidelity prototype

  • Complete the design handoff to the client

  • Finalize the design and continue to design screens for each wedding portfolio

Next steps:
Thanks for reaching the end! Read my other case studies: