StellarX - Trade Interface + Design System
Web APP · Trade interface, Design system, Withdraw and deposit
OVERVIEW
Contact for full case-study.
StellarX was adquired by Coinsquare in 2019. I inherited the platform, and designed a faster way to deposit and trade coins within the StellarX web app. StellarX was built for the day-trader that needed speed above all else. StellarX was built on Stellar, an open-source, non-profit, free, and lightning-fast blockchain with the ambitious goal of tokenizing the world’s assets and servicing the unbanked in the new world economy.
ROLE
Design System Management + Trading & Deposit + Withdrawl
TIMELINE
2019
Charts Interface
The objective was to develop a trading platform capable of managing the unique aspects of blockchain, including asset issuers and anchors, tokenization, key management, and hardware wallets. While it was designed for HODLers and crypto enthusiasts, it also had to be user-friendly and trustworthy enough for new users and businesses to adopt the technology. The website was built using React and is powered by the Stellar network.
Upkeeping the design system
Managing the design system at StellarX, I encounter several challenges. Ensuring our design system remains consistent across all our products and platforms was tough, especially as we scale and evolved and I was the only designer maintaining it. Balancing flexibility with standardization is another hurdle; we need to allow for creativity while maintaining a unified design language. Keeping our documentation up-to-date is a continuous effort and often time-consuming. Collaborating with cross-functional teams and getting stakeholder buy-in means navigating different priorities and perspectives.
Settings Inferface
The "User Profile" tab allows users to manage their StellarX alias, email address, password, and public key information. Each section is editable, ensuring users can update their information. The interface can indicate when re-authentication is necessary for changes, adding an extra layer of security. The right side showcases the "Security" tab, where users can manage secret key settings and multi-factor authentication (MFA). Users can choose their preferred level of security for secret key management, including options such as browser cache, password prompt, and hardware ledger. This flexibility caters to different security needs and user preferences. Additionally, users can enable or disable MFA, providing advanced security by requiring a second device for authentication. Ensuring that users have full control over their account settings with a focus on security and ease of use.
Buy / Sell Interface
Each trade form includes fields for "Unit Price," "Quantity," and "Total," with clear labels and real-time balance updates to help users manage their transactions effectively. The platform supports multiple cryptocurrencies, as indicated by the asset selectors and the balance displays in XLM and other currencies. We incorporated safety features such as balance checks, authentication requirements for certain tokens, and alerts for unusual trading activities. User feedback allowed us to validate that this ensured a sense of transparency and trust within the StellarX users.
© 2024 Laura Cisneros