Development

Agency

Hack Projects

Design

It’s been a rough <a href="https://www.theverge.com/2024/9/27/24256361/wordpress-wp-engine-drama-explained-matt-mullenweg" target="_blank" rel="noopener noreferrer">couple of weeks for WordPress</a>—it’s found itself at the centre of <a href="https://www.theverge.com/2024/10/12/24268637/wordpress-org-matt-mullenweg-acf-fork-secure-custom-fields-wp-engine" target="_blank" rel="noopener noreferrer">quite a big a media storm</a>. We’ve gradually been moving away from WordPress to <a href="https://payloadcms.com/" target="_blank" rel="noopener noreferrer">Payload</a> over the last year or so, and in this Lab Note we take a look at why we’re making the move and how it benefits both us and our clients.

We’re always looking for new and exciting ways to improve our development processes and provide clients with the absolute best quality product we can. Part of this has involved transitioning our choice of content management system (CMS) from WordPress to Payload.Payload is a <a href="https://www.sanity.io/headless-cms" target="_blank" rel="noopener noreferrer">headless CMS</a> built using <a href="https://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">TypeScript</a>, <a href="https://nodejs.org/en" target="_blank" rel="noopener noreferrer">Node.js</a> and <a href="https://react.dev/" target="_blank" rel="noopener noreferrer">React</a>—all of which we’re familiar with. It’s also highly customisable, which means we can create custom APIs and very flexible content models that adapt to whatever our clients need.When we first began looking into moving beyond WordPress, we researched a few different options, including Contentful and Sanity. We knew what we were looking for, and had a few criteria to meet. Firstly, we wanted a platform that’s reliable, secure and well maintained. These are all core values that benefit both us and our clients.Secondly, whatever platform we chose needed to be scalable across sites large and small. We didn’t want to choose a platform that might limit us in the future.This is where Payload really came into it’s own. So let’s take a look at some of the benefits of Payload in a bit more detail.

Why Payload?

When it comes to our clients, as an agency we like to make sure we’re offering the absolute best solution to their problems. And Payload definitely helps with this. There’s a few key areas that Payload really excels in…<h3>Performance</h3>Every website should perform well, especially when it comes to site speed. On average, <a href="https://prerender.io/blog/page-speed-tips-and-statistics/" target="_blank" rel="noopener noreferrer">around 40% of desktop</a> users will leave a website if it takes more than three seconds to load. That jumps up to 53% for users on mobile devices.This is where Payload’s headless CMS comes into play. Because it’s so streamlined, it’s typically faster at loading content and images, especially when paired with Next.js static site generation. This is a huge benefit to our clients. Getting users to the content they want quickly and seamlessly is a key UX principal, and ultimately results in higher conversions.<h3>Same Flexibility</h3>Payload offers the same flexibility as WordPress. Being able to easily adapt and add to our sites is an important part of what we offer to our clients. Payload’s flexible content modelling allows us to quickly and easily add features and fields to any site, meaning it can scale and grow quickly and smoothly.<h3>Modern</h3>Payload is built with the very latest versions of TypeScript and Node. This means it’s updated regularly with security and bug fixes to keep your site and data safe. It also means it integrates well with other Javascript frameworks, like Next.js.<h3>Self-hosted</h3>Payload is self-hosted, meaning we have control over and oversight of all the data the site contains and accesses. This is crucial for companies and sites that contain sensitive user data.<h3>APIs</h3>When it comes to Application Programming Interface (API) integration, Payload’s headless CMS features an API endpoint. This means we can quickly and easily fetch, update and create data from any website or app. It also means our clients can use the data from the CMS anywhere they like.<h3>Familiarity</h3>Moving to a new CMS can be a bit daunting, but Payload brings with it a familiar way of working when compared to the likes of WordPress. It’s a field-based CMS, so building pages and adding content is an experience a lot of our clients are already familiar with.<h3>Version control</h3>Version control allows us to track and manage changes to our code over time. Every time we make a change to the codebase, we push this up to GitHub where it’s reviewed before being pushed to live. It’s an extra level of safety that means everything is sense-checked before it goes out into the world.<h3>Customisable</h3>It might seem trivial, but the Payload CMS can be fully customised and branded up to match your company’s brand identity.<h3>Quality</h3>Quality is what drives us as an agency. Thanks to TypeScript, we know we’re writing quality code every time. TypeScript is a superset of JavaScript, designed and developed by Microsoft. But, when compared to JavaScript, TypeScript provides us with more consistency and reliability thanks to it’s stricter rules. This means less room for error and a high-quality output.

Endless benefits

Sign up for all the latest news and updates from Si digital.

Get the latest news and updates

Since we’ve started working with Payload, we’ve seen countless benefits. From its customisation and flexibility through to its integrations and security, we’re loving developing and building with it. If you want to take a look at an example of a site we’ve built using Payload, head over to <a href="https://www.harwin.com/" target="_blank" rel="noopener noreferrer">the Harwin site we built</a>. In contrast, our own website is also built with Payload. It’s much smaller than the Harwin website, but still offers the same Payload perks that we love. This is a great example of how scalable and flexible Payload is, and how adaptable it is depending on the size of the site.We’re really looking forward to seeing what more we can do with Payload in the future and how we can pass on the benefits to our clients. If you’re looking for a website rebuild, give us a shout to arrange a consultation.

Moving forward with Payload

Have a read of some of our other articles

Why we’ve swapped WordPress for Payload

You may have heard the phrase ‘cobblers shoes’—this was definitely the case for us. We had been head down, full steam ahead on client work and had somewhat neglected our own brand and website.But we realised this was affecting how we were being viewed by potential clients.When you’ve been going for as long as we have, you’ll find your logo in loads of places. From the usual LinkedIn, Instagram etc. to Jira Helpdesk, Google, Email footers, Xero invoices and so on. Across all the touchpoints, multiple variations of our logo were being used.So we decided to treat ourselves like a client and get going on a full audit of where we were.

How we got here

Sam joined Si digital recently, bringing with him a fresh perspective on the agency’s brand. This sparked a wider conversation about rebranding the agency. Sam’s experience with brand design put him in the perfect position to look at our brand objectively and without any prior knowledge or prejudice.So, Sam got to work rebranding us.

Say hello to Sam

The first step we took was to look at our positioning. This was an important part of the branding process as it allowed us to pick apart our values, define the agency’s personality and work out how we want to communicate as a brand.Our brand proposition—We create digital chemistry—was the first part we settled on. This has actually been our proposition for years, but we know it’s catchy and it works well at reflecting our innovative, creative nature. It also gets across the chemistry we have with our clients. It plays well into our wider brand too.When we explored our values and personality, things got a little more exciting. We defined our brand archetype, <a href="https://www.lairedigital.com/blog/the-creator-brand-archetype" target="_blank" rel="noopener noreferrer">The Creator</a>, which informed our new brand values.

Positioning

Our values run through into our personality. We’re confident, authentic and ambitious, always looking to improve and grow. We’re not arrogant or over-confident. And we’re sitting on a strong foundation of over two decades of expertise, making us a great choice for our clients.This all gave us a good starting point to begin some design work.

A brand is never created from one idea, so we pulled together three unique conceptual routes. Each route played into our newly established brand position, but in a different way. <h3>Route One – Something Familiar</h3>Our first route took our existing identity and tidied it up, bringing sense to the brand. We kept our iconic beaker but broke it out of the hexagon and paired it with a new typeface—Mori. This was a natural progression for the brand, and maintained a level of familiarity.Beyond the new logo, we kept our punchy pink brand colour, but introduced a neon green and a graphite grey to give us a bigger palette to work with. We selected some contemporary typefaces and developed some ‘liquid gradients’ that played into the liquid in the beaker of our logo.All of this was capped off with a unique type-style, called ‘Progressive Type’—repeated headline words that are sliced in half horizontally. This was a way of highlighting key words and phrases in a visually engaging way, allowing us to create high impact type-led designs.

Concepting

<h3>Route Two – Something Different</h3>The second route took a totally new approach to our brand. As a creative and innovative brand, we aimed to get this across through an expressive and imaginative look and feel. We gave our beaker a little tilt, giving it a more energetic look and sat it next to a new typeface, PP Right Grotesk (check out those <a href="https://fonts.google.com/knowledge/glossary/ink_trap" target="_blank" rel="noopener noreferrer">ink traps</a>).We blew up our brand palette, introducing six new colours to the mix on top of our original pink. The palette was designed to let us flex our creativity and use colour pairings to convey our experimental and creative side. Some bold new typefaces were introduced too. Designed to allow us to really shout about what we do, the headline typeface could be used big, bold and cropped, really allowing the brand to lead with type.We introduced a set of doodles that we could use to further emphasise our text and layouts. Designed to integrate and play with type, the doodle would loop and overlap words to give designs depth as well as drawing the eye to key words.

<h3>Route Three – Something Daring</h3>We really pushed the boundaries here. Leaning into our passion for experimentation, this route pushed our brand into a completely new area.Our beaker remained, but in an inverted form, creating a clear difference between our old logo and our new logo. This was shifted to the right and floated upwards, allowing the eye to naturally move across the logo. We sat this alongside GT Flexa—an edgy, tech-centric typeface.We introduced a set of textural images that could be pulled through headlines. Based on macro photography of bubbles, the petrol-like texture worked well to represent the liquid in the beaker, and gave us an eye-catching graphic device we could pair with our typefaces. The brand also used ‘bubbles’ that slot into text lockups to provide structure and a more detailed look at the textural images.

Once we’d finished up creating our concepts, we began refining. This stage essentially brought us to our finalised brand identity. Route one was the direction to go, with a few bits carried across from routes two and three.We landed in a great place with it all, so let’s take a closer look at what gets us excited about our new brand.

Refinement & Launch

Our beaker has become an iconic part of the agency over the last two decades, and our new inverted beaker brings with it a familiar but fresh look. Moving the beaker out of the hexagon gave us the power to use the beaker more freely as well, so we can capitalise on space when it comes to social media avatars and small space applications.Our beaker balances perfectly against our new logotype. Designed using a custom cut of PP Right Grotesk, our new logo is fresh and bold, but still feels very Si digital. The structure and type give us the opportunity to go big and bold, too—just check out our footer 👀

Logo

Our brand pink has become a recognisable part of our identity over the years, and it’s something we wanted to keep as part of our new look. But we didn’t want to limit ourselves to pink, so we’ve introduced a new neon green and graphite grey to sit alongside our vibrant pink.We’re still leading with the pink as our primary colour but you’ll be seeing a lot more of our neon green. It’s a statement colour, and we’ll be using it as an accent colour to bring a bit more vibrancy to the brand. Both these colours are balanced against our new graphite grey along with black and white too.

Colour

We’re now a type-led brand thanks to our beautiful new typefaces. Our lead typeface is the same as our logotype—PP Right Grotesk. It’s a really flexible typeface with over 130 different weights and structures, but we’ll be using the Wide family. Designed by <a href="https://pangrampangram.com/" target="_blank" rel="noopener noreferrer">Pangram Pangram</a>, PP Right Grotesk works really well at larger scales, which helps to highlight its unique ink traps.Alongside our lead typeface are two typefaces, Aeonik and Aeonik Fono.Aeonik Fono is a mono-esque typeface, and reflects the software we use to code our websites and apps. It’s got a techy look about it, and works well for larger body copy. We use Aeonik for everything else.

Type

It can be difficult to visualise the <a href="https://sidigital.co/services">services</a> we offer. A lot of our services are within a similar field, so trying to differentiate between these can be tricky. So, we created a bespoke set of icons. Each icon is designed to abstractly represent its service. From UI & UX Design through to Middleware Development, our icons are unique, clean, and a little playful.We've animated each icon too, giving it a bit of movement. Whether it's a little rotation of one of the elements, or a line growing and shrinking, these movements are designed to give each icon its own personality.

Icons

All of this came together on our snazzy new website. From our bold new typefaces to our vibrant new colour palette, our new look really comes to life online. There’s some quirky new features too, like our vertical inverting breadcrumb.

Website

We’ve also introduced ‘mini case studies’. These sit alongside our larger case studies and allow us to show off some of our more technical work in a succinct way. You’ll find these dotted around the site in relevant places.Our new Behind the Scenes (BTS) social feed gives you a glimpse into what goes on day-to-day in—and out of—the studio. From summer parties to LAN parties, you’ll find it all in here.

We’re really happy with our new look, especially how it’s all come together on our new website. Our new brand not only showcases us as an agency, but it also reflects how we want to move forward into the future. Our innovation and creativity are pushing us forward so we can bring you creative and well designed digital solutions.If you’ve got a project in mind, or just want to have a chat, <a href="https://sidigital.co/contact">get in touch</a>.

Final thoughts

A closer look at our shiny new brand

It’s estimated that around 1 in 12 men (8%) and 1 in 200 women have some form of colour blindness. In the UK this means that there are approximately 2.7 million people affected, a considerable amount of the population, but they are often forgotten when it comes to designing websites and user interfaces.Here at Si digital we consider user experience and accessibility throughout every project. We use a variety of tools and techniques to help us understand visual impairments and use this knowledge to make our websites more usable and less frustrating for people who are colour blind.

Who is affected?

There are many types of colour blindness with different degrees of severity. It’s a common myth that people with colour blindness only see in black and white. Although this can be true, Monochromacy — also known as total colour blindness — is extremely rare, with an estimated 1 in 33,000 people affected. This severe visual impairment only allows an individual to see in greyscale.An important factor to remember is that for most people with colour blindness, distinguishing between different colours is not too difficult, it’s telling the difference between shades and brightness levels of similar colours which causes issues.The more common condition is red-green colour blindness, which is split into two groups. A person with Protanomaly has reduced sensitivity to red light. Red, orange and yellow hues tend to shift towards green, and appear less saturated. A person with Deuteranomaly has reduced sensitivity to green light, and will have difficulty distinguishing between blue, yellow, violet, reds, blues and greens.

What is colour blindness?

For a long time, the difficulties that arise from colour blindness have been ignored, not only in website design, but also television, movies and especially video games. There are many cases of users not being able to play a game, or being unable to progress because of essential UI elements being indistinguishable to somebody who suffers from colour blindness.Take this example from The Witcher 3...

Colour in the wild

See how the red markers on the floor become near invisible when switching to red-green colour blindness.The game features an ability to use heightened senses to follow scents, track footprints and find clues. However, the game developers chose a deep red colour as a marker, so there have been many users complaining that they couldn’t see these markers very well (or at all). A simple colour change, or the option to change colours, would have made this game more accessible.Colour blindness is a matter which needs to be taken seriously due to the high percentage of the population with vision impairments. If your website or application is particularly unoptimised, you could be losing a large amount of customers. For example, if a user can’t differentiate between a series of icons because of clashing colours and lack of contrast, that user could get frustrated and find an alternate service. If that is the experience of every potential customer who suffered from colour blindness, you’re losing over 8% of potential sales – for a business with £10,000,000 in revenue, that company could potentially lose a huge £800,000 in sales.

Although colour blindness can cause huge problems for users, it’s actually quite simple to combat. If you’re aware of the issues, then you’re already halfway there.<h3>1. Use contrasting colours</h3>Even people who have monochromacy still have a sense of contrast – the scaled difference between light and dark. To ensure your website is readable for people with visual impairments, you must make sure your content contrasts well with your background. For example, black text on a white background will have a high level of contrast and readability. Whereas yellow text on a white background has a low level of contrast and will be barely readable, even for people with full vision!

Designing with colour blindness in mind

<h3>2. Use different shades rather than multiple colours</h3>A monochromatic colour scheme — not to be confused with full colour blindness, monochromacy — makes use of multiple shades of one colour, rather than using various different colours. This will effectively minimise colour related frustration, and is a great way to include contrast in your designs. A monochromatic colour scheme doesn’t have to be black and white, using multiple shades of blue we can create a visually pleasing design with complete readability.

