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