Case Study: Identity and Design System for a Digital Currency

Decred is an open and progressive cryptocurrency with a system of community-based governance integrated to its blockchain.

Our goal was to create an engaging and recognisable identity and design system to support it. We worked out a common vision and a set of principles to bring longevity, togetherness and representation for it both as a cryptocurrency and as a project in any environment.

This identity represents Decred across different platforms, helps new and existing users to recognise it, gain trust and become more engaged.

The design system provides direction and makes it easier for anyone to communicate about Decred. It contains a set of simple + practical tools, principles and guides for different contexts and use cases. (e.g. for UI and applications, marketing materials and any other information design).

Logo and Symbol — Before and Now

Initial Thoughts and Findings

Traditionally visual communication for currencies relies heavily on their symbols. Any misinterpretation, fail at identification and incorrect reproduction has risk of being costly. The best examples of currency symbols (€ ¥ £ $) are designed with utmost simplicity and constraint. All of them can be recognizably reproduced by hand within a second or two. They can be reconstructed in different type styles and still be evident. The clear forms, common strikethroughs and semantics created over time provide understanding that one is dealing with a medium of exchange. They aren’t easily mixed up with neither numbers or letters.

Taking a look at cryptocurrencies, there’s over 700 of them. Unlike fiat currencies, most of them have either an unrefined image or a photo for the logo. In better cases along with more serious ones have actual symbols and logos. Looking at them all together makes one feel like being in a candy store. I see this kind of a visual state is hurting them as a whole. It communicates perhaps a get-rich-quick scheme rather than safe and serious atmosphere for managing the financial matters.

This is what we’re dealing with right now …

Objectives and Kick-off

Knowing it’s a big challenge to create a symbol with these objectives our game plan was to work on a new symbol and at the same time keep the original Nabla as a fallback (reconstruct it better on condition something new wasn’t qualified enough). The created objectives served as a very efficient filtering mechanism allowing us to rapidly debunk stuff and keep moving on.

Objectives
1. The logo, symbol and wordmark need to be distinctive, memorable and clear.
2. The symbol needs to be universal and hold its own place alongside other currency symbols as well as push cryptocurrencies standards.
3. The construction needs to be simple enough for easy reproduction. (benchmark: drawn on paper by anyone in a few seconds).
4. Endure any amount of friction thrown at it.*
*While we will do everything to support a correct use, there will nevertheless be cases of user variation making this a critical point.
5. Interchangable with the currency code DCR.
6. Adaptable to a number of contexts: standing alone, together with wordmark, next to a number, etc.
7. Carry over some of the visual and semantic weight of the original.

The more we worked on the new symbol approaches, the more we saw the weaknesses of the old and how it was holding us back in the long run.

Previous Nabla symbol and other triangles

Triangles do make visually strong symbols but also lack in dynamics. For that reason a lot of symbols based on triangles look confusingly similiar.

After some research we found dozens of bigger and smaller brands in a number of sectors using symbols with very similar characteristics to Decred’s Nabla. To make matters worse, several other cryptocurrencies were already using triangles likewise. The truly worst associations found in regards to the motif in hand were the triangular pedophile group symbols.

Another problem besides the lack of distinctiveness was that when scaled down, Nabla simplifies to a downwards arrow. This might have become a huge passive issue in the long run since Decred’s symbol will primarily be in a trading context. There you have candlestick charts pointing up or down. Who on earth would want to see their assets having a negative direction?

The downward direction is an issue i’ve noticed with several financial logos — quite recently with Nordea rebranding. I think if you’re dealing with financial stuff having any negative or downward trend hiding in your symbol is pretty much as bad as having subliminal dickbutt somewhere in there.

Symbol Process

Since we had a limited amount of time to work on the symbol the conceptual work was overall done in 3 to 4 day sprints. With each run we explored new directions and stress tested the ones that passed the inital fire trials.

We went over some 500+ iterations and versions in total

Our process for reviewing the results was mostly singular (as we usually try to do with EETER). Meaning presenting only one option to a larger reviewers group. This way everyone involved can focus on analysing and providing objective arguments.

