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.
![](https://framerusercontent.com/images/iSCGPRxpOyPBaTaYMXtWvz60U.png)
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).
![](https://framerusercontent.com/images/Xydp5ZIF5Gh58gieuAXszILj9Xg.png)
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
![](https://framerusercontent.com/images/gwwpMvTyhym2QymSV3BSdpNUo.png)
Typography
![](https://framerusercontent.com/images/jbnK2ImZuOBya4eWAhqtxB1PEQ.png)
Spacing
![](https://framerusercontent.com/images/aesiLbl628HPJh5qZFIKnx6MK6k.png)
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
![](https://framerusercontent.com/images/MarsTXsJsjT5fyFyDJBNWqZ9C0.png)
Radius Token
![](https://framerusercontent.com/images/15iRb86JWRJaBIDr7VXLHB0.png)
Space Token
![](https://framerusercontent.com/images/QfMBsYvFhv3naTDrjx3wrWdWIY.png)
Components
![](https://framerusercontent.com/images/mwc5sRhBYXqgko8nSnMVkeAG4.png)
© 2023 - Jeff Yip