Beacon

A social network built from scratch for veterans and serving personnel. Brand identity, custom web application and a community alert system, brought together at bcon.uk.

Visit the project
Beacon red and yellow symbol beside the wordmark and UK Armed Forces Community strapline.

The Work

Beacon is a social network for the Armed Forces community: a place for veterans and serving personnel to connect, share everyday updates and keep in touch. I designed the identity and built the application from scratch, bringing the public-facing experience, account features and the systems behind them into one product.

The brief went beyond creating a familiar feed. Beacon needed its own personality, practical reasons to return, and a thoughtful way to handle its more sensitive role: helping people share appeals when someone from the service community is missing or at risk.

Beacon Explore on desktop, with service-community conversations and the main navigation.
Explore: public conversations, community updates and familiar social interactions within a custom application.

A shared identity across services

I wanted the brand to feel relevant across the Armed Forces, without the usual tri-service colour scheme making it feel more closely connected to one service than another. Red and yellow gave me a different starting point: the highly visible colours I associate with search and rescue around the world.

The rescue boat and helicopter photographs show the visual territory behind that choice. It is a palette that feels active and recognisable, with a clear connection to being seen and finding people. I carried it through the logo, buttons and key moments in the interface.

Beacon red and yellow symbol beside the wordmark and UK Armed Forces Community strapline.
Beacon: a red and yellow identity with a mark that suggests both the Union Jack and a scanning searchlight.

The mark has two readings. Its diagonal geometry suggests part of the Union Jack, while the shape also reads as a searchlight scanning outwards. That gives Beacon a British identity and a connection to its purpose, without relying on a particular service badge.

Scopes: stories through a different lens

Scopes take the familiar idea of short-lived stories and give it a shape that belongs to Beacon. Updates appear in a circle, like looking through a scope lens, rather than a rectangular story panel.

Create a Scope editor with a circular video preview, picture, video and text choices, and overlay stickers.
Scopes: short-lived picture, video and text updates composed through a circular, scope-inspired preview.

Members can create picture, video or text Scopes, with overlay text and stickers. The editor keeps that circular preview central, so people can see how their update will look as they compose it. Scopes expire after 48 hours, creating room for quick, informal updates alongside the longer-lived conversations in the feed.

The everyday parts matter too

Behind those distinctive features are the things a community needs every day: profiles, connections, posts, replies, reactions, bookmarks and direct messages. Longer-form writing has a home in Blueys, while notification and email preferences let members choose how they hear about activity.

I built Beacon as a responsive web app, with an installable experience and web push notifications. The aim was to make it feel comfortable on a phone as well as a larger screen, with the same community and account experience across both.

The Approach

Custom software, from interface to database

Beacon is built with TypeScript, React and Next.js, with custom CSS for the interface, Node.js on the server and PostgreSQL for its data. I built the application around Beacon’s own features and rules, rather than fitting the idea into an existing community theme.

That includes deciding who can see a conversation, how replies inherit its audience, what a notification should reveal and when an email should be sent. Shared rules connect those decisions across the feed, direct messages and background delivery, so each new feature can build on the same foundations.

Notifications have their own categories and delivery preferences. Activity can appear in the notification centre, with push and email handled according to the member’s choices. Those details are easy to overlook in a screenshot, but they make a significant difference to how an app fits into someone’s day.

Beacon Alerts: care beyond publication

Beacon Alerts supports missing-person and at-risk appeals involving veterans, serving personnel and blue-light workers. I designed it as a workflow, with a private request and review stage before an appeal becomes public.

The request process directs people towards police reporting first and gathers the information needed for review. Public appeal details are kept separate from private contact and supporting information. It gives the community a way to help share an appeal while keeping publication under review.

Beacon Alerts with the Found safe filter selected and identifying details removed from resolved notices.
Resolved Beacon Alerts retain a limited status notice while removing public identifying information.

What happens afterwards matters just as much. When an alert is resolved, the public view removes identifying details and images, leaving a limited status update. An appeal that was useful during a search should not become a permanent, searchable account of someone’s vulnerable moment.

A platform with room to grow

Building the core application myself means new ideas can sit within the existing accounts, navigation and preferences. There is room to develop the community experience without treating every addition as a separate product.

One example is the Digital Field of Remembrance, built in Three.js. Visitors can move through a field of poppies and open individual tributes. More than 500 tributes have been added at the time of this write-up, turning a technical experiment into a shared place of remembrance.

A view into Beacon’s interactive digital field of poppies.
The Three.js Digital Field of Remembrance: more than 500 tributes, with a separate case study to follow.

The field deserves a case study of its own. Here, it shows how Beacon’s custom foundations can support something more expressive alongside the everyday social network.

The Result

Beacon brings a distinctive brand, a custom social network and a considered alert workflow into one live web application. From the circular Scopes to the way resolved appeals are handled, the design decisions come from the community the product is intended to serve.

The gallery brings together the visual references, branding and working interface, followed by a short recording of the Digital Field of Remembrance.