Bitcoins.com

We worked with a major bitcoin exchange, on a site to explain the complexities of Bitcoin.

Working with Marty Cook and WeDoVideo Tokyo, we put together a lighthearted visual explanation of Bitcoin intended to be played on a loop, without sound.

We perhaps over-reach to create an alternate version of the rather ugly Bitcoin mark which was not very established at the time, wanting something cleaner and clearer. Suffice to say, it never really took off. Consider it lesson learned.

At the time Bitcoin was thought of as the currency of choice for the underworld — never mind this was pretty inaccurate (cash is far less traceable than Bitcoin), countering it was one aim of the site, and so we went with a simple, clear and friendly approach, as if a knowledgeable friend was explaining it to you over a beer.

As with many technologies, many people struggle with the abstract concepts at their heart, so we aimed to give people some understanding of Bitcoin at a metaphorical level through the many illustrations we used through the site.

We also named, designed and created a detailed prototype for a simple, social bitcoin wallet for the Japanese market, called Bitpocket.

Matt Innes Brand, Direction, Design
Ben Jennings Design, Code
David Hauser Code
Marty Cook Illustration

Next Project

Huxtaburger

Cobalt

Cobalt is an app security startup in San Francisco. We helped them with a brand and site.

Cobalt started life as Crowdcurity, as the name suggests, a crowdsourced web-app security testing startup in San Francisco, run by a great team of Danish Vikings. We helped with a new name, an eyeball / combination lock-inspired mark, and an approachable brand wrapped around it all.

With the site, we aimed to make their range of services clear, simple and accessible, with a friendly voice. We also did a brief UI pass over Central, their web dashboard, to clean it up.

As a big part of the site is the leaderboards for their security testers, where they get ranked against their peers, we worked with illustrator Marty Cook to create a range of icons representing all the bug types they can fix in client's applications — from access control to an SQL injection.

Matt Innes Brand, Direction, Design
Saori Kajiwara Design, Illustration
Lars Kluge Inkpad CMS
Mariusz Roliński Front End Code
Marty Cook Illustration

Next Project

Hive

Hive

Hive approached us for a brand refresh and UI for their web and iOS Bitcoin wallets.

Hive was a good brand to build on as they already had a great name, they just needed a more flexible mark, some consistency across their communication, and stronger typography. We started with the hex structure from honeycomb and created a new mark plus a range of geometric avatars for the app and site.

The idea behind Hive Web and Hive for iOS was to make an easy to use, secure wallet for retail bitcoin – paying in stores or sending to friends. We created a new way to find other users around you wirelessly, called Waggle, after the way bees move their bodies to guide other bees.

Hive 1.0 was a great if you held just Bitcoin, but after we added Litecoin it became clear it wouldn’t scale well to many tokens. So we redesigned it to accomodate a whole portfolio of tokens, with a tile UI, live search, and external app integrations to bring other services like price tickers and instant trading. In the process we also made it visually lighter.

Though it never got off the ground, we also designed a white label wallet system for Hive, along with a back end dashboard for clients to manage their wallet, get notifications, and real time analytics.

Matt Innes Brand, Direction, Design
Saori Kajiwara UI/UX Design
Ben Jennings Design, Front end code
David Hauser Front end code
Wei Lu Back end code
Matt Lenz iOS version

Next Project

Bitcoins.com

Huxtaburger

We designed the original brand, site and print work, and have been happy to see them grow into the Melbourne icon they are today.

One of the first players in the now-crowded gourmet burger scene, the original brand is a mashup of classic American diner with a 70’s Aussie milk bar typographic aesthetic — pressed metal diamonds meets red, white & blue fly strips, with the king of beef at the centre of it all.

The key UX concept that drove the site design was simple. Users should be be able to flip through the site on a phone with one hand while holding a beer in the other. Also, early on, we decided we want to be able to see what was in the burgers by tapping them. Put another way, exploding burgers.

It was an uphill battle to convince the client that we should illustrate all their burgers and products. Lots of people do it now, but at the time it was relatively rare. It worked well, and customers love it. Once we’d applied it to the products we extended it to the stores, making each one an individual animated icon. Try tappingclicking the ones below.

We put together a wide range of signage including windows, and boxes but without doubt this Hot Beef — Cold Beer neon is our favourite.

Matt Innes Brand, Direction, Design
Ben Jennings Design, Code
David Hauser Code
Mariusz Roliński Code
Marty Cook & Saori Kajiwara Illustration

