Case Study: Identity and Design Development for a Digital Currency
Decred is an innovative cryptocurrency with a focus on solving blockchain governance.
Our goal was to create an engaging and recognisable identity and a design system to clarify the rationales integrated into the platform and products. 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 open source design system provides direction and makes it easier for anyone to communicate about Decred as well design and develop products. 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).
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 traditional 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. We see this kind of a visual state is hurting the ecosystem as a whole. Communicating perhaps a get-rich-quick schemes rather than the trustless and decentralized improvements for managing the financial matters.
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 pitfalls of the old and how it was holding us back in the long run.
Triangles do make visually strong symbols but also lack in dynamics. For that simple 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 and projects were already using triangles likewise.
Another problem besides the lack of distinctiveness was that when scaled down, Nabla simplifies to a downwards arrow. This risks becoming a subtly plaguing long term concern since Decred’s symbol will often be seen in a trading context, with candlestick charts pointing up or down. Who on earth would want to see their assets having a negative direction? The downward direction is an unfavorable subject we’ve noticed with several financial space logos — quite recently with Nordea bank rebranding.
Many crypto projects go further with the triangle, shaping them into likes of pyramids, most notably Ethereum. We see this as another issue due to its conspiracy appeal, i.e. Eye of Providence on the dollar. And more so risking a sketchy graphical reference to pyramid schemes.
Symbol Process
Since we had a limited amount of time to work on the symbol bulk of the conceptual work was done in three 5 day sprints. With each run we explored new directions and stress tested the ones that passed the inital fire trials. Summaries of these are shared below.
Our process for reviewing the results was mostly singular (as we usually try to do with EETER). Meaning presenting only one option to a reviewing or stakeholder 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 top 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.
After the review round it proved to be too narrow compared to other digital currency symbols. Also lacking the 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.
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. The symbol did not perform in scale quite as well as some of the others. And it had a devil in the details — literally some subliminal fella, waving his hands had sneaked in there.
Sprint no. 3
After reviewing the options on the table, we reached an almost unanimous decision with Decred’s development team to go with the ambigram due to its simplicity, strong form qualities and least cons of all three top variants.
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.
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.
The current release is intended as a stepping stone towards a larger interactive design system. This will grant better accessibility to the existing work and knowledge base. 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.
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.
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.
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.
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.
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
Platforms and apps
In the following milestones main site and key platforms received a design overhaul for a consistent and professional representation.
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.
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 base components and documentation, we could have put more attention on it even earlier. As the products addressed many completely novel concepts which needed to be translated from command line functions to a practical GUI, 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.
Feb 2017
Thanks!
www.decred.org
www.eeter.co
