Case Study
Blocktracer
Comprehensive tool for monitoring activities on the blockchain. It offers features such as real-time wallet activity monitoring, immediate SMS security alerts, human-readable crypto asset reports, and portfolio management tools.
Project Type
Dashboard
Tools
Figma
Role
UX/UI Designer
Deliverables
Design System
Design Token
Design System
The Design System provides a foundation for visual consistency and user experience. It includes the Color System, Typography, Spacing, and Components. This system ensures a cohesive interface design and empowers our teams to create efficient and visually appealing experiences.
Color Palatte
Our design system provides a purposeful set of color styles, including neutral, primary, accent, and feedback colors (e.g., green for success, red for failure).
Color accessibility — WCAG 2.1 Guidelines
A recommended guideline is to maintain a 4:5:1 contrast ratio (WCAG AA) for essential UI elements like text, buttons, and forms. Meeting this requirement ensures sufficient contrast for the majority of users
Typography
Spacing
Design Token
In order to establish a scalable and consistent visual system for UI development, as well as manage visual design attributes in a systematic manner, I collaborated with a designer devise a design token structure for BlockTracer.
Color Token
Radius Token
Space Token
Components
© 2023 - Jeff Yip