<h3>3. Experience colour blindness yourself while designing</h3><h4>Colour blindness simulation in Adobe Photoshop</h4>There are many free tools available that can mimic the effects of colour blindness, allowing you to understand how a colour blind person would see to ensure that your user interfaces work just as you intended them to. Photoshop has its own — slightly hidden away — proof setup feature, simply go to View > Proof Setup, and then you can choose between protanopia and deuteranopia. When you’re done testing, simply switch back to monitor RGB.<h4>Colour blindness simulation in Figma</h4>Unfortunately there is no native support for Figma colour testing, however there are various plugins that allow you do to the exact same thing. We recommend <a href="https://www.figma.com/community/plugin/1115550442410459794/color-blind" target="_blank" rel="noopener noreferrer">Color Blind</a>, a free plugin that shows you in real time what people with common colour vision impairments will see.<h4>Colour blindness simulation in Browser</h4>We use a Google Chrome add-on called <a href="https://chromewebstore.google.com/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg?pli=1" target="_blank" rel="noopener noreferrer">Colorblindly</a> that lets you simulate colour blindness on live websites or in a testing environment. This is a handy tool for colour and contrast testing as it offers multiple viewing modes including full monochromacy.

<h3>4. Choose colour combinations carefully</h3>Unfortunately as designers we don’t always get to choose the colours that we use in our designs, sometimes we’re limited by brand guidelines. But where possible, it’s wise to choose and test your primary and secondary colours before you establish a brand. Below is a chart of colour combinations that you should avoid using.If in doubt, avoid colour altogether and go for a simple black/white, high contrast colour scheme!

<h3>5. Use texture in place of colour</h3>When designing things like graphs and infographics, consider making use of texture or visual patterns to help differentiate between two colours. For example, take the pie chart below. A user with protanopia would find it hard to differentiate between the different slices due to the colours being too similar. However, if we simply add some texture or patterns, the graph is 100% more readable.

<h3>6. Avoid using colour alone as an indicator</h3>When designing elements like forms and complicated interfaces, you shouldn’t use colour alone as an indicator. Take the forms below as an example. The one on the left only uses colour as an indicator that something went wrong. A person with normal vision will be able to see that the email field has turned red, indicating there has been some kind of error. However, to a person with deuteranomaly, the green of the success field is indistinguishable from the red of the error field. The best way to combat this issue is to use some kind of icon, symbol or label to indicate that an error has occurred, as seen on the right.

The most important lesson to learn here is that unless you’re absolutely certain that somebody with colour blindness can differentiate between the colours you have chosen, then you should never use colour alone to indicate something important. Where possible, use icons, text, shapes, textures or other visual cues as well as colour when communicating information to users.There are many ways to test for accessibility, however these tools aren’t always fully accurate – ultimately the best way to see if your design is suitable is to perform real UX audits. It’s likely that you know somebody who is colour blind, why not get them to review your design?What we see as designers and developers isn’t always what your users see; they could be colour blind, using a screen reader or looking at your website on a 3″ smartphone from 2007. Creating websites that are accessible to everyone is essential, and should be part of any good design process.If you would like to speak to us about your new project and how we ensure we always deliver the ultimate, accessible user experience, please <a href="https://sidigital.co/contact">get in touch</a>.

Conclusion

Designing for colour blindness

The possibilities of AI are limited only by imagination, although regardless of how it is applied, in almost every case it is used to automate processes, improve efficiency and reduce costs. This has left many people wondering how it will affect them and has triggered concern over job security.With no industry left untapped it’s not only administrative, process-based and repetitive roles that are being transformed by AI. So we’re asking, how will it affect UX design?

What are AI's limitation?

Despite uncertainty of what the future holds, there’s one thing we know for sure; we’re not giving Sam or any of our designers the elbow in favour of <a href="https://sidigital.co/lab-notes/sid-the-office-robot">Sid the office robot</a> any time soon, or ever —although, we’re still very fond of Sid!

