In January, Charles Hoskinson messaged to say he’d come across an online video that he wanted us to check out. I took a look at the link he sent, and found that it was indeed eye catching. A cryptocurrency fan had studied Cardano, and had made an animation of its development history. The data visualisation showed each piece of Cardano code appear on the screen as a brightly coloured node, at the time it had been written over the past two or so years. From only a handful in number, over time they mushroomed on the screen, resulting in a complex structure with many interconnecting parts.

This sparked an idea at IOHK. We’ve had our fair share of trolls, making false accusations online that Cardano is "vapourware", i.e. that we have no product. This animation wasn’t just beautiful, it was functional, because it destroyed those claims completely. Using data freely available from the development website GitHub, where Cardano developers had registered each piece of code as it was written, you could not only see how active they had been, but that Cardano was for a long period the most intensely developed cryptocurrency of all. We wanted to see where we could take this idea.

The design team had recently started a project to refresh our brand across the portfolio of Cardano websites. We would overhaul the design of each website and the information it displayed. We would make the websites more intuitive to use and convey data more effectively and in an information-rich way. This would give users the big picture but also allow them to drill down to understand details in a way that had not been done before with any cryptocurrency project.

Because the animation had been so captivating but also served a useful purpose, we decided to make it an intrinsic part of our design refresh and Scott Darby, IOHK creative coder, got to work. Meanwhile, visual designer Juli Sudi would lead the rest of the work, and create a recognisable look and feel for the brand.

Evolution of the initial designs

Groundwork

Juli says: "The first steps for me were finding a style direction and creating core visual elements that could be shared across the pages and serve as a backbone of further design efforts."

She chose iconography and experimented with colour pallets and layout styles. For each potential direction she created a test design using the base theme in different ways, such as varying the icon style, typography, spacing, colour swatches and gradient options. The test versions were shared with the team to gather feedback and to choose the elements to be taken further.

After many experiments and ideas, we landed on the principle that the design should be very functional. Colours would represent something rather than be chosen just because they were pleasing. The form should follow the function. We approved a direction that was still a rough concept, but was an agreed starting point for building up the new design.

Community Involvement

Next, Juli began a discussion with a community member and graphic designer from Stuttgart, Germany, named Felix Koutchinski. He had come to our attention after he wrote a blog about the Cardano roadmap design. His feedback became important and we worked with him closely. The community should be involved in everything we do because ultimately this technology is theirs.

Discussion with Felix highlighted many points that we had overlooked about the roadmap. Without a filtering function, it was hard to find the information you were looking for. Sorting the tasks by progress or recent update was a high priority for visitors to the site. The development milestones did not follow each other chronologically but progressed in parallel, which called for a different style of navigation saving users' time moving down the page. We should show completed development more clearly. There should be a summary explaining each part of the project. Users should be able to filter content by category, such as development phase (Shelley, Goguen etc) or by whether the work was complete or not, or by who carried out the work (IOHK, Cardano Foundation, Emurgo).

Below, you can see three layouts. The first is the roadmap as it was, the second is Felix’s design, and the third is the new layout we settled upon.

As these ideas were developing, Juli was also working on a colour pallet and style guide, below.

Medusa

Files that have been recently edited are coloured red and dormant files are blue. We chose to make our visualisation 3D in contrast to the original 2D animation. We also found great ideas that we borrowed from cardanoupdates.com, a website produced by a community member.

Medusa will feature on each Cardano website. For the best experience view Medusa on desktop with the latest version of Google Chrome, Mozilla Firefox, Opera, or Safari. Every development project has a different GitHub file structure, and Medusa will represent this and act as a unique fingerprint for each one. The full-screen view with rich interactive functionality is available by clicking on the glowing button in the header of the Cardano roadmap. In future we will include more features. These will offer viewers a means to explore the code, and understand more about the development in a way that is not only useful, but beautiful too.

Bringing it all together

At this point, senior full-stack developer Tomas Vrana began to work with Juli on bringing the designs to life in production. Tom helped refine the designs so they would work well in practice. One example was that if a user filtered content by the partner responsible for the work, it would not make sense to have a column displaying developer commits because Emurgo and the Cardano Foundation do not produce code. Medusa is still very much in its infancy, and at best a working proof of concept. Over time, we will be rolling it out across all devices, and bringing more functionality and intuitive widgets to the UX.

The Cardano roadmap wasn’t the first time we deployed the new designs – they were used on the Symphony of Blockchains and Cardano Testnets websites that recently launched.

New Daedalus website design with Medusa, coming soon

Alexander Rukin took Juli’s designs and very quickly built the new Cardano testnet website that launched at the end of May. The wonderful thing about these new designs is that you can take and translate them for various uses. The content of the testnet website is very different from the roadmap and Alexander did a great job adapting the designs. Alexander is also responsible for the design of Daedalus.

New Cardano testnet website

George Clark and Jonathan Smillie, who are full-stack web developers and designers, teamed up to give extra firepower to the testnet website launch. For the first time, Cardano is offering smart contract functionality for testing, and George and Jonny pulled long hours to ensure the website was successfully launched. An added challenge was that the new designs were delivered under a tight deadline, and project manager Robert Moore helped enormously to get us to the finishing line.

New Cardano roadmap with Medusa