A vast amount of research, objectives and values had to be kept in mind. However time has shown it’s notoriously difficult for anyone not fully involved throughout the process to find consensus between several options, while not inviting subjectivity into the room. As we had the clearest sight on the objectives and pitfalls it was essentially our job to kill off any concepts that did not objectively qualify.

Sprint no. 1
As a result of the first sprint we came up with a DCR monogram. The focus was on letters “CR” indicating its essentially a type of Credit. While “D” (decentralisation) remained as the underlying foundation. It accomplished the primary objectives had a very simple construction that could be stylised to different typefaces and weights and it also adapted nicely to different contexts, such as next to numbers and even hand writing.

Result of Sprint 1

After the review round it proved to be too narrow compared to other digital currency symbols. Also slightly lacking of balance compared to Nabla.

Sprint no. 2
Still seeing potential we continued iterating it and improving the symbols dynamics, balance and the order of letter forms appearing in the monogram.

The following sprint lead to a version that had the D/R letter bowl extended and in italic to deal with the narrowness. When diagonals from the previous version ended up too similar, poor in proportions and creating the feeling that it was somehow barely standing on one leg than. The reworked diagonals created a better counter-balance between the two.

Result of Sprint 2

While we felt confidence in this result, 3 critical problems emerged after review: 
1. This iteration started to rely too heavily on the capital letter “D” which is already used by at least 5 other known cryptocurrencies 
2. The capitalcase “D” in the symbol did not resonate with the lowercase “d” next to it in the wordmark
3. And it had a devil in the details — literally some subliminal fella, waving his hands had sneaked in there. Goddamnit!

Sprint no. 3
With not much time left in the planned schedule we focused on going through some of the earlier findings that were left on the backburner as well as explored new ideas. At this point we had on our table 3 clear ways to go, 1 being a reconstructed Nabla. After reviewing we reached an almost unanimous decision with Decred’s development team to go with the ambigram.

New symbol construction

The new symbol and its values
1. Foundational idea refers to the immutable currency-code “DCR”.
2. As an ambigram it roots balance from the symmetrical form. 
3. Resonates with the lower- and capitalcase idea of the wordmark. 
4. Has a strikethrough common for identifying currencies. 
5. When simplified is also an abstraction of a chain (blockchain).

Wordmark

“Decred” is a made-up word standing for “decentralized credit”. The initial version of the logo was written in capital-italic letters DECRED and placed in a context with darker color scheme. Because of that some people made the connections of “Dis Credit”, “Not Credible” “Decry” etc. This was an issue as we would not want it to epistemologically represent discrediting (removing credibility).

In order to minimize the negative connotations and help develop new associations smoothly and without friction we began dissecting the typography of the wordmark.

Overall it became a matter of gestalt psychology. There were no curves to balance out the sharp forms. More roundness was needed to make it feel humane, friendly and approachable. Writing DECRED in capitalcase also created a tight blockform that didn’t really hint to the parts it was made of.

After some typographical exercises we noticed writing decentralized in a few different ways had a subtle effect on how it was perceived.

1. All capital letters — a block with no hint on branches
2. One capital letter — one central point to focus on
3. All lower case, no capital letters — no central point to focus on, not a strict block, top sides feel like smaller branches.D

A lowercase “de” also created more rounded shapes to balance out the sharpness. Fairly minimal solution was writing it “deCRED” with “de” being lower case and “CRED” as small capitals. This provided optical balance and a hint of the two parts. As both lower- and capitalcase “c” are visually the same, we needed to avoid confusion of dec-red split. For solution the character weight for “de” was made 25% lighter. This proved to be the optimal weight difference when scaling to various sizes.

The final construction of the wordmark is based on Gothams no-nonsense and hardworking letterforms.

System

We needed to make it easier for everyone to communicate about Decred and simplify problem solving. As a first level solution we created the visual communication toolkit for everyone. It contains a set of simple + practical tools and guides for different contexts — e.g. creating marketing materials, information/communication design and UI/application design.

As a follow up we’re working towards a larger interactive design system. This will grant better accessibility to the existing work and knowledge base. This can considered like having a common language. Having a quick access to the knowledge and assets will streamline the future work processes, saving everyones time. A greater consistency in results will also raise the overall quality level.

Toolkit overview

