We used continuously revolving 3D animations to reflect Fat Tuesday’s grab-and-go culture, as well as realistic film and photography, flyer-style torn edging, and bright neon signage - a nod to the fact that their Vegas stores are often first-stop vacation spots for those visiting the city. 

A brand that blends in; not tries to fit in

To increase footfall, we created an interactive map to show users where they can grab their first (or their next) drink. Cup QR codes direct users to a location finder, and we integrated with Fat Tuesday’s third-party gift voucher platform to enable users to quickly and easily check their balance online.

A user journey that keeps the party going

Research showed that visiting Fat Tuesday was usually a group activity, and almost always part of a wider experience - be that partying, sightseeing, or hitting the beach. With a selfie-worthy selection of drinks and a ready-made audience of social media users, we added a live social feed that synced with in-store screens across all locations to show the good times never stop rolling.

A space for sharing the good times

After the go-live of the new Fat Tuesday site, we set to work on overhauling the sister brand - New Orleans Original Daiquiri. The premise and concept were the same (frozen cocktails to-go, a dated online presence), but with all outlets in the state of Louisiana, and an older more local audience to appeal to, we gave the brand a small-town, neighbourly feel. Think laid-back Southern vibes, a retro typeface and photography, and a feel-good colour palette and design that says “stop by and kick back with a cold one”.

A local, Louisiana-based little sister

Fat Tuesday

Viatu’s current identity didn’t truly reflect who the brand was, what it did, and – more importantly – where it was headed. We ran workshops with the entire Viatu team, covering everything from audience personas to user flows. We took a deep dive into values, vision, purpose and personality. And all of this together helped us develop a stronger, more defined brand identity that would be communicated internally and externally. 

Understanding people, positioning and purpose 

With new trip locations on the horizon, the new brand needed to easily grow with the business. We built a palette inspired by Africa’s wild, untouched landscapes, using colour psychology to make sure our choices aligned with Viatu’s modern and confident character, but still gave a nod to its sustainable roots. We explored traditional hand-drawn tribal patterns and texture, delved deep into photography and iconography styles, and chose typography that reflected Viatu’s bold and playful nature. Then, we rigorously tested everything for legibility and clarity. The result? A brand that translates across all languages and currencies – and can be adapted in line with new product features and Viatu’s future outside of Africa.

Giving the new visual identity room to grow

Storytelling is vital to the Viatu brand. Behind the hundreds of experiences, accommodation listings and blog articles was an entire team of writers. But with this collaboration came inconsistencies. As well as defining a stronger verbal identity through a series of brand personality workshops, we developed a TOV guide featuring sample content, detailed dos and don’ts, and rewrites of existing examples from across multiple touchpoints to help the Viatu team roll out the new voice effectively. 

Finding Viatu's voice - and futureproofing it

While we took care of branding and web design on the front end, Viatu’s product development team would always be responsible for the trip booking system. To ensure consistency across the entire user journey, we built a comprehensive design style guide that featured everything from brand placement rules to UX styling. We even outlined photography aspect ratios, so all imagery translated perfectly across desktop, mobile and social media. 

Creativity meets consistency

Armed with Viatu’s new identity, we designed and developed a site that’s user first – and future first. Working in conjunction with Viatu’s development team, we simplified and streamlined the trip booking process, allowing the user to clearly map out details of their trip, personalise accommodation options. Plus, we paved the way for an entire pipeline of new functionality, including the introduction of car hire, activities, and more.

A site that's no longer product first, but user first

Viatu

With heaps of product-related info, plus an entire area of the site dedicated to sex ed, we already had plenty of content to work with. But after a series of persona and TOV workshops, we defined a new visual identity – one that better represents the brand’s empowering, pleasure-first narrative and celebrates the joy of sex. 

Changing the narrative around sex talk

We collaborated with Smile Makers’ SEO agency throughout the project, from initial conversations around wireframes to ensuring all metadata was migrated to the new site. We also wove high-ranking search terms into the website copy and made sure the new site structure changed as little as possible. 

Ticking all the SEO-shaped boxes

