Integrations

Conferences

App Development

Development

Agency

Hack Projects

Design

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

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

Get the latest news and updates

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

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

Have a read of some of our other articles

A closer look at our shiny new brand

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