UX Designers won’t be replaced by robots

However, it could be argued that artificial intelligence will replace the designers of today and change the role as we know it. If that’s the case, what will the designers of tomorrow look like?

Before the role of user experience design first came about in the early 90s, designers had specialised and clearly defined roles such as Graphic Designer, Web Designer and Industrial Designer. Since then, the lines have blurred and we now have multi-skilled designers with a breadth of experience in product strategy, UX and UI; designing with interaction, experience and the end user in mind.In the not too distant future, it is predicted that UX Designers will become ‘Systems Designers’ or ‘Behaviour Designers’ and will feed information, data and instructions to AI algorithms through a set of parameters, constraints and goals to determine the behaviour of automated systems.Will AI really change the role of UX designers that much? Are we at risk of losing raw skill and talent to technology and automation?

How the role of UX designers has and will change

A <a href="https://www.pfeifferreport.com/wp-content/uploads/2018/11/Creativity_and_AI_Report_INT.pdf" target="_blank" rel="noopener noreferrer">study by Pfeiffer</a> revealed that 62% of design professionals believe AI and machine learning will be very important to their creative roles. Plus, 76% of survey respondents agree that their creative possibilities have increased over the past few years.In many ways, AI and user experience design go hand in hand. For example, artificial intelligence is dependent on continuous learning by leveraging data, the same can be said for UX design; it’s a continual process of testing and optimising based on user feedback.When applied to UX design, AI can implement the optimisation process. The technology is capable of collecting and analysing large amounts of data very quickly, much quicker than a human. It can use that information to run A/B tests automatically, understand the results of the test and update the product or design accordingly. It can then restart the process by testing other elements of the design.It may sound like AI is doing all the work; however, it still requires input from the designer. AI systems and designers will essentially work side-by-side. Designers will be the decision-makers and will feed information, rules and conditions to the algorithms that will then conduct the tasks.With this example in mind, there are several ways that AI can enhance designers’ capabilities including:<ul class="list-bullet"><li value=1>Reduce manual labour by removing repetitive and mundane tasks, increasing productivity</li><li value=2>Empower designers to make more informed design choices based on numerous data points</li><li value=3>Enhance capabilities of data analysis and optimisation</li><li value=4>Make design systems more robust</li></ul>And for their clients and the end users:<ul class="list-bullet"><li value=1>Facilitate a more personalised user experience</li><li value=2>Increase conversion rates due to hyper-personalisation and relevance to individual users</li></ul>So, what does this look like in practice?

How artificial intelligence will assist UX designers

You may already be using AI for your design work without realising. For example, if you use Adobe products, you’re likely to have used <a href="https://www.adobe.com/uk/sensei.html" target="_blank" rel="noopener noreferrer">Adobe Sensei</a> – a layer of intelligence that powers features using AI and machine learning to enhance the customer experience.Some of Adobe’s AI-powered features include:<ul class="list-bullet"><li value=1>Deep learning to help you find the most suitable assets for your project more quickly</li><li value=2>Machine learning to help you understand how customers behave and anticipate what they need</li></ul>Figma is in the process of launching an integrated AI tool that can be used directly in Figma to sort out a multitude of design tasks. For example, Figma AI can quickly mockup designs based on a written prompt, like ‘make a form with filters for a car app’. It can also quickly rename layers (something the dev team will be very pleased about), prototype user flows, remove backgrounds on images and create relevant content to fill designs.However, the use of AI to accelerate or automate UX design does not always have the desired outcome. Take <a href="https://thegrid.io/" target="_blank" rel="noopener noreferrer">The Grid</a> for example; a web design company that attempted to use artificial intelligence and a bot called Molly to ‘make websites build themselves’. After years in the making and millions of dollars’ worth of investment, The Grid failed to deliver on its promise. Here’s why…To enable The Grid, or Molly, to build a website, users were asked to choose a colour palette, a font, and a layout style. They would then add some content and, with these very limited design preferences, The Grid would build a website.However, if users are unhappy with the outcome there is nothing they can do to change Molly’s artificial mind and they’re unable to edit the design themselves. The designs were unimaginative and all very similar. Ultimately, the lack of choice and control left users unimpressed.

