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 design system 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

From projects to pets, you can bet there’s an S8 Slack channel for it. We use Slack for everything from general chit-chat to client comms – and we’re always searching for ways we can use it better.

Here are 6 tips for getting the best out of Slack and making everyday work a breeze.

It’s great to be in the know. But choosing what you get notified about and when is key. We’re pretty considerate when it comes to channel shoutouts, so we’ll notify teams (i.e. @designers, @pmz and @devs) for team-specific things – and only hit @here for the super important stuff. Some of us choose to only get notified during working hours, while others have set up alerts for specific keywords. But we aren’t afraid to mute channels or pause notifications if we need some focus time.

The ultimate to-do list tool. Hit the ‘Save for later’ icon on any messages or requests that you can't take action on right away and they’ll be stored in your Later list. You’ll then be able to organise items into ‘In progress’, ‘Archived’ and ‘Complete’ – plus, you can even set up custom reminders if you need nudging on anything time-specific.

Connecting your tools and apps to Slack means less juggling and jumping between things. We’ve synced up Slack with our most-used platforms and tools, including ClickUp, Figma, and Google, to make sure we’re immediately notified of any new tasks, comments, or requests. But our other favourite apps include Polly (for polls) and Timetastic (for time off).

Who doesn’t love a keyboard shortcut? Turns out Slack has a keyboard shortcut for pretty much anything. To check out all the shortcuts and familiarise yourself with the ones you’ll need, just hit Cmd + / (MAC) or Ctrl + / (Windows/Linux) in Slack.

Huddles are already great for ad hoc catch-ups. While the average booked-in meeting is 30 minutes, most Huddles tend to last around 10 – which already means a big tick in the productivity box. But you can use the Huddle Thread to drop in key action points, useful notes and more – then follow up afterwards or even ‘Save for later’ if you want to refer back to your notes during focus time.

We’ve recently set up Workflows to help fast-track the onboarding of new teamies. In a couple of clicks, new Slack users are added to all the social, project and team channels they need to be in – rather than waiting to be invited manually. Plus, we’ve created a built-in employee handbook in Canvas format so we can quickly access handy links and policies around things like booking holiday (yay!).

Our top Slack hacks for productivity

If there’s one annual conference we carve out time in our diaries for, it’s 

. Because there’s nothing we love more than nerding out with other devs about what’s new in the world of the web.

Here are our top takeaways from this year’s talks courtesy of Lead Developer, Alistair.

'Web standards: does anyone actually care?' by Michael R. Lorek

Michael R. Lorek kicked off the day with a talk about Web Standards, why they’re important and the state of the web currently as they relate to Web Standards. A perfect talk for this conference given it’s run by London Web Standards!

The key message Michael was getting at was that it’s really important to publish high-quality work on the web, and some of the things we need to consider as web developers to do so. He mentioned that HTML and CSS validation and testing the security of sites using pen-testing methods are really important for security and are very rarely done within the industry.

I definitely agree that for security and code maintainability, validation is really important. One argument he used was that it was also important for SEO. However he then went on to show that basically none of the top 1,000 sites have valid HTML – so you could argue that it doesn’t make much of an impact on SEO!

'It all means nothing in the end' by Amy Hupe

Amy Hupe is known best for her work on design systems and documentation, but her talk at SotB23 was on burnout and finding value and meaning in your work. It was absolutely fantastic, really making us think about how to work best in the tech industry whilst also caring for ourselves, our emotions and self-worth. It was also one of the funniest conference talks I’ve seen, perhaps only beaten by a previous talk of hers!

The inspiration of the talk was that Amy found she really didn’t care about her work. She had burnt out, lost the passion and drive for design systems and the tech industry, and was struggling with the fact her self-worth was somewhat tied up in her work. That’s a feeling that I’ve also felt before, when I’ve pushed with all I had to get a project over the line and then felt like sitting at a computer is the last thing I care for.

The best thing about this talk was the key points that Amy made about how best to structure the relationship we have with our job to keep ourselves validated and motivated whilst also enjoying and thriving in our work:

Having times where you’re not fully invested in your work is fine, but if you work a full-time job it’s not a solution for happiness.

