The Website

Phoenix Food People was originally an ecommerce site, built entirely in Webflow. It sold collaboratively art-directed t-shirts and other merchadise for local hospitality institutions (restaurants / bars / coffee shops) around Phoenix as a response to the devastating affect COVID-19 had on this industry and its employees. The majority of proceeds from each product were distributed back to the restaurants who allowed us to collaborate with them, but other portions of sales were paid as royalties to the participating artists (some artists preferred their royalties directed to the restaurant or COVID-relief related funds). Every dollar of income remained local.

Logic

To keep things as efficient as possible and to minimize waste, the merchandise was sold to the public via pre-order, which meant I'd need to automate instances for which product pages would display different content, depending on an item's availability. There were three instances: before the pre-order (future), during (present), and after (past). Using Webflow CMS conditional visibility, I established time / date constraints to which specific <div> elements were visible, so when one instance would roll over to another, the applicable content would exchange accordingly.

The goal was to be as clear as possible with customer product expectations without overburdening them with content; having irrelevant information disappear when it wasn't chronologically necessary was a priority. I also didn't necessarily want any visits to a product's page to be in vain: for products whose pre-orders had already concluded (rendering the product unavailable) I created a system by which we could capture emails from interested page visitors. These emails would go to a singular MailChimp list, and were tagged with whichever item they registered interest with; the visitor could leave an email address on multiple products, which only added tags to their profile on the email list. Prior to reprinting a specific popular design, I could send out an notification email to the specific tagged individuals.

The conditional visibility settings also allowed for other items available during the same pre-order window to be visible further down on the product page.

Fulfillment

Orders placed were immediately routed to our shipping software automatically — I had landed on using Shippo (after poring over and creating a half dozen test accounts with their competitors) for shipping label production. I was in the process of figuring out the easiest ways to manage the logistics of migrating order details over to their end, and about a week later, Webflow serendipitously announced a new ecommerce integration... with Shippo.

My wife and I handled fulfillment from our living room — I'll spare you the details, but I salute anyone dedicated to running a grassroots ecommerce operation, because the amount of ongoing labor here is no joke.

Future

I continue to see steady, unexpected brand growth via Phoenix Food People's Instagram, and ongoing newsletter subscribes (despite not having sent out any newsletters as of April 2021). I'm excited to say the next iteration of Phoenix Food People is currently being developed. The navigation and site structure will change, and will likely no longer include an ecommerce limb (as fun an experiment as this was). A jobs page is the next likely addition to Phoenix Food People, as a way to provide folks in the industry a bird's eye view of available opportunities around town. I'd love to continue using any resources at my disposal to continue to bolster Phoenix's food and beverage economy. If you're reading this and want to lend a hand, or have some idea of how we can work together, please reach out.

The Website

Voyager Bakeshop's website was built through a couple iterations via Webflow, and uses a custom built third-party ecommerce solution designed around the need for local delivery and variable delivery pricing based on distance from the bakery. Many of the visual components can be dragged around on the screen, and any overlapping objects will move to the back of whichever panel the user is actively dragging. Updates to delivery scheduling, FAQ queries, custom receipts, upcoming events, and any other data that needs to be flexible can be updated in 5-15 minutes.

The homepage addresses the crucial, most common questions and feedback Alex gets from customers, including an outlet for custom orders, upcoming pop-up events, and a revolving list of FAQs. A quite visual shop panel is set as the backdrop for these items, and any of the images will take the visitor directly to that product's page.

The product page features full-width images of the shop offerings, and allows the visitor to drag the order panel around on the screen to unobscured the image. Future features include a means of hopping from one product to another without a need to return to the home page.

Using Foxy.io's innovative ecommerce platform, I've embedded a shop system that allows some custom-injected code to interact with Webflow's native CMS, turning a whole collection of products into items that can be added to a cart, or as the Bakeshop refers to it: Your bag.

Form fields that allow for user interaction prioritize setting a delivery date. The expectations can then be set early on in the UX flow, and with timing and date-setting often being high-importance qualities for a baked good order, if the timing can't work between the prospective customer and Voyager Bakeshop, we shouldn't waste any more of this visitor's time.

We've also coded in a custom list of zip codes that allows for delivery geo-fencing in checkout. Any orders requested beyond a certain zip code or county will be courteously notified as such.