We pushed the boundaries of standard e-commerce page layouts to create a premium site that’s playful, functional and puts accessibility first. We also found different ways to educate users about pleasure-first sex, from fun facts and vibrator comparison charts to more in depth how-to tips. 

Taking the stigma out of sex toy shopping

We overhauled the matchmaker quiz, creating a multi-step user flow that encourages users to talk about their pleasure preferences in order to find their perfect vibe. We added an Omnisend integration that allows users to receive a copy of results by email. Plus, with a custom Google Analytics/GTM setup that captures data at every step of the user flow, Smile Makers can gain a better understanding of their audience, perspectives on pleasure, and the most popular sex toys chosen. 

Translating a Typeform quiz into a bespoke digital experience

We added subtle, playful animations that align with Smile Makers’ joyful brand image. Think confetti cannon explosions, bouncing product imagery, and gentle, floating movements on scroll. Plus, we couldn’t resist having a little fun with some flying vibes on the 404.

Creating a site that moves and shakes

Ahead of go-live, we migrated Smile Makers’ entire library of blogs and sex ed content across to the new Shopify site. We used a custom script to ensure the content aligned with the brand-new design and Shopify article structure. Plus, we transferred all customer and order information and Yotpo reviews ahead of launch. 

Migrating from WooCommerce to Shopify

Smile Makers

It was essential that the site resonated with everyday EV owners, tech buffs and the crypto crowd. But it was also important that DIMO get new partners and developers on board, too. As part of our discovery process, we outlined how DIMO should communicate with these audiences — both visually and verbally. The result was an immersive web experience that paired seamless user journeys with subtle movement and animation to create a sense of belonging, all while driving users to download the DIMO app and get connected. 

A project that puts the user at the centre

DIMO is a future-focused project, so we needed to encourage buy-in by showcasing the brand’s vision and the bigger picture. Futuristic, Web 3 projects have a tendency to feel fake and abstract, or heavily feature video game-like imagery. Instead, we used real-world photography to reflect the real-life concept and incorporated 3D visuals of vehicles to make the site more engaging and interactive. And all of this was then balanced with a set of poster illustrations (courtesy of renowned visual designer, Trajan Jia) that blended modern themes with classic car culture to give a nod to DIMO’s vision. 

Balancing real world and digital world, and present and future

DIMO had recently rebranded. But we took the opportunity to evolve and elevate things further. We introduced new assets including gradients, rounded corners, lighter typography, and signature glass phone imagery. This not only built more value in the brand, but created an authentic, high-tech look and feel that would go beyond the bespoke site — from the native driver's app and marketing materials, to DIMO’s very own design system that enabled creators and developers to build new apps on the ecosystem. 

Building a brand across an entire ecosystem

The S8-DIMO team spanned from the UK, Cyprus and Portugal to New York and California, collaborating on initial mood boards and wireframes, right through to the final animations ahead of go-live. And by staying in constant contact through workshops, weekly (and eventually daily) stand-ups, and continuous updates via Figma and Discord, we designed and developed the DIMO site — from scratch — in a matter of months.

Collaborating across time zones, from Cyprus to California

DIMO

Our main goal was to modernise the brand by introducing a new look and feel that’s playful and youthful, but still gives a nod to its core values. We paired a new palette of contrasting colours with distinctive design elements such as badge stamps and image inktraps. Then, we went big and bold with typography.

220 years young: a traditional brand with a bold new energy

British style is all about independence and eclecticism. And when your history is as inspiring as Peregrine’s, it's only right that you write with flair. We outlined a new brand voice that brings together the wit of great British humour, the authenticity of storytelling, and the straight-talking tone of a brand that’s big on sustainability. In other words, charming, honest and rugged. Definitely no wooliness. 

A voice that speaks volumes

Our discovery work revealed that almost 3 in 4 users were returning visitors. And since these users are more likely to make a purchase, it only made sense to incorporate more upsell features in both the cart and the wishlist. Shoppers now see recommended products based on what they’ve purchased in the past. Or, they’re presented with suggestions of products that (based on data from past visitors) are frequently purchased together. 

Personal(ised) shopping, from the wishlist to the checkout

