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
Mischief Meadow already had a website and social media presence in place, however, the interactions and website traffic were low despite high social media engagement.
The website needs updating to both the formatting and accessibility to make it more navigable for potential clients. There are also concerns about the interactive elements such as the contact forms not being utilized because they are difficult to find. 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)
User Interviews
Observations
Observation 1: Most of the users surveyed and interviewed use a program developed by someone else. A few write their own or make it up as they go along, but the vast majority want the information from a more knowledgeable source online.
Observation 2: Most users (predominantly female) are working out at home or doing things in smaller gyms. The gym spaces are either seen as intimidating or expensive, though the biggest reasons not to work out at the gym are a lack of time and knowledge.
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 their workout app services, what we could learn from their successes and mistakes, and what opportunities we can utilize in our own application. It was found that many of the competitors focused on the toxic fitness culture The MicroSquad is trying to avoid. The other companies also were often well out of the price point for most average users and were deemed "too corporate" at times. With that in mind, the path for developing an app focusing on strength, health, and inclusivity could begin.
FitOn and Peloton have the advantage of being larger corporations with the money to back them which can ultimately lead to a wider user base. Movement with Julie has a very simple application which is easy to use for all fitness and technology levels. Uplift has the strength of exclusivity with it's higher price range and an almost "Fitness to the Stars" like approach to the workouts.
These competitors have a plethora of weaknesses including focusing more on dieting and toxic fitness culture rather than getting their userbase healthy and strong. For some like FitOn and Peloton, user satisfaction may be more of an issue than, say, the individual owned companies that have a smaller user base. With the smaller companies, the creators can listen to the feedback and change, where as for the larger companies, they would be inundated with constant changes were they to try the same approach.
Research was also done to find out how competitors structured their workout app services, what we could learn from their successes and mistakes, and what opportunities we can utilize in our own application. It was found that many of the competitors focused on the toxic fitness culture The MicroSquad is trying to avoid. The other companies also were often well out of the price point for most average users and were deemed "too corporate" at times. With that in mind, the path for developing an app focusing on strength, health, and inclusivity could begin.
Research was also done to find out how competitors structured their workout app services, what we could learn from their successes and mistakes, and what opportunities we can utilize in our own application. It was found that many of the competitors focused on the toxic fitness culture The MicroSquad is trying to avoid. The other companies also were often well out of the price point for most average users and were deemed "too corporate" at times. With that in mind, the path for developing an app focusing on strength, health, and inclusivity could begin.
For a more in depth look at the competitive analysis, click here.
02. Define
Defining Parameters
For this application, I used testing and refining based on feedback gained through the previous section's interviews and surveys to define the structure of the application. 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
The Point of View (POV) statements were used in conjunction with the How May We (HMW) questions to get a glimpse into the backgrounds of possible users the 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 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
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. 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 a more in depth look at the personas, click here.
Task Flows
Based off 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. 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.
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.
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.
