Company: Martha’s Flowers is a full-service florist in Santa Monica that specializes in bouquets, arrangements, and special event flowers.
Challenge: Help Martha’s Flowers update their website to create a simple and fun online flower buying experience through reworking the flower selection and checkout process. This was a spec project.
Role: Solo UX Designer
Date: 2020
Tools: Sketch, Invision, Illustrator, Photoshop, Miro, Google Suite and Otter
Evaluate the Current Website
In order to establish how usable the current website is I conducted a heuristic evaluation. Overall I found a few cosmetic blemishes, a few minor errors, and 3 major problems. My goal was to address the three major problems first and foremost, but relieve the minor errors and cosmetic blemishes along the way.
What do these buttons mean?
I’m having trouble finding if I’m eligible
I can’t put in my information
Mapping the Journey
Through task analysis I got more insight on those 3 issues as well as uncovered a few more paint points throughout the journey. Shoppers were able to complete the process of finding a specific bouquet and purchasing it, but there were a lot of road bumps, which is illustrated in this customer journey map below.
One thing that I uncovered through this was that users outside of the delivery area could place an order for the next day, and not receive a single error. This put the pressure on the Martha’s to check the order and notify the customer. Ultimately this could result in the kiss of death for small business the one star yelp review.
Improving a Frustrating Experience
I wanted to get an understanding of the challenges, goals, and overall habits around the current flower buying experience, so I conducted user interviews and collected data through surveys. The hard data revealed that over 75% of shoppers were buying flowers for others. From there I uncovered the common themes and links from my user interviews through affinity mapping.
Key Insights
Shoppers like to have a wide variety of options, but often feel overwhelmed when presented with all of them.
Shoppers feel pressure to seem thoughtful when shopping for others.
When using an e-commerce site, shoppers need to have a sense of trust with the company, before placing their order.
Introducing our Shopper
Harley is our primary user persona, and she represents all of the shoppers I was trying to reach with this redesign. She humanized my research, and she served as a guide for me throughout my design process.
Restructuring
With problems from my heuristic evaluation and journey map pointing to unfamiliarity and confusion in the information architecture, I set out to improve Harley’s experience by reworking the overall structure of the site to make sure things are more suited to her needs, but still findable. I wanted to see how shoppers would group pages on the site using an open card sort. This informed an improved navigation that will allow for a more obvious path to find what Harley needs, but also allow for more flexibility based on her shopping needs. Below you can see the existing site navigation (left) in comparison to the new site navigation (right). I wanted to make sure that Harley wasn’t overwhelmed with choices, while still giving her the appropriate amount of authorship to her browsing journey.
Old navigation sitemap (click for detail)
New navigation sitemap (click for detail)
Feedback Loop
Iterative user flows eventually grew up from sketches, to wireframes, all the way to a medium fidelity prototype, where I conducted usability tests to make sure the interactions and flow were intuitive and useful.
Key Changes
Hover menu: similar to other e-commerce sites, shoppers wanted, and expected a hover menu, instead of having to click. I implemented this change for the high fidelity prototype.
Orienting our shoppers: throughout the journey shoppers were not confident in their steps due to lack of signifiers like breadcrumbs and progress trackers. Those were implemented for the high fidelity.
Creating an Ambiance
In order to modernize Martha’s Flowers, I put designed a new logo that draws inspiration from the previous design, but tones down the intense color and increases legibility. I also put together a mood board for the art direction of new product photos, which puts a preference on in situ photos, so shoppers can see what their buying become part of their life.
The new and improved…
Refreshing the flower buying experience
Finding the perfect bouquet
In this walkthrough we follow Harley at the beginning of her flower buying journey. She wants to get a bouquet to celebrate her BFF’s promotion, but she is on a budget, and isn’t sure which direction to go in. In the rework of the overall navigation I allowed for shoppers to browse by various preferences depending on their situation (occasion, flower, color, and mood). As well I implemented sort and filter options, so Harley can easily narrow her results.
Learning
Harley, like most of our shoppers, doesn’t know very much about flowers. I wanted to make sure she is equipped with all the information she needs, from if the bouquet is pet friendly, to how to best use the flowers once they die. I wanted to include reviews from the community, so Harley can properly vet the bouquet. I also wanted to include suggestions, so if Harley clicks into a product she doesn’t love, it doesn’t have to be a dead end.
Checking out!
Harley has selected the perfect bouquet, and now all that is left is the checkout process. This area was a big challenge littered with pain points on the current website, so I wanted to break it up into simpler tasks, so Harley doesn’t get overwhelmed, or skip important information. She also gets a chance to review her information before sending, so mistakes can be caught. And finally we wanted to thank her and give her confirmation at the end of the checkout, so she doesn’t worry.
Success Metrics
Harnessing usability testing, I was able to track data and compare it to the original site. Overall there was a general improvement, but specifically with the checkout flow, I saw a drastic increase in the direct success rate. In addition the average time it took to complete the flow decreased significantly.
Next Steps
One feature that I think would really add to the experience would be a quiz (this was shown in the menu of the prototype, but not built out). My research showed that most of our shoppers were going in blind when they bought flowers for others. A quiz that would ultimately end up with a filtered product listing page would really help take the pressure off, and could make the journey more personalized. I think this would be an easy next step, once the Martha’s Flowers database and filters are built out.
Something I found in my C+C analysis that could be really successful for Martha’s Flowers business outside of just their website overhaul, would be to collaborate with other like minded small businesses. Some examples could be coffee shops, pottery studios, jewelry studios etc. This would help solidify their space in the community, and allow for them to help others. Based on my qualitative research, I think shoppers would appreciate this investment in “local”, and it could make them feel good that they are supporting their community.
Lessons Learned
Since this was such an early project in my venture into UX, I made a lot of mistakes that pushed me forward. The biggest being: this is not an accessible site. Looking back I am not proud of hiding calls to action behind hover, having small text with low contrast, and only designing with the able bodied in mind. Knowing what I know now, I realize the duty every UX designer has to make sure their designs are accessible.
Also being so green, I tried to implement as many features as I could, without opting for any sort of feature prioritization, or MVP to test out first. I have really come to appreciate prioritization going hand and hand with ideation, and timeline. Especially when working with a team, I think it makes for better products in the long run.
Illustrations in this case study were courtesy of Elina Cecilia Giglio