AI tools that assist UX designers

Given the examples of how artificial intelligence is used in design, it is clear to see that it will assist designers and not take their jobs, despite the scaremongering.Business has and will continue to evolve as a result of innovative and advanced technologies and we have to adapt with the world around us to remain competitive.Society is already incredibly reliant on technology and it seems that reliance is only going to accelerate. So, who is the robot really? We may believe we’re in control of AI, however, is it our puppet strings that are being pulled by technology?

The verdict

How AI is transforming UX Design roles

He is a robotic arm that sits in our office and is controlled over the internet by players from around the globe, all in realtime.We quietly launched Sid on 20th November and before we knew it the traffic started to pour in. Players were submitting Sid to some of the big news sites like Reddit and Hacker News. Fast Company tweeted a link to their 936,000 followers and traffic surged again.At one point we had 701 simultaneous viewers with a wait time of nearly 4 hours, and yes, some people did wait that long to play! Players started creating YouTube videos about Sid and some even set up Twitter accounts just so they could Tweet their score.

Meet Sid

The scoring system consists of push switches under each hole, when the ball falls through a hole it triggers the switch which tells everyone the player has scored. We found a rare angle of ball entry into one of the holes that meant the ball got stuck holding the switch down. The moment your go started you were then continually awarded points every couple of seconds! We found the issue and re-seated one of the switches in under 30 minutes and bought Sid back online. For similar applications we would definitely choose some form of motion detection rather than physical switches which can degrade over time with so many people playing.

Highscores for everyone

One afternoon we saw a rise in traffic from <a href="http://boards.4chan.org/" target="_blank" rel="noopener noreferrer">boards.4chan.org</a>. A referring domain in your logs that instantly raises the heart rate and gives you that feeling in the pit of your stomach. Anonymous, rapid-fire imageboard 4chan has a reputation for a reason, some of their members are behind some of the biggest high profile attacks on websites in the past 5 years including the public facing website of the CIA. So naturally, when we started seeing a surge of visitors we knew something bad was no doubt on its way.

Enter 4chan

Luckily we built Sid with the mindset of abuse and he had plenty of motor limit protection to stop the arm hitting the staging area or moving “out of bounds”. After 3 hours Sid was still standing and they’d been unable to wreck any havoc, until we suddenly saw a message appear on screen that wasn’t sent by us… We built in a global notification system so we could send messages to players and give them updates when required. A clever 4channer had found a logic bug in the code and was able to send 3 admin messages before we detected the issue, fixed it and closed him off! Thankfully 3 unsolicited messages were the only damage and the next 24 hours were business as usual. 4chan even started tweeting with the hashtag #freesid2013 to spur efforts to “free” Sid from his human masters! On reflection, we’re glad 4chan paid us a visit. We are confident in the security and reliability of the systems we build and it was reassuring to see Sid hold up against the worst.

What amazed us the most about this experiment was the response we had on social channels. Although we “gamified” Sid we never really considered him a full-blown web game, but that’s not how our visitors saw it. We saw people challenging each other for top scores over Twitter, YouTubers with millions of subscribers were uploading videos about Sid and 2 months on we are still receiving thousands of visitors from these videos every day.They say practice makes perfect, according to our database @lancethackeray played 330 times to achieve his high score. He recorded a video of his victory which you can watch. Now that’s dedication!

YouTube Gamers

After 130,000 plays one of Sid’s motors finally gave in. One afternoon he was unresponsive to left and right movements, after taking him offline to investigate we found one of the motors had completely burnt out and the cog’s teeth threaded. We placed an order for a replacement motor and within 24 hours Sid was once again online. For future hardware projects we will definitely have spares on hand, and would recommend metal gears rather than plastic for longevity.

Burnt motors

