UI Design
Design System / Component Library
Iterative Design
Dark Mode
BESTLA ─ Crypto Asset Management Platform
Project Duration
2 months (2022.11 - 2022.12)
Development Process
Agile
Company
Guanfan Technology
Role
UI/UX Designer
Responsibilities
UI design, flow discussions, prototyping, engineering handoff
Tools Used
Figma, Jira, Slack
Project Overview
Background
BESTLA is a crypto asset management platform where users can trade, invest, and plan their crypto holdings. As BESTLA's features matured, its overall architecture grew more complex, and some components ended up out of step with a consistent standard.
Project Goal
Goal
The goal for this project, with the feature set left largely unchanged, was to add more chart-based presentation, refresh the design system and interface, and shift the style toward something cleaner and softer — so future feature expansion could move ahead more smoothly.
Role & Output
Teamwork
I worked with another designer, a product manager, and five engineers to complete this project. After discussing the UX flow with the PM, my design partner and I built a design system to produce the UI, used prototyping and design annotations to convey product detail, and handed the finished design off to the engineers.
Key Improvements
Design Deliverables
Homepage
Trading Page
Market Page
Defining Detailed Component Rules
Since this project had a lot of screens that needed popups, we marked out the usage rules and placement for each popup type based on priority and use case — that kept us from misusing them in design, and helped engineers quickly identify each component to speed up development.
Dark Mode
We also added dark mode to BESTLA, so users can browse the app in whichever mode suits their habits or needs. We redesigned the color system for dark mode and defined the rules for swapping colors (for example, cards all use Dark04 as their background) so it reads as more consistent and comfortable visually.
Design Guidelines
Design Guideline
Learnings & Reflections
Takeaways
01｜Mind the small details unique to blockchain products
With so many different cryptocurrencies, each valued differently based on its nature and supply, trades often end up with long strings of decimal places. On top of that, different contexts call for different numeric formats (some need eight decimal places, others six). Beyond triple-checking that values were entered correctly, I had to watch closely for layout breakage at small sizes, so the interface wouldn't end up with a poor experience.
02｜Balancing client requests with user experience
Sometimes a stakeholder's requested change can affect the overall user experience, and as the designer I have to weigh both sides — I can't just accept a stakeholder's opinion wholesale. My design partner and I would usually anticipate, during the design process, which flows or screens a stakeholder might question, gather credible data or references on those specific points, and then use that fuller picture at the brief stage to discuss a better solution with them.