BuffaloGrid Hub OS

Hub Operating system

BuffaloGrid Hub OS

The BuffaloGrid Hub is state of the art and resides in the permanent collection of the Design Museum.

It is located in Bodega in the region of Uttar Pradesh, India and serves approximately 225 million people.

The network is controlled by a cloud platform and measures the output of the devices.

This sustainable infrastructure converts sunlight into units of power, is bought at the local rate, and charges phones to keep these communities connected.

BuffaloGrid Hub, showing phones charging

We worked with the executive staff to establish the service and how that blueprint would work from a user’s perspective with the business goals in mind.

This entailed understanding each person’s archetypal roles and how they played in the system. It also meant documenting and sense checking use-cases against what the business wanted to achieve, based on my assumptions. We then brought it all together to facilitate user goals.

The customers would plug in their phone and an automated SMS was sent with a randomly generated code. After tapping that code into the payment screen they were notified and charged for their usage.

They would then entrust their phone with the agent in the Bodega and leave it charging there.

Using animation to symbolise progress

The BuffaloGrid hub is dominating, monolithic and encapsulates classic infrastructure but we wanted to lift it into the connected age.The initial experience should reflect the quiet ambient values of always being connected that we’re used to having with modern infrastructure and premium devices.

Firstly, the power footprint of the hub was to be as reduced as much as possible and the most efficient way to do that was to make the interface black. Secondly, because of the profile of the average user, the interface needed to adhere to AAA accessibility. The palette of green on black was very restricting, so black on white was required for it to be customer-facing.

Communicating progress with Design

I looked at the brand assets that existed and redrew the BuffaloGrid hardware logo and separated it to communicate ‘beats of progress’. I maintained the same thickness but added a subtle rhetorical slant to communicate progress.
The idea was that, after the third beat, the process would be complete, so the animation would hold for a frame longer to essentiate this completeness.
The progress graphic would then loop and the colour treatment of white/silver on black gave a feeling of ambient progress.

Typography for the 225 million

Physically, the hub allows for 32 phones to be plugged in at once and the dashboard effectively guides the user through the different states with zero or minimal interaction.
The screen has an aspect ratio of 1:72 with a safe area of 996 x 547, working on an 8px modular grid.
The hub’s typography uses a ‘Major Second’ type scale and Noto Sans because of its sliding scale of clarity (from a small size to very large) and vast array of language and glyph support, needed to cater for Hindi with a Noto Sans Devanagari font.

The Interaction model

The interactive model was driven by a timed carousel system and clear events visible to the user. This was based on the status of the system, triggered by making a battery charge choice.
The main interface would work on a rotation of 30 seconds per screen. Once the user interacted with a screen, they were held there for a further 1 minute until it was reset.
The payment screen had two variations, both were AAA accessible with brandable areas, and the prices could be set remotely on the cloud platform to drive awareness of BuffaloGrid’s brand partners.

BuffaloGrid Hub with Battery Charge screen on display

Mobile options for sustainable charging

The premise of the interface was that you were purchasing a time-driven consumable, so the animation had to reflect the progress of the charge to the phone and was as visual as possible.
After experimentation, the final choice was to break up the battery UI elements into percentage parts, e.g. 25% per chunk, and then visualise them being consumed as the timer ticked down. Once they were consumed, the user was notified via the interface, and could remove their phone.

The payment screen had two variations, both were AAA accessible with brandable areas, and prices could be set remotely on the cloud platform to drive awareness of BuffaloGrid’s brand partners.
The QR code version was based on the idea that the user would text the hub number and amount they wanted, and get a confirmation SMS to unlock a port, but this proved too complex.

Upon completion, we worked with the agile team, based out of Africa, to see the cloud platform completed. We remained working on-site to test and work with hardware engineers to see the user experience and design executed.

As a result of the impactful work I did with BuffaloGrid in spring 2018, it moved from start-up stage to revenue generation by leasing out the cloud platform to Airtel and Vodafone India. They raised a further $4.35m in December 2018 from LocalGlobe VC and recently moved into supplying power at the point of sale for free, impacting tens of thousands more.

Agent charging Phone off BuffaloGrid Hub

Generative Research to find and frame problems

Research

Using Systems thinking to make sense of any subject matter

Information Architecture

Thinking around defining unique aesthetics for brand strategy

Brand Design

Thoughts around the future of brand narrative

Brand Strategy