Today, we launch the refreshed Cardano roadmap, where you can see the result of all the work described above. You can view the new features, from exploring the list of developer commits, to receiving notifications when the roadmap is released each month.

We’d love to hear your feedback, please let us know what you think. We may even end up working with you as we have done with other community members.

Now for the first time Cardano has a real brand identity that exactly represents the project in a visual way. We will be rolling out this restyle across the rest of our assets, including Why Cardano and Cardano docs. Follow IOHK’s Twitter and YouTube to stay updated. The redesign will completely redefine how you understand IOHK projects, and evolves how we communicate as a company.

At IOHK we believe that Cardano is not just a development project: it is distributed systems, it is social science, it is a political movement, and among other things, it is also a design challenge.

New intuitive navigation
New layout gives a better perspective to the information presented

Join in the discussion about the redesign project on the Cardano Forum.

Just who was Daedalus? It was the first of many questions the design team had to answer when we started work to find a logo for the digital wallet that will store the Ada cryptocurrency. Daedalus is an unusual name. We were in Riga, on an IOHK working sprint last autumn, when we got the brief to develop the visual identity and brand for the wallet, so the first thing we did was some research online.

It turns out that the name was chosen with good reason for a cryptocurrency wallet. An important figure in Greek mythology, Daedalus was the father of Icarus, a great artist, an innovator… as well as the creator of the labyrinth that kept the minotaur forever captive._

IOHK wants the wallet it is creating to be the best cryptocurrency wallet out there. Not just a place to store, send and receive cryptocurrency (the first of which it will hold is Ada) but a place where you can later access plug-ins and other developer tools/SDKs, anything from managing your mortgage to splitting a bill between people. The vision is that it will become a platform full of applications, and be as important a product as Internet Explorer was for Microsoft._

The creative team needed to find an identity that would connect to that vision, to the meaning behind the name Daedalus and his story, and to what IOHK is as a company and the technology it builds._

We got together to discuss it and an idea came out._

According to the myth, the minotaur never escapes the maze – that’s how good a craftsman Daedalus was._

We argue creatively that the minotaur is your money, or your digital identity. The minotaur is forever held in an infinite prison where only you control your keys. We have a lot of clever cryptography powering the security of the wallet, and like the minotaur in his maze, your money will never be able to escape our wallet, so Daedalus represents our expertise in security, and in building methodically and securely._

Tomas Vrana and Alexander Rukin, both part of the design team, came up with some early concepts. Among many different designs, Tom produced a minotaur; Alexander came up with a contemporary “D” design. They came up with creative sketches and drawings, trying to gauge how best to approach the form and the function of the logo. Some of their early designs are below.

Ribbon variant

Flat maze variant

Ribbon variant

Origami Minotaur variant

Gothic “D” variant

Minotaur variant

Then we threw open the design challenge to a competition, connecting to a community of designers to offer their solutions. This would provide us with a wealth of ideas and give us interesting feedback. We had about 100 entries from graphic designers, ranging from the bad, to the good, to the funny. There were solid corporate identities, also very creative executions. There were lots of designs based on the letter “D”. And lots based on keys (with a nod to public key cryptography). However, that was too obvious. We are a crypto wallet, yes we have keys. A simple key in a logo didn’t covey a strong brand message, it didn’t set us apart. None was quite right._

We were looking for something that would connect to the Daedalus story and have a huge potential for creative story telling in being a brand we could develop._

So we updated the brief and asked the designers to focus on the story of Daedalus. There were about 30 entries this time. A maze in the shape of a key was good, but not excellent. And there were lots of minotaurs. On some, the execution was not great. There was one that looked like a pixelated deer._

The one we finally chose, with the help of IOHK’s two founders, was by a designer called Zahidul Islam. It’s contemporary, it feels modern and fresh yet connects to a very old story. It has the minotaur. It’s a well crafted form, it’s balanced, and yet still has the maze motif in it – it reflects the identity of our brand._

There was one issue, it was quite complex, which meant it didn’t work at smaller sizes. So we worked with the designer to develop a brand hierarchy – which comprises a primary, secondary and tertiary form for the identity to be used in various situations as the rules dictate._Below are the primary, secondary and tertiary images, each with successively less complexity.

The primary logo will be the larger formats, for example to be used on T-shirts, or on main focal areas such as loading screens. (We have a plan to develop the identity, to make it a “living” brand that is dynamic, so you see it moving if you have to wait for the screen to load for instance.)

The secondary logo will be more of a symbol and used at smaller sizes. Some of the complexity has been removed, and it will be used if the requirements are for 64 pixels or smaller. And then we produced a tiny icon, to be used for example as a security feature on paper wallets.

The colours you see might change. The colour palette of the brand has only black and green in it now.

So why did we go to all this effort over five months?

Behind the Daedalus wallet is so much time, money, skill and effort. You wouldn’t want to represent all that hard work with a mark that is unconsidered, or one that lacks capacity to carry the story of Daedalus. You want to bring enigma, some creation to the symbol that represents your quest. This is about more than a platform, it is a brand and about building brand allegiance. It has to stand out, be different and make people think of you. This brand has a lot of runway, a lot of potential for development creatively. The design may change as the brand evolves, but the current identity will scale and develop into something wonderful from this point on._