Next Project

Golem

Inkpad

Inkpad is a lightweight publishing platform we made with Lars and Mariusz from Tsunagari.

The idea for Inkpad was fairly simple – an elegant way to be able to write, share and publish simple text documents to the web, via a Markdown-flavoured editor. As we used it more and more, we designed and built an online file system to keep track of all your own, and your shared pads.

Inkpad has 2 main work views. Edit for writing, editing and formatting with Markdown – and HTML if you like. Display renders your document as an elegantly formatted HTML document ready for sharing. You can lock your pad, or allow anyone else to edit it.

The mobile views haven’t all made their way to code yet, but the idea is, as with the desktop views, to keep it as simple as possible, with the app just getting out of your way and allowing you to easily write and collect your documents on your phone.

Matt Innes Brand, Direction, Design
Saori Kajiwara Design, Illustration
Lars Kluge Inkpad CMS
Mariusz Roliński Code

Next Project

Cobalt

Idealogue

We work with startups to create great digital products we believe in.

Idealogue

Matt Innes

Designer/Creative Director

Matt has worked as a designer and creative director in Australia and Japan for more than 10 years. His work has been featured in a range of publications on & offline. He holds a degree in Communication Design from Swinburne School of Design, Melbourne. He loves type, simple bikes & custom motorbikes. He is a firm but not wild-eyed believer in the utility and future of digital currency.

TwitterInstagramBehance

Saori

Saori Kajiwara

UI/UX Designer

A native of Shizuoka, Japan, Saori holds a degree in Communication Design from Swinburne Design School, Melbourne. She has worked as an illustrator and designer in Melbourne and Tokyo.

One of her projects, Email-san, was acquired by Google Japan. She has been a regular contributor to Tokyo digital culture magazine Brain. She is most comfortable when building animations and prototypes with her toolkit of Sketch, Atomic, Principle and Pixate.

Matt

PinterestBehance

Matt

Vizor

Working with Helsinki-based startup Pixelface, we designed a powerful system for creating WebVR in the browser.

The app we saw in mid-2015, then known as Engi, was very rough, but powerful. It had its own WebGL-based realtime 3D graphics engine, a ton of shaders and effects, the ability to output to stereo VR views, and a deep visual programming interface. We renamed it Vizor and created a new brand style for it. 

One of our first tasks was to clean up the programming UI. It could do almost anything, but was a confusing mess of tiny icons, unclear connections and hard to fathom structure. We introduced a colour scheme for patch types, accordions, clearer connections, and a consistent structure.

The editor is a fast and fluid webGL-based 3D editor with switchable orbit & VR cameras and single-click to publish. We introduced a unique circular grid centred on the HMD icon, for easy VR composing around the viewer, as well as bold, highly visible icons for HMD and lights.

Content on Vizor ranges from 360 photos to immersive stories, infographics and visual experiments. The player was designed for simplicity across 2D and VR views on desktops and mobile.

With a fully web-based file system, users needed to be able to have public and private views of their projects, along with drafts and public projects to keep things tidy. We prototyped and created this from the ground up, as it didn’t exist in the original prototype.

Due to the need to keep polygon counts and file sizes down for a reasonable page load time, we worked with illustrator Jeremy Edelblut to develop a playful, low-poly style to use across 3D icons for the editor, as well as library assets for users to build with.

Matt Innes Brand, Design Lead
Saori Kajiwara UI/UX design
Jeremy Edelblut 3D modeling
Kaarlo Kanninen Editor code
Jaakko Manninen Core code
Georgi Marinov Front end

Next Project

Inkpad

Golem

We worked on user experience design for the cryptocurrency-based shared computing project, as well as a brand that didn’t see the light of day.

On these type of projects we usually start with the brand process, in order to create a good toolkit and consistent voice to use in the product design, launch site and social media. In this case, the team wanted to do a user experience pass first, as they wanted to show some public progress, rather than waiting for a brand process to run its course.

The original Golem Alpha interface

One key problem to solve was that there would be two very distinct user types, Providers, who would run the app to earn digital tokens in return for their compute power, and Requesters who would pay to use the network to run tasks. Some of these users would do both, but many would not. This led to us dividing the UI for these groups. We explored these ideas with a number of wireframes and interaction prototypes.

Early wireframes for the Golem app

As we had not developed a brand yet, and the existing Golem brand was unsuitable, we developed the first visual pass as a fairly generic bootstrap type theme that we could build on. The toughest problem was really creating a system that could work for future unknown task types while also working well for the first integration, which was to be 3D rendering for Blender and LuxRender.