Color
The color scheme was initially based on the original RGB Blue/Turquiose combo. This was reworked to be cleaner and brighter in order to take full advantage of the RGB color space as most of the communications happens on screens.

Depending on the type of graphic application the color scheme can focus on either activity (by increasing the influence of Key blue & Turquoise) or calmness (by increasing the influence of dark blue or white/grey). We’ve created a scale of activity from where an appropriate level can be chosen considering the context and objectives of the design.

Extended color set

Typography
We selected two typefaces to support Decred’s design system. The main requirements were: being open-source, working for an international audience and functioning well in user interfaces. They also needed to be complementary to the wordmark (I don’t think it’s generally good practice to have the primary typeface the same as wordmark).

Source Sans Pro was selected as the primary typeface, supporting majority of the use cases. Inconsolata is the secondary typeface intended for content that requires clearer legibility and focus — for what the monospaced font is the best at(e.g. numbers, scripts, hash codes etc).

Numbers
A very specific problem emerged when we started designing UIs with numbers. Decred like most digital currencies has 8 decimal places. By standard all the numbers are displayed. Having this many numbers creates quite an overwhelming amount of data.

We addressed this issue by creating a common typographic algorithm to subside the mass of numbers. The logic is simple. From the third decimal place the font size is decreased by 25–50% (depending on the type size). This works quite well as long as the font size remains above 13 pt.

Iconography 
We designed a set of icons to universally represent a variety of processes, tools, actions. Each icon has a visually distinct motif standing for what it represents and relevant to the digital currency sector. The icons are constructed on a 16x16 grid for clarity at small sizes. The style is slightly rounded and bold in nature to complement the symbol. They function both as duotone and monotone.

Icon set

Illustrations
We created friendly and approachable illustrations to visualise the key values and promises as well as make the importance behind the “difficult terminology” on decred.org more understandable and inviting for new adopters.

Technology — hybridized consensus system

Characters have the ability to tell a story or explain an idea without words. People will respond to an expressive character they can relate to. We began developing Decred’s characters by creating an understanding and a vision of who each of these characters are and formulating their basic stereotypes.

For reference we used a variety of aspects from reality: team members photos, posts on twitter, previously used retrofuturistic material, symbol construction logic etc.

Character development
Four primary scenes
1.
Technology 
 proof of work, proof of stake hybridized consensus 
2. Development
insight of the ecosystem, promises of quality and security of the technology 
3. Governance
meritocratic principles and the general importance of having governance
4. Community
for reference we used a variety of aspects from reality: the real team members photos, posts on twitter, previously used retrofuturistic material, symbol construction logic etc
Illustration set

Platforms and apps

In the following milestones main site and key platforms received a design overhaul for a consistent and professional representation.

Decred.org

For new users the goal is to help with the on-boarding process, building understanding of Decred as well as improving the general experience. The higher level goal for Decred.org was to create international awareness and legitimacy.

Each platform was built relevant to its functions. Platforms with big amounts of data to grasp are focused on calm compositions and tonality. Clear hierarchies and highlighting interactions help users orient around easily. On the other spectrum marketing and promotional materials needed to be delightful and stand out were made brighter, fresher and juicier.

Decrediton Wallet

Stakepools, mainnet explorer, documentation and other platforms

Webwallet

Summary and Results

We’ve held a clear sight on the objectives and addressed all the issues that were mapped out. A strong new symbol, unified identity and design system will hopefully provide Decred with a strong foundation to keep growing long-term. So far feedback has been positive by the team and community members.

Reflecting back on our methodology for creating common components and documentation, we could have put more attention on it even earlier. Not everything emerged fully mature. This lead to some platforms being less refined than others. We will be revising and evolving the components continuously to keep them fresh and relevant.

As a follow-up, we plan to work on a design development roadmap. 
Some of the steps to expect include:
- Motion design for Decrediton wallet and defining basic motion principles 
(signature interactions, transitions, microanimations etc) 
- A proper interactive library of ready-to-use front-end components
- Proposal of DCR symbol for unicode.org

Regarding any questions, notices and suggestions, please leave your feedback at the Decred forums.

Thanks!
www.decred.org
www.eeter.co