When dealing with user generated content — in this case player names — you always have to be aware of both security and profanity. We are all grown ups here but we were wary that young children might enjoy playing with Sid, so we wanted to keep our leaderboard as PG as possible. We knew using Twitter usernames would help the issue of security — if the username is deemed safe for storage and display by Twitter than it must be for us — but we naively thought they used some form of profanity filter for usernames. That was a bad assumption of course, especially when 4chan joined the party. However, we now have a reasonable <a href="http://pastebin.com/iyq6eNT1" target="_blank" rel="noopener noreferrer">list</a> (NSFW) of “bad” Twitter accounts we came across if it’s of any use. Some usernames aren’t bad, but their avatars are!

Relying on Twitter to restrict profanity

Sid was the third in a series of digital marketing initiatives we’ve worked on. The last two of these have combined the digital and physical world to engage on a deeper level with our audience. Each marketing campaign has seen a vast increase in traffic and interest for us.We’ve invested the time and energy in honing the technology, providing video streaming with less than a second lag and the hardware skills to keep Sid going with almost 100% uptime for 2 months solid and over half a million visitors during that time.There is a huge potential for this kind of digital marketing campaign. We are now looking to work with a like-minded brand who sees the potential in engaging with its audience in a unique way.To discuss the opportunities, <a href="https://sidigital.co/contact">drop us a line</a>.

Interactive marketing

Sid the office robot

There’s a lot to organise and the pressure’s on to get things right. With all this to contend with, it’s important to accurately identify the key insights. This improves efficiency and provides value to your clients with clear feedback.We have tried many different ways of recording feedback with participants. Each method became convoluted, making it harder to analyse data at the end of a test. So, we began looking for ways to improve our process.

User tests can be full-on

We have recently been looking at <a href="https://www.youtube.com/watch?v=8AKWYH1EzJI" target="_blank" rel="noopener noreferrer">Design Sprints and how user testing is compressed into one day</a>. This technique is simple in its approach and has been successful for us. It removes the bloat and keeps the work focussed. Today, we want to share and break down this way of working.

Stay simple and don’t over complicate

Before starting a user test, you will need:<ul class="list-bullet"><li value=1>Whiteboard / whiteboard wall</li><li value=2>Whiteboard markers</li><li value=3>Sharpies</li><li value=4>A pad of blue Post-its</li><li value=5>A pad of pink Post-its</li></ul>Now that you have your equipment, you can begin to record your user feedback. We usually test with 5 participants as this tends to be the sweet spot of not too many or too few. <a href="https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/" target="_blank" rel="noopener noreferrer">What Nielsen Norman Group wrote about testing with 5 users still holds true</a>. You can find up to 85% of usability issues with 5 participants. ‘Add more and more users, you learn less and less’.Before the first person arrives, you will need to divide up your whiteboard. Using a whiteboard marker, split the board into 5 columns. Add the names of your participants across the top. Down the left-hand side, add rows and label each according to the task or page you are looking to test.

Preparing for user testing feedback

As you do your user tests, it is important to make quick notes as you go. We tend to analyse our user tests in pairs to prevent any misinterpretation of comments. This is where we use our post-its to record different types of feedback. However, make quick, rough notes before transferring them to post-its at the end. We use blue post-its for positive comments and pink post-its for negative. A negative comment could mean a participant struggles or has to think about what to do next. Or they might communicate their problem out loud. Write these down as they are super important.Once you have your feedback, stick the post-its into the relevant row for that participant. As you do this, discuss and compare the feedback received and see where there is overlap.

Recording user testing feedback

Repeat this process for each of your user testing participants. Making notes as you go, then writing down the feedback on the relevant post-its at the end of each test. Once you have all five up on the board, you’re ready to begin looking for patterns. They should really jump out at you!If you take a step back from the board, it should become quite clear where the problem areas are. Look closer and you should be able to group specific insights. This will help you to build a picture of where the most common issues are.

Repeat for each user test

This is a simple and quick technique to record user testing feedback that a group of you can do together. It helps improve collaboration and the process of gathering insights.

Lab Notes