We all have a “core perspective” that shapes how we see and interact with the world. Amy defines that as a combination of your skills, experience and values. By identifying that perspective and aligning it with our work it will help us be motivated, productive, feel successful and, most importantly, happy.

Goals we make should align with our core perspective, but also should be achievable. Setting up impossible goals is a great way to disappoint ourselves. In Amy’s own words: “**** Moonshots”

It’s important to feel validated and successful, and we come to rely on certain structures to achieve that. Within big organisations, that may be promotion trees. On social media, the number of likes. By relying only on those structures, you risk losing your main source of validation so it’s key that you can also validate yourself based on the goals you’ve achieved also.

Amy gave us all a lot to think about, and it was an absolutely brilliant talk. It’s only been a couple of weeks but already I’m feeling better about the changes I’ve made to how I make goals, aligning my work alongside my core perspective, and making sure that both within and outside of work I’m enjoying how I spend my time!

'Accessibility is easy… except for when it isn’t' by Ian Lloyd

I always love an accessibility talk. State of the Browser always has at least one each year and they’re fantastic. And this year was no exception. Ian Lloyd gave a fantastic overview of some easy and really tricky accessibility points, featuring lots of examples, some serious stuff and also some great laughs. I loved that format – it makes me think I should put more jokes, memes and references in my talks…!

At the beginning, Ian covered some simple accessibility issues that most of the audience were familiar with, things like image alternative text, using headings and buttons etc. We then had a run through of “Accessibility Horror”, with some awful examples of developers getting it completely wrong in silly ways!

That was the “Accessibility Is Easy” bit done!

The “Except for When It Isn’t” for the rest of the talk was absolutely fascinating, and really went into the details of how you can make really complex UIs accessible. When it comes to accessibility, I know my stuff and do audits and such, but it was really evident how much experience Ian has – fixing some UIs I wouldn’t even know where to start with! It was extremely interesting to see how he went about working out interfaces that don’t match common patterns, like tab controls within a table, a theatre seat picker, multi-select menus or the “DiaMenuClosure” he showed.

Really inspiring and balanced, so it offered some new information to everyone in the audience — something very tricky at a conference with a fair few accessibility experts attending!

'Stop using JS for that: moving features to CSS and HTML' by Kilian Valkhof

I was really looking forward to Kilian’s talk because he has a really interesting insight on browsers and development. He develops the web browser 

, which is designed to make it easier for developers to debug and test the websites they build. That gives him a really interesting perspective on the industry, seeing what tools developers are using and what they’re testing, whilst also having insight into what makes a browser tick. This talk wasn’t about Polypane though, it was about HTML, CSS and how they can take the place of JavaScript.

It was a really good review of some of the new-ish features of HTML and CSS that have had support for a few years, but aren’t always being used in favour of JavaScript replacements. Browser vendors listen to developers and have been implementing features like accordions, input suggestions, smooth scrolling and dialogs, all in HTML and CSS. I’d recommend watching the recording to see them all, Kilian does a great job of demonstrating!

Two tips he mentioned that I found really interesting in particular was how the CSS appearance:none works to make replaced-elements styleable (I never knew what it did), and to use outline-color:transparent on a focus outline for free support for forced-colors mode!

This was a thematic masterpiece, with an ocean-themed talk on Progressive Web Apps with sea graphics and Attenborough-style narration throughout! Diego gave a really interesting overview about PWAs, their history, how they work and what the future holds for them.

It was looking at some of the future directions and options that really caught my attention, including some of the really challenging issues with implementing them. We want users to be able to easily see a site is installable, but don’t want spam popups like we have with web push notifications. We want to offer lots of new capabilities but how should we restrict them?

Although some of those decisions, challenges and options are really tricky and I don’t have an answer for them, Diego’s talk brought them to my attention and made me think. It also reassured me that even if I don’t know what the answer is for PWAs, the web community is wary and mindful of getting it right.

'Cache rules everything' by Harry Roberts

Harry has done some fantastic web performance talks and this is no exception. He went in-depth and focused on the HTTP cache, how to set it up correctly and some of the pitfalls and mistakes people commonly make. We were asked to put our hands up if we knew caching headers in-depth — I raised my hand and oh boy I was proven wrong!

