When planning the KPA ticketing app, the first big decision was deciding which technology stack to use

Given the complex and highly-interactive design, we needed something that was going to be developer-friendly while letting us build an application that was highly responsive to user interactions. Nothing’s more frustrating than a slow user interface!

VIA has mostly standardized on ReactJS for smaller interactive user experiences as well as single-page web applications so it seemed like a great fit, even though the ticketing app is just a small (but critical!) piece of a much larger site.

The other advantage to developing the ticketing portion of the site as an almost stand-alone app is that development on the rest of the site could continue in parallel. The more simultaneous work happening, the better!

React’s power comes from the way everything is divided into components which are displayed on a page. Once a component is identified, it becomes trivial to use it in multiple places on a page without having to write a bunch of extra code.

For example, we created a component for a single seat in the list of all available seats. This was great because seats that had been added to the user’s cart had a very similar design, albeit with slightly different data. This component-based architecture let us have all the shared code for that seat layout in a single place, even though it was displayed in multiple locations.

An additional benefit of using components is it makes it easier to allow multiple developers to work on the project at the same time.

The ticketing app was, understandably, quite data heavy. We need to store lists of available seats, seat map data, pricing information, promo codes, shopping cart data, venue information, etc. This data was constantly being updated as people selected seats or filtered based on pricing points or seating sections.

Luckily, this is another use-case where React shines. Leveraging an additional tool called, Redux, we can easily store all of the data used by the site in a single data store. Then we can set up our different components to pull data from that store. When data in the store changes, the components using that data automatically update themselves. All of this changing and updating is blindly fast because React is very good at only updating the components that have actually changed. No need to refresh the entire page!

For example, let’s say the user wants to filter seats to a certain price range. We can build a component which lets them select the prices they want. Those selected prices are fed back into the data store. Then React takes care of updating all of the components that depend on that data. This includes things like updating the seat map and ticket list to hide seats that don’t match the selected filter.Tools aren’t a guarantee of success. Just like a fancy hammer doesn’t mean you can easily build a house. The most important part of a project is the people working on it. Given the huge scope of this project and the aggressive timeline, our expert people using the above tools allowed us to deliver a quality product while sticking to the timeline we set out for ourselves.

Want to know more about our work for Kentucky Performing Arts? Read our case studies on 

the new Kentucky Performing Arts branding

how we translated that branding into the new kentuckyperformingarts.org website

PHP, Javascript & React

Ecommerce

Websites

Using React and Redux to build the Kentucky Performing Arts ticketing experience

We recently completed a website project on behalf of our partners at Foxhollow Farm to combine their separate websites for delivery and pickup orders into one. You can read more about our UX solutions and results of the project in our case study. In this journal article however, we wanted to outline some of the development solutions that made this project possible.

The biggest issue when merging two systems is that you have data in different formats in different places, even if it is being used for the same purpose. In Foxhollow Farm's case, we had product data in WooCommerce and Shopify, with additional subscription data in Shopify. VIA Studio intended to merge everything into WooCommerce; this meant we had to move all the subscriptions from Shopify. In addition, one site used Stripe, and the other one used Authorize.net. 

, we were able to set up subscriptions in WooCommerce. The plugin also offers an 

, which can import a formatted CSV with subscriber data. On the Shopify side, Foxhollow Farm was using a tool called ReCharge to manage the subscriptions. 

 offers an active subscriber export, which we used to create a CSV of all the existing data. From there, we did some data massaging to only include the fields we need to import into the Subscriptions plugin. In order to be able to bill customers again, we had to pull the client ID and payment ID from Stripe as well.

Once that data was in the WooCommerce Subscriptions plugin, the subscriptions ran seamlessly, and customers continued to have their subscriptions fulfilled with no interruption on their side. Existing subscriptions use the existing Stripe token to authorize payments while new subscriptions use Authorize.net, to match the rest of the site.

Now that both pickup and delivery products are served through one website, the normal checkout flow provided out of the box by WooCommerce is inadequate. For instance, pickup products do not have shipping, however, they have pickup times and need to be noted multiple times during the checkout flow so the consumer knows this. Another example would be that some delivery products are only available for certain zip codes and there are also instances where both types of products would be in a user's shopping cart.

With this in mind, the design team came up with single page, multi-step checkout experience that informs the user of the shipping information (pickup times, actual shipment information, etc..) and makes everything clear and concise.

To do this, development-wise we created two different portions - the slideout cart that uses ajax to update cart amounts and products and the actual checkout template. The checkout page is able to include all the required information at page load in tabs, with validation in between each tab step. The backend contains logic for the different use cases of product types.

 to help manage orders. With it, adding new order statuses became something the Foxhollow Farm team could do, and it even has the ability to customize emails sent when the status is changed to the new status. We also customized the existing emails to better reflect the different product types and their delivery or pickup methods.

While these solutions all primarily impacted the website's backend and eCommerce and payment platforms, it is what made the task of combining two website experiences into one, consistent experience possible!

Want to learn more about this project? Check out the UX case study!

Backend Development

Custom Dev

Development Solutions for Foxhollow.com

User Experience

UX / UI

Web Design

Frontend Development

Foxhollow Farm 

Branding

Photography

Art Direction

Accessibility

Treyton Oak Towers

Websites are the cornerstone of marketing in this day and age. Your website is the place where you have ultimate freedom to express your brand and interact with your audience and customers how you’d like. Using agile, user-focused strategies and design, we build highly accessible, highly useful websites that meet your goals.

Websites

Websites: Case Studies

01

Foxhollow Farm

02

Treyton Oak Towers

Websites: Blog Posts

Using React and Redux to build the Kentucky Performing Arts ticketing experience

Development Solutions for Foxhollow.com