San Francisco Flower Market
Background
The San Francisco Flower Market is a historic wholesale flower market that has been a beautiful part of the city since 1902. While The market itself is flourishing and expanding to a new location, the website on the contrary was neglected and lacking. We connected with the Flower Market initially through volunteering for the non-profit to do a layout redesign but the project quickly expanded as they saw the need. They decided to hire us to completely redesign and rebuild the website on WordPress.
The Problem
The existing website lacks essential features and functionality. Including reliable information on the market hours, a dedicated space to access vendors’ information, and clear consistent text that explains the badge program. Additionally, the website does not offer the option for customers to apply for and pay for badge memberships online.
Orginal Site
01. Empathize
It started as a Volunteer Gig
Discovering the Scope
I connected with SFFM through Catchafire, a volunteer platform that connects designers and developers with nonprofits need of help. They had a listing a website layout redesign. My friend and I applied to work on it together, had a screening call, and accepted the project.
They were not sure what they needed
We asked them some questions and looked at a recent heuristic evaluation they had done on the site. We got started on some research and the website layout developing a plan to fix the Squarespace site.
We met up to share our insights. They had been considering starting fresh with a new site instead of fixing up the current SquareSpace. They asked us how much that would cost, We wrote up a cost quote comparing various website builders, They spoke to higher-ups to find the funds and a couple of weeks later they hired us to build a new site.
A whole new site!
Starting with Reserch
We started with user research and a competitive /comparative analysis. For User research, we wanted to utilize the strong social media following they have on Facebook and Instagram (21k combined). We created a survey to narrow down who our target users were by asking who was a badge member and then asking questions to learn how they used the site, and what they would go to the site looking for. We learned that.
​
1. Most are going on the site for hours and information. And it's often not up to date.
2. 80% who took the survey purchase for business-related work.
3. The selection of floral products is what draws 51% of their users to the market.
​
In our competitive/comparative research, we looked at what other flower markets offered on their sites and how that overlapped with what our users needed.
Vendors
We also sent out a survey to the vendors. The market was also looking to highlight their vendors on this sight. We were curious about the online presence these vendors had or already had, what they wanted in their profile, and what effect they were hoping it would produce in their business. We created a survey and had the SFFM send an email with a link to the survey.
With that feedback, our research, and the data from Squarespace we developed our problem statement …
Overcoming a Challenge
We received an abundance of feedback from our intended audience through social media posts, and although obtaining responses from vendors proved to be challenging, we were determined to succeed. To overcome this obstacle, we extended the initial deadline, sent follow-up emails, and requested those who had already completed the survey to share it with other vendors. As a result of our persistence, we were able to obtain survey responses from one-third of the vendors, which we consider a significant achievement.
02. Define
So what do they need?
Problem Statement
The existing website lacks essential features and functionality, including reliable information on the market hours, a dedicated space to access vendors’ information, and clear consistent text that explains the badge program. Additionally, the website does not offer the option for customers to apply for and pay for badge memberships online.
Solutions
1. Combat overwhelming text by restructuring the content and utilizing multimedia to enhance readability.
2. Vendors will have dedicated pages showcasing their information and services, complete with search and filter options.
3. Streamline the membership application and sign-up process with clear instructions, an online form, and easy payment options.
​
4. Create a navigation menu that aligns with users and the SFFM’s needs. A visually appealing new branding-aligned design will be implemented.
5. Usability testing and ongoing iterations will ensure a positive user experience.
03. Ideate
What platform would be best?
WordPress it is!
The process of developing sketches for the SFFM involved a collaborative and iterative approach. We began by identifying the key pages and user needs of the website based on their current site’s analytical and user needs found through the surveys.
Designing
We started in Figma mocking up wireframes to get an idea of what we wanted to build out in WordPress.
​
The next item on the list was the design direction. They had recently had a new logo designed that they were excited about. So we were using that as a base for the site design. The challenge was that the logo did not match the tone they had expressed they wanted for the site. With much trial and error, we finally settled on a color scheme that worked.
04. Testing
Lets take it for a spin
Round 1 feedback
We gathered contact for 5 Target users and did live user testing via Zoom.
​
-
The design looked a bit dated - We were so focused on matching the logo that we kind of lost the bigger picture, getting this feedback helped us leap to give the site a more modern look and let go of the the exact color match with the logo.
-
Make sure to clarify that the badge was only for business owners not the public.
-
Simplify the vendor pages.
Figjam Orginization
We organized our user testing data in Figjam. And organized the feedback by page and created task lists to take care of those improvement points.
A closer look on how we organized the feedback of each person we tested.
Finding trends and making changes
We found trends in our testing and prioritized those in the revamp before our next round of testing.
​
1. There was confusion around if the badge was for businesses only.
2. Users did not know that "Market Atelier" was the workshop space.
3. On the visit us page we noticed that users would not scroll down to find the hours so we wanted to move that above the fold.
Ok, we can do that better
Round 2 testing - Agian this was live testing via Zoom with some target users.
​
-
We had no questions surrounding the badge membership, it was clear that badges are for businesses.
-
Users easily identified what the Market Atelier was with the new defining title "Workshop space - the Market Atelier".
-
Users easily found the hours on the Visit Us page as well as in the footer.
05. Impact
The proof is in the pudding
And by pudding I mean data
1. The flower market's site engagement has more than doubled since this time last year!
2. They are now producing revenue from the online badge and mech sales that were previously not offered.
3. The vendor's pages are the 3rd most visited pages on the site, these were not even available last year. Now they are being used by many badge holders and visitors as a needed resource.
