
## About Fifty Five and Five

[Fifty Five and Five](https://fiftyfiveandfive.com) are a full-service, business-to-business digital marketing agency based in London.

## The Brief

FFF needed someone to take their new website design and make it a reality. This meant a ground-up rebuild of the site itself, while also keeping the blog posts they have worked hard to create up until now.

In order to really bring the site to life, they wanted to focus on incorporating interactive and animated elements to the site by way of fade-in transitions, scrolling animations, animated hover effects and animated detailing.

A rich editing experience was very important to Fifty Five and Five: all content on the site should be easily editable with little to no input from a developer.

## Technologies

In order to meet the brief, the following technologies were used:
- [BeaverBuilder](https://www.wpbeaverbuilder.com/): a page-building plugin for WordPress that gives full control of page layout and content via an easy-to-use, intuitive interface
- [Meta Box](https://metabox.io/): a high-quality custom fields plugin that provides a number of fields types for a rich editing experience
- [Ninja Forms](https://ninjaforms.com/): a form builder plugin for WordPress that was in use on the previous site. It was important to keep this in the rebuild, as Ninja Forms is able to talk to a CRM
- [Yoast SEO](https://yoast.com/product/yoast-seo-premium/): an SEO plugin to allow quick and easy SEO configuration across the site
- [Autoptimize](https://autoptimize.com/pro/): an optimisation plugin for WordPress that helps keeps the site as fast as possible through automatic optimisation

## The Result

[Click to visit the live site.](https://fiftyfiveandfive.com)

![Homepage screenshot](https://ik.imagekit.io/alienjungle/alienjungle_digital/Posts/FFF_Site_Rebuild/Screenshot_2022-11-21_at_11.13.41_n6a3ZYo0j.png?ik-sdk-version=javascript-1.4.3&updatedAt=1669029345191)
![Approach page screenshot](https://ik.imagekit.io/alienjungle/alienjungle_digital/Posts/FFF_Site_Rebuild/Screenshot_2022-11-21_at_11.13.54_PzCHuGZQ7.png?ik-sdk-version=javascript-1.4.3&updatedAt=1669029336780)
![Paid page screenshot](https://ik.imagekit.io/alienjungle/alienjungle_digital/Posts/FFF_Site_Rebuild/Screenshot_2022-11-21_at_11.14.02_vh3O55bemB.png?ik-sdk-version=javascript-1.4.3&updatedAt=1669029340369)
![Blog listing page screenshot](https://ik.imagekit.io/alienjungle/alienjungle_digital/Posts/FFF_Site_Rebuild/Screenshot_2022-11-21_at_11.14.23_RGeXZWl4xo.png?ik-sdk-version=javascript-1.4.3&updatedAt=1669029346531)
![Blog post screenshot](https://ik.imagekit.io/alienjungle/alienjungle_digital/Posts/FFF_Site_Rebuild/Screenshot_2022-11-21_at_11.14.26_mbD2KPFDe.png?ik-sdk-version=javascript-1.4.3&updatedAt=1669029347727)

Rebuilding Fifty Five and Five's agency site

## About

[Sportank](https://sportank.com) is a sport-centric social network, database and news hub for American Football athletes and fans. Up-to-date game scores, league tables and fixtures which can be found and queried using the Gameday page, and relevant news can be found on the Media page. Users can sign up and create their own profile, populating it with their various sportint achievements and experiences in a LinkedIn-esque fashion.

We developed key UI features, including:
- User profiles
- Gameday & Fixtures
- Account editing
- Teams pages
- Raffles
- E-commerce checkout 
- Amelie Fund page

## Screenshots & Links

![Sportank homepage](https://ik.imagekit.io/alienjungle/alienjungle_digital/Posts/Sportank/sportank-homepage_1YKvdEKq3.jpeg?ik-sdk-version=javascript-1.4.3&updatedAt=1659270004071 "Sportank homepage")

[Homepage](https://sportank.com/gameday)

![Sportank Gameday page](https://ik.imagekit.io/alienjungle/alienjungle_digital/Posts/Sportank/sportank-gameday-page_gMFQ-7B6Z.jpeg?ik-sdk-version=javascript-1.4.3&updatedAt=1659270003867 "Sportank Gameday page")

[Gameday page](https://sportank.com/gameday)

![Sportank media page](https://ik.imagekit.io/alienjungle/alienjungle_digital/Posts/Sportank/sportank-media-page_lySNlBCrA.jpeg?ik-sdk-version=javascript-1.4.3&updatedAt=1659270004277 "Sportank media page")

[Media page](https://sportank.com/media)

Sportank

## Brief

Averbis approached me looking for help implementing their Speech 2 Structure service on the web. On the surface, the task was a simple one. The back-end had already been developed, and they needed a way to interact with their service on the browser by using a user's microphone. The user would enable their microhpone, give a description of their current symtpoms, and the service would attempt to provide diagnoses, identify vital parameters and suggest medication to treat the user.

## Understanding the problem

With a clear brief and some initial research, we spent time some trying to understand the technical limitation at play. The back-end service provided an interface (API) through which clients (websites and mobile apps) could communicate and interact with it using a technology called gRPC.

For those unfamiliar with what gRPC is or what is does, [the official gRPC](https://grpc.io/) site gives the following definition:

> gRPC is a modern open source high performance Remote Procedure Call (RPC) framework that can run in any environment. It can efficiently connect services in and across data centers with pluggable support for load balancing, tracing, health checking and authentication. It is also applicable in last mile of distributed computing to connect devices, mobile applications and browsers to backend services.

...a lot of words to describe what is, in a nutshell, a super cool and modern way to connect things together.

However, because gRPC is fairly modern technology and the web moves slowly, browser support for the specific feature we needed to make things work (bi-directional gRPC streaming between a browser and the existing gRPC server) wouldn't be a simple plug-and-play solution this time around.

## Planning

After understanding the technologies used and any techninical limitations, we could get on with planning a solution. My immediate consideration was "how do we normally establish a real-time, two-way connection between a browser and a server?"

The answer? **Websockets!**

Using a typical websocket connection, a real-time, two-way connection could be established between a proxy socket server and the browser. The proxy server would establish a bi-directional gRPC connection between itself and the gRPC server, and would pass incoming websocket data along. Once the gRPC server responded, the proxy server would pass data back on the same socket connection.

![a diagram displaying the networking relationship between the browser, the proposed websocket proxy server and the existing gRPC server](https://ik.imagekit.io/alienjungle/alienjungle_digital/averbis-flow_NKMoEVWRw.png?ik-sdk-version=javascript-1.4.3&updatedAt=1645726532605)

We drew the above diagram and sent it to Averbis with a description of how all these parts fit together. They loved the solution, and so it was time to get cracking with the build!

## The build

For the build, we chose to write the browser prototype using Angular, and chose nodejs with socket.io for websocket server implementation. These were easy choices to make as they are popular technologies that we have worked with before.

Having never used bi-directional gRPC streaming before, there was a fair bit of research and learning involved, but the learning curve wasn't too steep, and both me and Averbis are pleased with the end result.

## Delivery

Once everything was working nicely on my end, we threw the browser prototype and the websocket proxy server into their own repos and sent them off to Averbis. After spending some time tying their production server into the prototype (we were using a dummy server while the production server was being worked on) they reported that everything was working as expected.

Work

Rebuilding Fifty Five and Five's agency site

Sportank

Developing a speech processing proof-of-concept for Averbis

Want to work with us?

Email

WhatsApp & Signal

Call