- Wallet balance
- Approximate wallet balance
- Gas balance
- Approximate gas balance
- 10.35
- $4.94
- 0.025
- $5.69
- - GNT
  - USD
- - ETH
  - USD
Approximately 325 tx fees
- Resources
- History
- Advanced
- 18
  Use the slider to choose how much of your machine’s resources (CPU, RAM and disk space) Golem can use. More power means more potential income.
- - +0.014 GNT
    Processed Task
    1:15Pending
  - -0.017 GNT
    HMD Model Bake 3.5
    1:038:01AM 28 Feb
  - +0.015 GNT
    Processed Task
    2:158:01AM 28 Feb
  - +0.013 GNT
    Processed Task
    1:158:01AM 28 Feb
- Custom
  Save as Preset
  CPU
  RAM
  Disk
  6 cores
  1.5 GB
  700 GB
  Allocate your machine’s resources exactly as you like. Remember that if you give Golem all of your processing power you will not be able to use it at the same time.
240 Nodes
Start Golem
- HMD Model Bake 3.5
  1:15 Remaining
  2:30Just now
- Planet Scene Light vers
  1:23:153:15PM Yesterday
- HMD Model Bake 3.4
  18:151:01PM 27 Feb
- HMD Model Bake 3.3
  21:5111:12AM 24 Feb
1 task in progress

A loop of the Golem app main views

The other key goal was to design something anyone could use, but also something that power users could customise to their liking. We had to push quite hard to keep the simple slide-to-allocate resources on the Network view, but balanced it out with an advanced setup for users comfortable with tweaking parameters.

The core idea was to make something that could go beyond the usual cryptocurrency brand and appeal to a more mainstream audience. The interesting points for us were the stages of the project the whitepaper envisioned — Brass, Clay, Stone, Iron. Creating a brand that could vary and grow from stage to stage was the idea we started with. We also liked the origin of the name — Stanislav Lem’s novel Golem XIV, about a conversation with an AI which is evolving consciousness.

Exploration and development for the Brass Golem character

Final Brass Golem character poses

We decided upon a character that would combine an AI and a traditional Golem, along with a flexible mark that could be animated to represent the network in some way. To that end we brought on illustrator Stuart Wade, whose work we’d admired on the Monster Project. The tricky part with the character development was to find something that was part AI, part golem, without being too robotic — and without feeling too threatening or overly cute. The reaction on Reddit to an early presentation was that we got that right.

Loop animation of the Brass Golem character

Mark Animated

Mark Horizontal Lockup

Mark Vertical Lockup

Mark Animated

Display Face

Realtime Text
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890 $£&

Mark Vertical Lockup

Headlines

Sharp Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890 $£&

Mark Horizontal Lockup

UI & Body

Roboto
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890 $£&

Brass Stage Colours

#005DD5
#FFC442
#37C481
#B5B5B5

A simple Reddit theme for the project

The beta launch page was to be fairly simple, as the app itself was still under heavy development. So the focus was just on alerting people to the Brass milestone, providing download access and encouraging users to come and talk to us on Slack and Reddit about testing the beta, and rendering 3D files, the first Golem integration.

Matt Innes Brand, Design Lead
Saori Kajiwara UI/UX design
Stuart Wade Character design, animation

Next Project

Vizor

Bitcoins.com

01

Watch the Video

02

A Simpler Mark

03

Countering Stereotypes

04

Visualising Metaphors

05

Japanese Wallet Prototype

06

Credits•Visit the Site

Cobalt

01

Crowd Powered

02

Aiming for Clarity

03

Bugs Categorised

04

Credits•Visit the Site

Hive

01

Hex Wild

02

Hive Wallet 1.0

03

Hive Wallet 2.0

04

Hive Hosted

05

Credits

Huxtaburger

01

Milk Bar vs Diner

02

Beery Browsing

03

Making an Icon iconic

04

Sexy Neon

05

Credits•Visit the Site

Inkpad

01

Simple Text

02

Edit + Publish

03

Mobile Views

07

Credits•Visit the Site

Idealogue

Projects

Team

More

Idealogue

Projects

Team

More

Vizor

01

From Engi.works to Vizor

02

Visual Programming

03

The Editor

04

The Player

05

The Platform

06

Editor Icons & Assets

07

Credits•Visit the Site

Golem

01

User Experience First

02