Introduction
The UMA protocol and brand have been designed to be simple, so it naturally fits into your product. The guidelines that follow outline the standards for the use of UMA's product and branding elements. They’re here to help ensure a consistent, trustworthy and professional experience for users using UMA in your product.
All the screens and components featured in this doc are available in an open-source Figma file. Feel free to duplicate it to your drafts and use it however you like to help you implement UMA.
Design considerations and constraints serve as guiding principles informing product design decisions. While not exhaustive, these considerations aim to assist designers in creating an UMA implementation that is user-friendly, visually appealing, practical, scalable, and aligned with industry practices.
Reduce cognitive load wherever possible. Consider automating complex tasks in the background. Streamline flows such as sending payments, creating UMAs, and inviting others. Prioritize clarity and ease of use to create a straightforward and intuitive user experience. Employ techniques like progressive disclosure to simplify sophisticated operations.
UMA utilizes Bitcoin and the Lightning Network, which are complex systems employing cryptography. For users less familiar with cryptocurrency, consider simplifying or omitting technical details from the user experience. Often, users only need to know how to use the product, not the intricacies of the underlying infrastructure. For instance, in the send flow mock, the words "Bitcoin" or "Lightning Network" never appear.
Provide immediate feedback to users when they interact with the product to confirm their actions and outcomes. Use visual, auditory, or tactile feedback cues to acknowledge user input, validate successful actions, and prevent errors proactively.
Predictable patterns foster familiarity and ease of use, facilitating smooth navigation and interaction. Reduce guesswork for users by providing clear indicators of next steps and expected outcomes. Maintain consistency in design elements, patterns, and interactions throughout the product to enhance trust, familiarity and usability.
Establish a clear visual hierarchy to effectively guide user attention. Utilize visual cues such as size, color, contrast, and whitespace to emphasize important elements, creating a visually appealing and engaging interface.
Transparently talk to users about any associated fees and costs and the process to build trust. Let people know about fees at appropriate times in the experience. Consider using words like "Exactly" to explain when an amount is fixed vs variable based on fees or exchange rates. Let your users know when their actions have been successful.
UMA is designed to seamlessly integrate into your product. Leverage your existing design system and brand. The examples in this doc are a simple baseline to use as a guide when designing your implementation of UMA.
Next, we'll walk through some examples of typical UMA flows. They'll help you understand how UMA can be used in your products and services.