Loading ...

Responses by cofounders Paul Ferry and James Wood, ShopTalk

Background: Tick Tock Tea has a wonderful history as a family-run company spanning four generations, which comes with real expertise, tea obsession and a strong, engaging personality. We wanted to create a site that felt almost “alive,” building on the bold and iconic packaging designs. The Tick Tock Tea website has an e-commerce facility and is aimed at those who appreciate high-quality tea.

Highlights: Implementing an animation style that would integrate seamlessly into the site. Striking the right balance of subtlety, vibrancy and usability was vital. We used a mix of developing techniques and sprite sequences to achieve this. We tried hover states with varying degrees of motion and interactive tiles against animated tiles, but it was the iconography animation that was by far the greatest task. Ultimately, we settled on using PNG sprites of graphics created in After Effects to do this; it the best balance of control and optimization.

Challenges: Although Shopify’s e-commerce software is comprehensive, its CMS is still not as customizable as we would like it to be. The Tick Tock site pushed the platform to its limits, and at times, we were forced to make concessions due to its constraints. We developed the first version of the theme as a standalone HTML5 build, separate from Shopify, which helped save time during the early experimenting phase and ensured we didn’t disrupt the existing live website. Once initial testing was complete, we then converted the site code into Liquid and began populating the content.

Navigational structure: We mapped out a number of user journeys—based on hypothesized goals and outputs—against the current site content and then layered over the creative ask of telling the Tick Tock story. We identified some new pages that were required to satisfy all visiting users, and introduced a change in language and navigation. We also maintained as much of the existing content as possible to keep the SEO team happy!

Technical features: The whole website is built on the Shopify platform to ensure that the e-commerce element is front and center from a business point of view. From the outset, our goal was to build our own custom theme from scratch while also trying to avoid installing any apps and plugins that would limit our control. To do this, we used SASS, jQuery and Shopify's template language Liquid, which is written in Ruby.

ticktocktea.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In