Once again check out the recording as it really goes into the exact details of how caching works, what headers to keep or remove, how to come up with caching strategies and how caching works on public and private resources. It really was a complete and fantastic explanation of something that seems simple but really isn’t!

'Speedy dev insights' by Chris Ferdinandi

Chris put together three short pre-recorded videos that were played between longer talks, giving a bit of a demo and some tips on a range of development stuff.

The first was building a custom Web Component, which are web-native ways to build custom components in JS. I’ve found Web Components can be a bit tricky to learn, but Chris made them look easy!

 two was on data binding using Proxies, which is super cool! In our websites we use Proxies through Alpine but it was really cool seeing how you can also work with them directly!

The final insight was a rapid-fire run through of 13 smaller tips, really delivering on the “Speedy” promise! There were some great tips in there that you could use in day-to-day development. Unfortunately, he then went and spoiled all the good favour he’d gathered from the audience by trolling us and mispronouncing GIF. What a shame!

'Exploring the potential of the Web Speech API in karaoke' by Ana Rodrigues

As the end of the day approaches at a conference, and the attendees start looking forward to the afterparty and dinner, it can be a bit tricky to keep everyone engaged. Ana had absolutely no problem with that however, with a brilliantly entertaining, fun, and interesting talk on karaoke in the web browser!

The Web Speech API is a new in-built browser feature that allows developers to receive audio input and easily turn it into text, without need for a third-party service. Ana decided to build a karaoke machine using web technologies and added the Web Speech API to score her singing!

It was great fun and a really good walkthrough of how she built it and how the Web Speech API works! It was also really impressive for her demonstrating the karaoke machine by singing, during her first conference talk!

That final talk got everyone excited and energised again, just in time to go to the pub for the afterparty!

What we learned at State of the Browser 2023

Last weekend, we all downed tools and gathered in Prague for our annual team retreat. Four days, 24 teamies, and more merch than you can shake a schnitzel at. Here’s the full round-up of what went down at this year’s S8 (+P9 👀) team retreat.

Our base for the week was Prague’s Mama Shelter: once a luxury communist hotel, now home to vintage cartoon reels, a restaurant DJ and foosball. The Cyprus crew (who arrived the night before) and the other early arrivals got stuck into some Georgian dining and castle-touring. But it wasn’t long before we were all united (some of us for the first time ever) over drinks in the bar that evening.

The next day was all about Czech culture. Coffee shops, beer halls, and chimney cakes – all while soaking up the last of the autumn sunshine. That evening, we learned about the history of the old town, the new old town, and the old new town during a city tour with a night watchman. Our favourite fact? Once upon a time, the city’s residents were told to drink three litres of beer a day to stay healthy. They even used beer to put out fires (but we have a feeling a few were started on purpose).

Day three kicked off with escape rooms, where we divided and conquered everything from zombies to dark magic. We only found out afterwards that those who escaped first got to watch the remaining teams struggle. But one thing we were all 100% certain of was that “our room was the hardest”. After testing our teamwork skills, our resident photographers Bruno, Biel and Nate got snap-happy at Studio 71: a quirky basement studio and backdrop for our all-new team photos.

On the final evening, we all headed to the Medieval tavern, 

, for a traditional five-course feast in a setting that was straight out of a movie set. Think sword fighting, fire shows, and more Czech food and beer than we could manage. And for the final nightcap? A visit to one of Prague’s best absinthe bars, of course.

It’s not often we all get together. So every time we do, it’s pretty special. Shout out to Ellie, this year’s t-shirt and sweatshirt designer, and Sam and Jack – the merch mules who got it there safely. Big up Biel, for his ability to make any BTS photo look incredible, and also the trip’s official after-party planner, Rachael. But a special mention to Fran and Mario – for letting us put our out-of-offices on for four fun-filled days so we could hang out IRL.

We know the internet and people in equal measure

Mixing up work and play, every day
View Work

Take it from our people people

Our top Slack hacks for productivity

What we learned at State of the Browser 2023

S8 (+P9) team trip 2023: Prague

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

Our top Slack hacks for productivity

What we learned at State of the Browser 2023

S8 (+P9) team trip 2023: Prague

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