Peregrine’s a British-made brand, but its products are sold all over the world. Using Shopify Markets, we built a bespoke location switcher that groups countries into regions and enables shoppers to see specific pricing based on their location. Plus, the Peregrine team can customise pages depending on the season or campaign. 

We also went the extra mile to create more seamless user journeys. Users can browse clothing by size (and only see items that are in stock), as well as product type and material. The responsive image galleries are tailored to their chosen product colour. And, we also added quick buy functionality to the collections pages and blog, so users can easily add featured products to their basket. 

Making it better to browse and easier than ever to buy

Peregrine

The visual branding was all about refinement. Acupanel’s current logo typography was uncomfortably wide, so we worked on spacing to create a more readable wordmark and clean, modern logo. We paired that with a new colour palette featuring darker shades of green as background colours alongside lighter, complementary shades. The result? A more premium look and feel that lets the product shots do the talking. 

A twist (or two) on a classic typeface

Acupanel is an industry-first, so emphasising the brand’s originality was a must. We went back to basics, running workshops with the team to outline tone, rhythm and personality. We landed on a new brand voice that’s adventurous, inspiring, and real. 

We then turned our attention to copywriting. We used pairs of headings to add a signature characteristic to the content  - plus, give a nod to the fact that Acupanel’s products are all about style and substance. We told stories about the brand’s heritage to inspire readers. And, above all things, we ensured Acupanel’s voice was warm, genuine, and reflected the fact that installing its products was reassuringly simple. Because to 'do it yourself' should mean just that. 

Showing you’re a pioneer — not just saying you are

Behind Acupanel is a team of expert craftsmen with a love of design. Its out-of-the-box panelling is an industry first,  so it only made sense that we shake up the average e-commerce store structure with something out-of-the-ordinary. 

We designed and developed an immersive, interactive website featuring layers of texture, continuous movement and animation, and striking photography. We incorporated audio clips, annotated imagery, and real-life inspiration galleries to elevate the entire user experience. Shoppers can select colours, apply finishes and calculate how many panels they’ll need with the coverage calculator. And traders can sign up for exclusive discounts through Acupanel’s partner program. Everything that shopping with a premium brand should be. 

A design that’s out of the ordinary 

Acupanel

Mixing up work and play, every day 

People creating websites, developing brands and building eCommerce stores for people.

We know the internet and people in equal measure

Take it from our people people

Show me more

Here at S8, annual leave is a biggie. Everyone gets 28 days to cash in whenever they like. Plus, local bank holidays, a long Christmas shutdown, and extra days for our team retreat. Here’s why we think more time OOO is the way to go.

As a fully remote agency, WFH is all we know. But when you work from home, it’s even more important to get that work-life balance down. Your workplace doubles as a place for downtime. And although we’re big on flexible working – and choosing when, where and how we work best – it’s still important to step away from the desk and fully disconnect. Because with regular breathers come fewer burnouts and big productivity boosts.

Different locations mean different bank holidays

The fact we’re based in different countries means we all benefit from different bank holiday dates. Although we all get roughly the same number (except for lucky Biel in Barca), having that extra annual leave means we can celebrate our home country’s traditions the way we want to. Tag extra days onto already long weekends, travel to meet family during big festivities like Easter, or (if you’re based in the UK) turn the month of May into one big holiday.

A bigger holiday allowance means more flexibility when it comes to taking time off. Instead of weighing up whether to take time off at Christmas or squeeze in a last-minute summer getaway (especially if you’re holding out for great British weather) – you can do both. Plus, more holiday to spend means more time to really disconnect (or just get over the jetlag) and come back to your desk fully refreshed on Monday.

We all know that weird period between Christmas and New Year. You have no idea what day it is – or what the heck you should be doing. But in our book, the last thing on our minds should be work. That’s why we give ourselves two wonderful weeks to switch off, hit reset, and simply celebrate the holidays however we want to. It’s the best way to reflect on the year and come back with a brand-new focus for the year ahead.

Because there’s a whole world out there

