Brand Identity Design Platform – Proposal
What is Brand Design?
When stating ‘Brand’ we refer to the perception we as a organization show the world.
When stating ‘Branding’ we are referring to the practice of actively shaping a distinctive brand.
When stating ‘Brand Identity’ we are referring to the collection of all brand elements that the organization creates to portray the right image of itself to the community.
Brand Design functions as a container to listen, evaluate, build or adjust to create symmetry through ideas, language, design and tools for the organization. This ensures everyone has the tools or elements they need to continue and grow.
Brand Design is not one discipline, It is not only not graphic design. A brand design team within a global organization could consist of but not be limited to : Graphic Designers, Developers, Engineers, Product Designers, UX/UI, Copywriters, Interior Designers, Architects, Art Directors, etc
The goal with a multi-disciplinary group is the ability to think as one unit together and communicate in a variety of outputs whenever needed.
This proposal is an example of how brand design would begin to think about approaching the scalability issues with visual examples.
What Is Brand as Interface?
Some might say that brands create identity through consistency, which creates trust. Sounds logical, but brands are not logical, they’re emotional. If you see a brand as an interface it allows you to explore the notion of brand experience being user experience. People don’t analyze usability, they enjoy it or suffer through it. Good usability means not needing to think in order to act. Strong usability, simplicity and a clear focus automatically lead to a strong identity.
Branding shouldn’t be pretty, it should be strong. Even anti-design or agnostic visual design with consistency in approach still creates a strong ‘branded’ sentiment.
Our interfaces, apps and website are our ‘brand’ and should reflect our principles and how we are constructed as an organization. Simply put, what you see is what you get.
The Future of Visual Design
Moving towards a DAO model we should consider sacrificing legacy design models and current aesthetics for maximum accessibility, functionality and neutrality. We should also be mindful and consider a minimalist approach in which the strongest elements survive not the most beautiful.
Our design choices should be based upon our principles at Status, which many of us have cryptographically signed, give us a path to follow and are being disregarded. Since we plan to slowly migrate to a decentralized platform we should consider and test these parameters and find our visual symmetry together.
Mobile, Desktop and More
Shouldn’t all the Status design language, fonts and visual identity start from our principles to which we agree on and build further? As we create more products and offerings it’s fundamental that people can move from one experience to another seamlessly understanding one design language.
Proposal
One Visual Brand Material UI Exploration based on the Design Principles
(Sketch File or PDF format)
A Connected Brand Exploration can be found here
Prototype of design behaviour here
We propose to evaluate and explore the following:
-
Revisit the original intent of this project and apply like-minded design approaches to reflect and reinforce that thinking.
-
One Visual Brand Design System
- Open Source Status React Material UI Library integrated with (Storybook or similar) That show live viewports and customization. Achievable with Bounties for each component to maximize efficiency (This is where design and development meet with one language) See Example Here created by Barry.
-
Figma is a tool for designers, not a solution for universal components in which designers and developers work together.
-
The style guide which has written documentation originating back to our principles which is aligned and considering each discipline within Status not only for design.
-
Product design should not be responsible for the entire brand design of Status, it’s just one part of many in the organization.
-
Scalable meaning anyone new to the Status community can understand and use our tools and language to continue expressing themselves.
-
Design guidelines and principles documented that have been considered for leveraging each aspect of Status not product alone.
-
A logo study
That fundamentally embodies this organization and what it stands for now and for the future: (See a concept framework design here)
- communicating a platform upon which other products are built (container)
- a symbol for multi-dimensional views of our principles
- functions as a visual behaviour users can interact with as a tool
Trade-offs & Practical Considerations
-
Creating a new language takes time and more understanding of all the needs across all our offerings to create maximum scalability from a top down approach rather than from the bottom up.
-
A design system requires agreement on our fundamental principles and their visualizations from all of us not only design
-
We would only be shifting language for a small amount of our current users in exchange for asking ourselves harder questions now and having the right solutions for our future audience.
-
We can save ourselves time and resources by not ‘designing as we go’ and everyone has the access to tools they need to build.
Reading below goes deeper into the specifics and written examples within application
Designing to Design Principles
Our interface should reflect our principles and be apparent across all offerings. These are some sited examples I have chosen to explore conceptually as a framework. The dream is that Status will lead and simplify an open source design system for our entire community, not only our own products.
1. Reading Data - Transparency
clarify which data comes from the Blockchain and which doesn’t
- Clarify the address of the contract(s)
- Link all Blockchain data to independent Blockchain explorers
- Clarify which data comes from oracles (Transparency of Code)
How?
Use css to change the color/font/shape to clearly distinguish Blockchain data Obviously try to be consistent across your project and use always the same “Blockchain color”
- use expandable references
- manage styling conflicts with link-icons
- Use a “Chain-view” mode and/or side panel
- Clearly show which links open the external Blockchain explorer
2. Writing Data - Transparency of Transactions
Transaction Data and Costs
- (Permanence) clarify actions that are irreversible (all writing Txs)
- (Value) clarify actions that involve money or value
- (Privacy) clarify actions that could potentially lead to user identification
- (Factor) clarify actions that generate new contracts in the users name
How?
Use css to indicate all irreversible actions
-
use double confirmation
-
Also offer the user to:
-
Cancel the action
-
Never show these pop-ups again (because she is an expert user) and when doing so tell the user that she could eventually reactivate the feature in the Chain-View side panel.
-
Clarify & anticipate future expected steps
-
Either with tiny written descriptions, label subtitles or with wizard like flows which have more steps to accomplish an action.
In the case of wizards:
-
Clearly show the user the number and title of the next steps
-
allow the user to inspect the future screens to understand what is going on and what is going to happen (Newbie Mode), although you should also grey out the functionality to not confuse the fact that she can have a sneak peek preview with the actual action.
-
Add options to the Chain-View side panel
-
The side panel could be the place for many of these warnings as well as offering an inspector into the transactions, defining:
-
The type of transaction
-
The data associated with the transaction
-
The gas costs
-
All other relevant information (Transparency of Code)
3. Push Data - Transparency of Smart Contract Events
Events are the notifications of the Web3 era
-
Clarify and make accessible to the end user all Events, even if they are just for developer purposes
-
Apply relevance: show interrupting messages only for information relevant to the current user, but still allow the user to inspect all Events in a separate Interface
-
Allow the user to subscribe-to, unsubscribe-from or temporarily mute certain Events
How?
-
Have a notification center accessible to the user, this is probably a section in the “Chain-View” side panel
-
use toasts for important messages
-
create filters to select/deselect only certain events or customise
4. History - Accessible and transparent User interaction History
- Provide a history of all transactions from a given address
- Clarify where is the history stored
- Give tools to navigate, search, export, and delete the history cache
How?
-
Similar to the Event notification center, have a User-History tab or dedicated page, probably inside the Chain-View side panel
-
Allow to filter for different type of transactions (value-eth, value-tokens, function calls, contract generating if pertinent)
-
Allow to filter by date, from the beginning or between dates
-
Optional user friendly addition: allow users to add a non-chain note field to the transaction, such as a simple reminder if they want to simply have a human readable and searchable plaintext
-
Search for transactions relating only to specific tokens
Export: allow user to optionally export the data in csv and explore it through other means, again, especially appropriate in case of large datasets
Delete: allow the user to delete the History from the local cache, but of course clarify that the real history of transactions is not deleted neither from their wallet nor from the Blockchain
Import: it makes sense to add an import option only if the Dapp allows the user to add custom notes to each transaction, otherwise the information can be simply reconstructed from the Blockchain
5 . Code & Environment - Transparency of Code
- Clarify which Blockchain is being used
- Clarify the address of the Smart Contract(s) that are being used for read and write operations
- Clarify where code is being run (local vs Remote Server)
- Clarify the web3 provider / Blockchain node
- Allow for DIY code execution
- Clarify the inputs required by the Smart Contract
How?
-
Have a “Code Transparency” page always accessible like the Terms of Service or Privacy Policy pages
-
Add to the “chain-view” panel
switches, filters or options to:
— display, with icons and/or by changing colors, which parts / components have data that is processed on a server
— display, with (the “cloud-to-chain” oracle) link-icons and/or by changing colors, which data comes from oracles
6. Time/Wait Management
-
(Manage the user’s expectation) Clarify at every transaction the average block confirmation time of the underlying Blockchain and the current network congestion
-
(Manage the waiting time) Show liveness indicators during waitig time
How?
As a sequence of UX events a Dapp should:
- Explain how gas choices will affect their waiting time (∞link.9 Gas Prices and TXs Reversal)
- show warning about chain specific times
- Show a progress or waiting icon until it’s not resolved
- If things are taking longer than normal, show a feedback and potential causes and/or solutions
- ie: “ it’s taking longer than expected. The network is currently congested.
Here are your options:
- -> Wait X seconds/minutes more
- -> add more gas to speed up the transaction
- -> get notified when done
7. Human Readable Hashes Format
- show a compact versions of the hashes but always show the initial and end parts
- allow users to easily copy the address
- If possible create a system to allow the user to easily associate a custom human readable name or text to the addresses
8. Permanent Newbie Mode
If we want mass adoption of Distributed Applications it means that we need to enable masses of people without any technical knowledge nor understanding of the Blockchain and its lingo to enter the space.
- Weave in educational information with the normal interaction
- Provide 2 or more levels of educational content: Blockchain basics and Dapp specific lingo
- Minimize and increase progressively the amount of new things and concepts that the user needs to learn
- If possible or relevant, accelerate learning providing the “expert’s interpretation”
- Don’t Loose the context
How?
Add small subtitles for commands all over the place (and refer to other principles to anticipate what transactions are going to do
-
Learn mode setting
-
Add to the “chain-view” or other parts of the UI, a switch (a “universal question mark” button) that can be turned on and off and enables or disables learning features
-
Glossary pop-up
-
When using lingo that is available in a dictionary, display a link-icon, an icon after the word, that if clicked or rolled over, displays a contextual pop-up with the specified information
-
In some cases, the pop-up should also offer the opportunity to “know more”, which will open another tab or a sidebar in the “chain-view” opened in the glossary tab.
-
Glossary page
-
in the chain-view or in another page entirely the Dapp should provide a page with all the terms, Blockchain and Dapp specific, that are being used in the Dapp itself or that are needed to understand its mechanics. This page should be redirected from the glossary pop-up, not linked directly.
-
In any wizard, it would be savvy to enable fast forwarding to the next steps so you can see what is coming, although all their layouts should be greyed out and disabled until you complete the previous steps. This is a good principle for any ui, not only of Dapps.
9 . Gas Prices and Transaction reversals
- Clarify what is Gas and Gas price
- possibly show gas values converted also to FIAT
- Allow for Transaction reversal
10. Sense of Community
- Clarify how many other members there are in the community
- Clarify who are the other members (choose appropriate categories)
- Clarify the composition of the community (ie sub-groups and their power over the project)
- The greater mission of the project (if any) and how their participation contributes to its achievement
How?
-
Show especially all information that could be derived by the users themselves by analyzing the Blockchain:
-
In DAOs consider enriching the information with anything that might be relevant
-
Obviously search for the categories that are appropriate and relevant to your project
-
Maybe allow users to choose their own tags, categories, bio description
Next Steps
It is clear that the requirements of “extreme transparency” proposed in these Web3 Design principles, create quite a burden for Dapp developers who are today more focused on solving many other parts of their projects.
Bootstrap like library
It is therefore obvious that there should be a standard toolset that developers could plug and play into their Dapps and maybe interface their calls to the web3 library and get, for free, all these transparency services for their users.
I’m imagining something like a Bootstrap like library for the Web3 era
Independent browser plugin (Extensions?)
Maybe it’s even advisable that there should be an independent tool that does offer users the advantages of the Web3 Design Principles wither the Dapp creator wants or not; a “transparency enforcer” of sorts, that could allow to identify malicious or sloppy Dapps by their degree of compliancy with some of the principles.
In this case it would probably be appropriate to create a browser plugin that injects its code into the Dapp and provides the chain-view functionality and maybe even a quick certification of the degree of transparency and trustworthiness of the Dapp.
Custom Services
Moreover in these principles there are many potentials for services, even commercial ones that don’t yet exist today.
One Unified Visual Language
The strongest theme for the visual system I can find through discussions within our community so far is to create one visual language that unites (represents) developers and designers seamlessly together. Currently within design we already have a difference of views.
By using shortcut the fundamental design needs of scalability we run the risk of seeing and responding to company problems rather than user problems. If a platform’s purpose or product is created to serve as a tool for ‘decentralized’ it must not use hierarchies in its creation.
By designing to these principles is the only way we will create an original design language that is true.
Unifying Design Principles
To unify our guiding principles and the visual aesthetics. I see these as two outstanding schools of thought which haven’t aligned yet, and once considered it’s conceivable that one of two options could surface;
-
We drastically shift towards pure functionality in order to maximize usage over brand individualism
-
We create a visual system based on what is acceptable in the marketplace forfeiting principles to appeal to a specific audiences
Status OS
I understand we are not an OS yet. However, if you think about everything that we are creating and what that ‘visual system’ we are creating might look like when applied to all of our current and future offerings (user and programming interfaces) we just might have the beginnings of a new language that we all use together over time. It would be nice to ask ourselves the hard questions rather than the easy ones to show that we have thought about the future of design and its scalability.
On Beauty
Following visual trends of fashion could be seen as a diversion for weak principles. When there is a strong set of principles visualised it will not make a difference which color it appears in, only if it helps a user accomplish their goal efficiently.
The beautiful aspect is the grand design of creating a simple, useful, honest and scalable visual system that represents us as a whole in principles and practice – much like a typeface or an operating system which can be distributed freely and used easily for mass adoption.
Perhaps it’s an auditing of necessities that are required to allow maximum functionality for each discipline and how they work together in harmony within the DAO framework?
- Visual Design - Evaluation of our brand design elements
- User Interface - Evaluation of how the design elements work together creating components
- User Experience - Evaluation of the components creating the story
- Language - Evaluation of the language we use to tell the story
- Engineering - Evaluation of how everything works together technically
- Security - Evaluation of securing us in this new platform
Appendix
(See my initial written proposal here)
- One brand font encompassing as many languages as possible to enable the speaking of one language as we type, regardless of the mother tongue.
(Status Monad Typeface here (to be be available in 75 languages)
- Our Interface as our Brand
- Components we build are considered and behave as our principles do. (i.e Our chat application educates people about the choices they make when communicating or transacting.
(Link to Examples using 3 binaries in a mobile interface see video linked here)
- A complete audit of all current and future component libraries to be uniform for free distribution in the future.
- How we interact with the UX we learn what it means to be self aware and trust ourselves and our choices
(Living Style Guide template here)
- Websites to consistently mirror our products and platforms
- strengthen our ideals and principles using the same visual components and minimal design
(See my written proposal here and my visual proposal here)
- Short term iterations for long term strategy of one cohesive design language.
- Consider what it means to be design agnostic.
All UI Design principles sited from herestrong text
– in fact most wont. Perhaps we can play with some of the concepts above and stress test them against:
