Friday, December 20, 2019

Pennywise Development

So, you’ve finished our blog on the UX design of Pennywise, and now you’re ready for the next one. You’ve come to the right place! If you’re joining us halfway through and have no clue what the design was about, then stop right there. You can read all about the design process here

Now that you’re all caught up, it’s time for us to take you through the development process of the Pennywise eCommerce website and let us tell you, it was full of growth and new experiences. The development of the Pennywise eCommerce website has been an informative experience for the Expose Web team, full of growth and new experiences. We were faced with many unique challenges that required the team to closely consider development decisions prior to implementation. Iteration was also key, with components being refactored to produce the eventual, polished result.

One of the major challenges within the development of Pennywise was trying to combine the limitations of the Shopify ecosystem, with the brick and mortar structure of the Pennywise stores. Being a secondhand store in six different locations, Pennywise had a requirement that each store would manage their own inventories including taking product images, putting the products into the backend and setting specific attributes. This meant it was critical to consider two distinct and separate user groups and their individual requirements:

  • The end-user purchasing products from the site
  • The backend user adding inventory to be sold

Maintenance and content control of a website is always important, no matter what kind of site! In this case in particular, having so many separate backend users involved made ease of use paramount to the success of the build. It also made consistency necessary to keep the store on brand and to ensure each function fired correctly. This is why we used a heavy reliance on product tags to maintain consistency. 

The tags for each product provide most of the informative content of an item, with the descriptions kept deliberately concise to cater to the diverse backend user. By using the tags to enable the filtering of collections, this increased the usability of the site, allowing users to intuitively discover their perfect product. If there were any inconsistencies within a tag, such as something being misspelled or incorrect use of capitalization, an item that belonged within a filtered collection would be excluded and a possible sale lost.

The need for a structure ‘standard’ was highlighted early, with flexibility being a major component. This would allow the site to grow organically with little extra development needed. The structure decided upon was:


This simple key-value structure provided complete freedom to the backend user to add any tag that naturally developed, without being predetermined. It also leveraged Shopify’s backend, whereby the use of an autocompleting dropdown would provide a fallback to keep existing tags consistent. This has proven to be extremely beneficial to the client; providing the perfect trade-off between the freedom of the self-sufficient store managers and the consistent implementation of the overall brand and functionality of the website.

Another primary component within the development of the Pennywise website was handling the different possible ‘postage states’ of a multi-vendor eCommerce store. This was exacerbated by the external constraints enforced by Australia Post and their delivery limitations. Dealing with secondhand goods, Pennywise has a very diverse and spatially separated inventory. Therefore at the cart, it was important to identify the varying scenarios and cater to each uniquely. The major problem area was the existence of Pick Up Only items, providing an unfamiliar challenge to the development team. Large items that could not be delivered, had to be picked up from the store that held the stock. In addition to this, deliverable items and more Pick Up Only items could be within the same order or the user could have two delivery items from multiple vendors.

It was decided that the best course of action was to be as transparent as possible with the end-user, adding a Pick Up Only warning to products and listing the location of each item within the listing. This was to reduce the possible shock or misunderstanding the user could experience as they finally navigated to the cart. The system uses weight to determine if a product is Pick Up Only, with items having their weight set to over 99kg if they could not be delivered. This provided the possibility of characterization as the unit weight is part of the Shopify product object and, in combination with the product vendor, allowed the system to tailor the displayed information depending on the cart details. The weight is also the determining factor within the postage calculation, allowing for these heavy items to only show one option of Pick Up Only. This was crucial to the functionality of the cart, and intern, the system as a whole.

The development made the cart highly reactive to the contained ‘postage states’, providing tailored information depending upon the contents of the current order. Within the scope, the client required the user to show a valid government ID upon arriving to picking up an item. As the weight was accessible, the accompanying information could have an input field (shipping note) supplied to gather this information. As a first and last name is required, the ‘Proceed to Checkout’ button remains disabled until the user enters two words. This was a simple javascript event listener, that watched for at least a space character and a minimum length of three characters. A similar approach was taken to customize the client notifications, store notifications and order notification.

All in all, the development of the Pennywise Shopify website introduced some very unique challenges. This made planning development decisions paramount to the functionality of the final system. Defining the specific user groups and consider their individual needs, has become the defining factor to the success of the end product. As developers, the Web Team at Expose has grown there understanding of the Shopify platform and now has the confidence to handle any unique challenge that arises from its use. Bring on the next eCommerce website.