We love what we do – partly because of what it enables us to do. Visit new places, experience new things, tackle house renovations, or just go hard on our hobbies. Those extra days of annual leave mean we can take time out for what’s really important. Plus, it means more travel/foodie/DIY tips for the rest of us.

Why our holiday allowance is hefty

Back to the journal

Shopify's Summer '23 Editions is here – and there’s some pretty major announcements on the development front. Our Lead Dev, Alistair, outlines the biggest and best of this latest feature drop.

Bundles have always been something that is annoying to do on Shopify. We could build the functionality ourselves, but it took a surprisingly large amount of work. The alternative? Pay for a third-party app which adds additional dependencies and complexity to the site.

Now Shopify has implemented its own 'official' bundle system. It's only 'fixed' bundles at the moment, which means store owners need to specify exactly which products are in the bundle. But we're hoping that 'flexible' bundles — where a customer can pick which products they'd like — are added soon!

This one is huge! We've been working with subscriptions apps for a long time and the addition of an official integration will really shake the scene. Subscriptions are a core part of loads of businesses and we're all really excited to see how this could streamline and simplify subscription management.

The official app looks pretty simple compared to the big apps – and for a really well-optimised or custom setup, they'll still be the best option for a long time at least. But, for simple setups, Shopify’s new app looks ideal and will definitely open up subscriptions to more stores.

'Duplicating' a store has previously been pretty hard. We actually built our own internal tools to make it easier to spin up a staging store or to create a new store for a multi-currency setup.

Now when you create a new store, you have the option to copy your product catalogue, files and themes to the new store. Super handy for development and if you need multiple stores that are similar!

This is a really interesting and easy way to sell products from other brands in your store  – or, become a supplier yourself. You can choose a product from another company, add it to your store, and when someone purchases it, they handle the order, shipping and process for you!

Most exciting for me though is that you can do both! I love the idea of a group of stores with similar products 'teaming up' as suppliers and retailers to give customers the best possible purchasing experience.

So this might sound like the most boring sounding feature to come out of this Editions, but it's actually got us developers jumping for joy.

The previous limit of 100 variants sounds high, but it’s actually easily reached. I once built a clothing store that sold a specific jumper in Loose and Slim fit, in 6 different sizes and 10 different colours. That’s 120 variants.

So, the upcoming increase to 250 variants will make it much easier to build products with lots of options.

Customising content across B2B and Markets

Only a few weeks ago, a couple of our developers were wishing for this exact feature! Clearly someone at Shopify somehow got the message!

Shopify has added a 'context switcher' to the theme customiser, allowing store owners to change the content of the site depending on the customer’s Market (based on their location) or if they're a B2B/Wholesaler. You had a bit of control previously using Localisation, but it was pretty difficult to use, particularly with sections and blocks. Now if you need to change the content, images, products on display or anything else in the customiser per country or currency, it's as simple as going to that dropdown.

It'll be interesting to dig into how this feels to use, as it looks like it might be pretty easy to get confused about which context you're editing. Hopefully it's really clear and Shopify adds features to sync changes to make it easier to manage.

During the Shopify Editions Winter '23, I voiced our concerns about the deprecation of checkout.liquid and how Checkout Extensions didn't have all the functionality we needed. This is a definite step in the right direction from Shopify, giving a clear route forward for upsells and recommendations on the checkout page which were uncertain until now.

Similar to upsells, there were features we'd been relying on checkout.liquid for that there were no clear replacements for. Shopify has made it easier for developers to add or change the validation rules within the checkout. A regular request we get for the checkout is preventing users from shipping to PO boxes. Until now, the best we could do was add a warning banner above the address input for all users –  but still allow orders to PO boxes anyway. With these new validation rules, we can prevent checking out with a PO box and give the user more direct feedback that their address is invalid.

The editor experience on Shopify has been a constant bugbear of ours. It's not bad, but when you have a large site with lots of flexible JSON templates and sections, it can get really confusing. On some of those projects we've even gone to the extent of creating a 'cheatsheet' of screenshots of each section to help.

From a first look, Section previews looks like it will make managing sections a lot easier. There hasn't been much detail over how it actually works, is it automatically-generated? Or do we upload screenshots when we make our sections like we have to with other CMSs? It'll be interesting to see when it rolls out.

