Add a little mischief to your special day.
Meadow Mischief, a local floral business in the bay area of California, had a website that was in need of design work. Making the website more accessible and easily navigable for potential clients were the top priorities for this project.
Project Timeline:
4 weeks
Role:
Responsive UXUI Design
Tools:
Figma, Figjam, Canva, Notion, Google Workspace
Background
Meadow Mischief is a small, California based floral business that specializes in events, every day bouquets, and floral sculptures. Meadow Mischief is committed to creating inclusive, welcoming floral experiences for all clients, including LGBTQ+ and BIPOC individuals, interfaith celebrations, and diverse communities.
Over the past decade, the florist industry has shifted from predominately brick and mortar stores to more of a focus on e-commerce. The influence of social media has shown client's desires to move from large corporations to smaller, local businesses with sustainability and customization in mind. Websites such as TikTok, Instagram, and Pinterest have enhanced florists' online presence, which in turn, has made them more available to the general public.
The California Market Size is estimated to be $1.1 billion with 4,206 businesses open in the state. Over the next five years, the business is expected to grow from $10.74 billion in 2024 to $14.01 billion with a growth rate to be around 3.37%.
The Problem
Meadow Mischief already had a website and social media presence in place, however, the interactions and website traffic were low despite high social media engagement.
Potential clients struggled to navigate the site, with important features such as contact forms hidden or under utilized. Overall, the business itself is sound, but there is a need to update and refresh the site to make it more user friendly all around.
The Objective
How can we get potential clients to successfully utilize all the features of the website, including the call to action aspects, while keeping a fun and cute feel to the design that makes the stakeholder happy and clients wanting to utilize the business?
01. Research
Primary Research Goal and Methods
The stakeholder of Meadow Mischief and I wanted to see how people typically go about purchasing florals for both individuals and larger events. We also wanted to validate any concerns we had with the website as it was at the beginning of the project to make sure we knew what would be the most important to change. The user data was compiled through an unmoderated online survey via Google Forms, as well as through audit interviews over video call.
User Surveys
The surveys were used to learn about the habits of people who purchase flowers: where and how they purchase them, how often, their ages, and so on. The insights we learned in these surveys would eventually inform how I conducted my interviews. It was completed by 22 individuals who are a mix of male, female, and nonbinary people. The biggest participant age range was a tie between 25-34 and 55-64, both with ten participants each.
The users were fairly evenly split amongst how often they purchase flowers between occasionally, a couple times a month, and for special occasions such as birthdays and anniversaries. The most common place they purchase flowers at nearly 64% is at the grocery store or supermarket as this is the most efficient way to get them. This ties in to the background research done as special events was the most likely reason to purchase flowers.
Pricing of flowers is very important to the users when picking them up at 59% of responses, but they typically do not have a set budget for their individual bouquets bought. I was surprised at the response for a budget as I thought there would be more of a price point in place, even if it is just for a small purchase. Users were able to choose more than one option of what factors influence them when purchasing flowers and 18 of the 22 (81.8%) participants said price was the main factor. This was followed by color at 10 users (45%) and availability at 8 users (36%).
It was not a surprise, however, that the primary reason people purchased flowers was as a gift at 59% of the responses. Large life events occur less often than birthdays or anniversaries, so the result tracks. I was interested to see people are purchasing the flowers for their own personal enjoyment.
For a more in depth look at what the survey answers entailed, a link to the results has been provided: Floral Purchase Survey (Responses)
Interviews and Website Audits
Observations
Observation 1: All three of the users interviewed had purchased flowers for an event or are in the process of doing it. They all focused on the need to have a knowledgeable florist who could help them through the process of designing for their event.
Observation 2: Most users want to see a well developed portfolio with clear information about the florist and pricing for events.
Observation 3: Users who audited the website liked the overall colors and aesthetics, though they noticed some issues with scale, accessibility in contrast, and the navigation. There was too little contrast between much of the text and background. The photos on the portfolio as well as the home page were too large and out of focus to see the details clearly and needed to be condensed significantly. There were also issues finding the business's contact information or the contact form on the website in one clear place. Finally, the pricing guide was a long and confusing process to be able to download.
Secondary Research
Research was also done to find out how competitors structured floral websites, what we could learn from their successes and mistakes, and what opportunities we can utilize on the website. There were two types of competitors we found: the large corporation and the individual florist.1-800-Flowers and Teleflora highlight scale and reach, but struggle with consistency and personalization. Independent florists such as Atl Flower Co and BlumenHaus by Valen showcase strong branding and partnerships, but risk limiting appeal through narrow styles or geography.
Strengths:
1-800-Flowers sells not only flower arrangements, but also branches into other gift types such as foods, gift baskets, and personalized keepsakes to become a one-stop-shop for people looking to send gifts to loved ones.
Teleflora has fast, same day delivery and international delivery as they utilize smaller floral businesses to fulfill their orders.
Atl Flower Co partners with the wedding website company Zola to connect to engaged couples in their area to generate more clients.
BlumenHaus by Valen works well with large brands such as MeowWolf, Opalex, and Fenty Beauty on special events.
Based off of this information, we want to focus on the portfolio section of the website to showcase all the kinds of designs for events including weddings and partnerships with local businesses.
Weaknesses:
1-800-Flowers is very standardized in what they sell. Their website has a lot of redundant information and categories that overlap with one another.
Since Teleflora does not have a singular storefront they work with, what is actually given in the bouquets is not guaranteed for every purchase. There have been times clients have purchased a bouquet through their website and gotten something that looks completely different.
Atl Flower Co does not have a large region they work in. Focusing mainly on the Atlanta, GA area, they limit themselves with how many clients they will take.
Highly stylized branding such as seen with BlumenHaus, can alienate broader audiences—flexibility is key for Meadow Mischief.
With this info, we will focus on showcasing the consistency of the quality of floral work while making sure the clients will know they are getting a unique design based on what they are wanting for their event. Throughout the website, there will be examples of the florist's work, not just on the portfolio page.
Opportunities:
1-800-Flowers is widely known, has excellent marketing strategies, and can deliver almost anywhere in the United States.
Teleflora is an international company. With same-day delivery included for small bouquets and the ability to purchase for larger events, this company has a wide reach with their customers and their needs.
Atl Flower Co is verified with larger wedding companies such as Zola which adds a layer of trustworthiness to the business. It is also marketed directly towards couples looking to get married in the Atlanta area by these larger companies.
BlumenHaus by Valen is a fashion forward company that is able to work in either New York City or Las Vegas for their events instead of being stationed in one area like many smaller florists are.
What we can learn from this is the importance of showing potential clients that Meadow Mischief is able to go all throughout California. Highlighting the moveability of the business will open up opportunities to serve more clients.
Threats:
1-800-Flowers faces competition with grocery stores, especially if people are purchasing flowers for someone within a driving distance.
If Teleflora loses the local flower shops who fill the orders, they may lose the market for a large area.
Atl Flower Co risks pricing themselves out of the market. Their designs, while beautiful, are not something unique to her.
BlumenHaus by Valen is very stylized in their floral and web designs. By sticking with one type of design, they can be backed into a corner of who is willing to work with them.
We learned we need to make sure to stay in a reasonable price range to be able to get new clients to work with and showcase the work Meadow Mischief does that sets her apart from other florists.
02. Define
Defining Parameters
For this responsive website, I used testing and refining based on feedback gained through the previous section's interviews and surveys to define the structure of the website. The primary deliverables included two user personas, user flows, task flows, and point-of-view statements to help me get into the mind of the potential users to ultimately help with the designing process.
POV Statements and How-May-We Questions
User interviews and surveys gave valuable insights into the problems clients have had with purchasing flowers. Using this information, I created Point of View (POV) statements which were used in conjunction with the How May We (HMW) questions to get a glimpse into the backgrounds for designers use to gear their designs towards. This, paired with possible problems and solutions from the How May We questions, allows the design team to get into the creative mindset where they focus on thinking outside the box rather than whether the solutions may be possible.
POV
Many couples struggle to find reasonably priced florists for their weddings. The process is full of trying to find florists only for them to be out of their price range, not be transparent with the price, or do not contact them back.
How might we reassure these couples their concerns are valid and will be listened to?
How might we find a way to explain the differences in pricing in a clear and fair way?
How might we make sure they know they will be contacted within a short amount of time from the florist?
Some people want to learn how to make bouquets themselves, but don’t know where to start. They don’t want to spend money getting all the tools and flowers only to bungle the bouquet and throw it all away.
How might we create a space where people from any background can learn florist skills?
How might we reach out to the community for events?
How might we work with other local businesses to bring income to both the florist and the individual business?
Individuals who love flowers, but don’t know how to arrange them properly, have found getting floral bouquets to be a struggle if they are looking for specific flowers. Working with individual florists can be too expensive, while purchasing from a supermarket can be too impersonal.
How might we ensure the clients feel like they are paying a fair price for their bouquets?
How might we allow them to feel reassured that their vision will be seen through to perfection?
How might we compete against the easily grabbed supermarket bouquets?
User Personas
The user personas, based on the POVs and HMWs, give us a deeper insight into who we are designing for. This is giving a "typical" potential user a face for designers and shareholders alike to look to for the ultimate prototype and what would be most beneficial for them in the long run. Users interviewed and surveyed tended to be in one of two categories: either those getting or recently married, or those who purchase florals as gifts. These findings were used to build the two personas I was designing towards for the website.
Ari is a married, nonbinary person who is planning for their wedding anniversary coming up soon. They want to use a local florist who will help them customize a sculptural bouquet for their partner. For Ari, working directly with a florist to get the design of the floral piece is important, so having that open communication via the contact form is vital to a good experience for them.
Guinevere is a newly engaged woman looking for a florist to help decorate for her wedding and can take charge of the design of her arrangements and bouquets in a timely and professional manner. For Guinevere, making sure open communication on all aspects of the process is important. Making sure there is clear pricing, well explained timelines, and up-front expectations are what she needs from a florist.
Both of these highlighted needs for an accessible website with simple navigation and clearly stated information. They also need to have open communication and ways to contact the florist, which tie back to the contact form as well as a section detailing the best way to get in touch with the owner.
For a closer look at the personas, click here.
Task Flows
Based on of the personas, I created three task flows in order to see what pages need to be involved in the processes. These three tasks included downloading the pricing guide, submitting to the contact form, and checking the services and portfolio pages. These are the actions users are most likely to complete when visiting the site for the first time, so we were wanting to highlight those flows in the design process.
The new flows, specifically for downloading the pricing guide, simplified the steps the users struggled with in the original design. This became the rough outline to the whole project by showing what needed to be prioritized in the redesign and how we wanted to restructure some of the navigation to make it more user friendly.
User Flows
Creating the user flows ensured key tasks would be designed with the users in mind by showcasing where they would have to make decisions in the process. The tasks were the same as those from the task flows, but this included the more in-depth steps and possibilities that could contribute to the user's overall experience.
For example, users used to go through a checkout process to download the pricing guide, but with the process changes, now they can access basic information clearly displayed on the page which will alleviate some of the user's fatigue in filling out endless forms. If they want the a la carte information, then they can sign up for the email newsletter, but they will not need to input their mailing address information any longer.
Likewise, the portfolio will be organized by event rather than only showcasing the weddings and the couples Meadow Mischief designed for. This will make it easier for users to see the wide range of arrangements they can use for their events.
Design
Overview of the Design Process
Redesigning this website for Meadow Mischief was a process of iterations. While there was an overall guideline of what the stakeholder wanted to include on the website, much of the navigation needed to be reassessed and reconfigured. The goal was to make a clean and charming website that could invite potential clients to find out more about the business. Each decision was made with the idea of functionality in mind while keeping the branding in mind.
Low Fidelity Sketches
Beginning with the sketches for low fidelity, each web page got a couple options before I chose the best design to move forward with for the mid-fidelity prototype. The stakeholder wanted to keep a whimsical design style in mind, so we tried to keep some of the "doodled" elements, such as the scallops and wave patterns, while maintaining a professional overall look.
Mid Fidelity Prototype
You can interact with this prototype! Try following the tasks, or click the arrow buttons at the bottom of the interactive feature.
The simplified visual design of the mid fidelity wireframes allowed users to focus on the core functionality of the prototype which made the feedback especially valuable. The three tasks from the flows mentioned before: checking the pricing guide, submitting the contact form, and checking the services and portfolio pages were used to test the system to see if it was easily navigable for new clients.
The tasks were completed quickly with the primary challenges stemming from an occasional issue with the prototype which was promptly resolved to ensure smoother testing from there on out.
The stakeholder liked the overall design of the mid-fidelity prototype and was excited to see how it would look with the branding in place.
Mid Fidelity Test Results
During mid fidelity testing, one issue with the prototype arose during the second test, though it was quickly resolved and did not affect the completion of the task.
Through testing, the three users were able to complete the tasks, though there was some confusion about where to find the contact form from any given page. This led to improvements on the clarity of how to inquire with the business, which were tested in the high fidelity prototype testing phase.
While users were informed that the prototype was mid-fidelity and would not have all the branding in place, there was a comment mentioning the desire for a more polished, high-fidelity prototype. The average score given was a 4.8/5 rating with notes saying it was easily navigable and everything was labeled well.
There were no changes that needed to be made to the overall prototype before moving on to the high-fidelity prototype.
Branding
The original color palette had too similar colors which made contrast accessibility difficult. I chose a photograph the stakeholder had for her original website that I included in the redesign to find the colors for, then checked with an accessibility tester to make sure they were all within the correct guidelines.
Logo
The overall logo for this website worked well, however, the colors needed to be more distinct from one another to pass accessibility. I had the stakeholder, who had the original logo in her Photoshop account, change the colors to match the new color palette for both the mobile and desktop designs.
Typography
The stakeholder's goal was to keep a whimsical feel to the typography, however what she originally had was difficult to read at the small font sizes she was working with. I searched through the fonts available and came up with one for the body text that is more of a sans serif font, Urbanist, to make it easier for clients to read. For the headers and titles, I chose Source Serif Pro as it would keep with the whimsical serif font she wanted while making it more legible on her actual website.
04. Prototype
High Fidelity Prototype
You can interact with this prototype! Try following the tasks, or click the arrow buttons at the bottom of the interactive feature.
To ensure Meadow Mischief provides a seamless user experience, I conducted a second round of usability testing with the high fidelity prototype as pictured on the left. This version of the prototype includes the finalized branding and images.
This functional, interactive prototype was tested by three new participants who had not seen any iteration before so there would be no previous knowledge of the design beforehand that could skew testing.
Usability Testing
Goals Being Tested
To see if the website remained intuitive and tasks are easily repeatable by users from various backgrounds.
Double checking structuring of the navigation.
Ensuring the processes for the contact form was easier to understand for the users.
Testing Methods and Execution
I conducted task-based usability testing, asking participants to complete the same three primary flows from the mid-fidelity testing, checking to see if the updated content was still easy to understand and tasks able to be completed.
The tasks included: looking at the wedding florals portfolio, checking the pricing for wedding florals, and finding and filling out the contact form. Once again, participants were encouraged to think aloud while completing the tasks and I was present as both a spectator and potential facilitator in case participants got stuck.
Success Metrics
To be a successful test, I was checking for a high percentage of participants to complete the task, how long it took to complete each task, what the frequency of errors was, and the overall user satisfaction with the website. With the information in hand, iterations would be made on areas identified as needing improvement before the final project would be submitted.
Overall Summary
Users were able to complete the tasks in quick times with no confusion over instructions
Every task was completed
With minor changes after high fidelity testing, the website will be ready for the next step.
Key Findings
Completion Time
Each task was completed within the time limit allotted. In fact, for all three tasks to be completed, the average time was about 15 minutes which included all of my instruction as well as the final comments from users.
Task 1: Wedding Florals Portfolio
Average Time: 28 seconds
Task 2: Wedding Florals Pricing
Average Time: 19 seconds
Task 3: Contact Form
Average Time: 20 seconds
Completion Success Rate
Every task was ultimately completed in every user test.
Tester Feedback
Overall Experience (Rated 1-5)
On average, over the three high fidelity tests, the ease of use score was a 5/5. There were only two moments of confusion: one being not knowing they could click on the photos to make them larger in the wedding portfolio section as not all of the photos were clickable. The other moment was potentially the fact there was not information about the a la carte options included in the wedding pricing. For this issue, a note was added underneath the wedding packages section stating a la carte options are included in the pricing guide available for download.
05. Iterations
Finalization
From the final user testing to the submission of the prototype, there were a few cosmetic changes as well as some content foxes and additions which were quick and easy fixes.
01. Pricing Guide
02. Contact Form
03. Inclusivity Statement
04. Footer
06. Conclusion
Working on this website redesign for Meadow Mischief was different from what I had expected. It ended up taking longer than the original deadline I had originally set by a week because of scheduling conflicts with the stakeholder, but as a whole, the project turned out well. The stakeholder was happy with the finished product and plans to implement the changes slowly over a few months.
Through this process, I have learned more about client satisfaction and compromise with design choices. I also learned the need to get access to assets such as photos earlier on in the process to make the design work go by smoothly.
I hope to do more work with stakeholders and their teams in the future.