Flex sections look like they could be a huge addition, allowing editors to drag+drop blocks in a page more easily. The real proof will be when we can see how it's implemented – plus, how useful it is for third-party themes that aren't based on Dawn.

Sidekick seems really powerful and a great time-saver – particularly for store admins that just want to get the information they need and move on. In terms of finding information about your store and Shopify, it seems super handy.

Like many AI tools however, make sure you keep an eye on its output. We've seen Sidekick returning information about Shopify that is completely incorrect, and breaking themes when instructed to make code changes. Hopefully these will be ironed out, but it's worth being a little cautious with this one!

Shopify Flow is an automation tool that allows you to automate actions in your store with simple If-This-Then-That style rules. It's been available for a long time on Shopify Plus, but now it's available on all plans. Nice!

Metaobjects were the big star of Editions Winter ‘23, and we've been loving them since their release. Metaobjects make it so much easier to build advanced CMS setups that are still really easy to manage and edit. During our first development call after their announcement, we talked about our disappointment that they could only be used on existing pages and products, not be given their own URLs and Templates.

Once again Shopify listened! Metaobjects can now have their own URLs, allowing us to take that same advanced CMS setup onto the frontend of the site like many other full-on CMSs. Previously for a site with an event system, we'd be building that part on a different platform or by re-using blogs. But now we can build that system right into metaobjects in a way that makes more sense, works better for SEO and is so much easier to manage!

I'm really excited about this feature and looking forward to seeing what our team can do with it!

Klaviyo is a standard recommendation for our stores, providing really helpful and advanced email+SMS flows. We use them to help engage with customers and do effective email marketing. It’s the bread and butter of our sister agency Parallel 9.

That's why we're really interested in Shopify stepping up their digital marketing game with Marketing Tools, providing flows and templates that might just rival Klaviyo's at some point. They currently seem a little simple. But, for smaller stores with less complex marketing needs, they could do the job and keep everything nicely within the Shopify platform. Definitely one we've got our eye on!

Shopify Summer ‘23 Editions: first impressions and best additions

We’re rounding off our 5-part accessibility in design series with 

: how best to approach movement and animation on your website – and what not to do if you want to make sure it passes the WCAG’s AA accessibility testing.

First up, is motion bad for accessibility?

Believe it or not, a video background is actually a lot more accessible than a static image. Why? Because the motion allows users with accessibility needs to clearly differentiate the static content from the moving content – and that, friends, makes it much more legible.

You see this kind of format on common streaming services such as Netflix, Prime Video, Disney+, ITVX and iPlayer. The sites play trailers in the background of the hero – sometimes with shadows and overlays to help the text stand out more. For a refresher on colour contrasts and backgrounds, visit our 

How to make your movement and motion accessible

On the average website, motion makes up 20% of the user experience. It’s known to  increase interactions and sales on some sites, but that doesn’t mean everything should move. Overdoing it can result in really bad drop-offs and just frustrate users – so approach it with caution.

Guidance from the WCAG states that anything with motion on a website, whether it be a simple transition, video content or a gif, should never flash more than three times. Not only is it pretty distracting, but too much flashing can be harmful to users with accessibility needs.

Some accessible users might experience anxiety as well as vision impairments. This is why it’s so important not to bombard your users by causing everything to move at once. Time things intelligently – and don’t trigger anything too crazy at a point where they might be reading some important copy.

We know the internet and people in equal measure

Mixing up work and play, every day
View Work

Take it from our people people

Why our holiday allowance is hefty

Shopify Summer ‘23 Editions: first impressions and best additions

Accessibility in design - Motion

Let us take you further than you’ve ever been

We know the internet and people in equal measure

Mixing up work and play, every day View Work

Take it from our people people

Why our holiday allowance is hefty

Shopify Summer ‘23 Editions: first impressions and best additions

Accessibility in design - Motion

Let us take you further than you’ve ever been SCHEDULE A CALL

Mixing up work and play, every day
View Work

Let us take you further than you’ve ever been