Product Newsletter
Secured Finance Product Updates
15 March 2024: Updates on error handling at the order confirmation stage for lend/borrow trades and design system component updates for total alignment across design and dev workflows
At Secured Finance, we believe that constant communication with our users is important as we listen and implement based on user feedback. We are grateful to all our users and want to continually improve our user experience and interface based on the concept of kaizen, which is a state of continuous improvement. We hope to show our users that our product is also in a continuous state of improvement, and will dedicate this newsletter to update our users on all the changes that are coming to our product.
UX/UI Design
As more traders start to use our platform, we want to improve UI for our users to ensure that traders get appropriate feedback at every turn.
Our UX priorities are to:
- Focus on creating a humanistic trading platform that empowers traders to make better decisions faster
- Explain the key areas of what makes Secured Finance unique as new traders may not understand how Secured Finance is able to protect users funds from liquidation compared to other platforms
Over the past week, the Product team at Secured Finance has been working on the trade execution flow edge cases and preparing for a major revamp on how error handling is managed on the OTC Lending page.
This was done through the following UX/UI implementation:
- Creating a comprehensive user flow describing machine logic for executing a lend/borrow trade and what to display to the user when the requirements are not met
- Designing and implementing components such as alerts, tooltips and inputs to better contextualise information for the trader instead of putting errors at the confirmation modal stage
The following design board summarises a major change towards how error handling and edge cases are handled at the order execution stage.
Trade Execution Flow Edge Cases
With a series of “if, then” statements, we have broken down edge cases and introduced a series of checks that will give appropriate feedback at every step. The trader will then be able to see exactly what they need to do to rectify and execute the trade.
Design System Update
The UI design system will also be incrementally built up, with components designed according to the product design issues to resolve. For this upgrade, the components that were needed are:
- Alerts
- Tooltips
- Tabs
- Inputs
Product Engineering
In adhering to the Atomic Design philosophy, we have started building and updating our existing web components from the ground up. By decomposing our user interface into smaller, meaningful components, we are aiming to build our new and improved UI with speed and accuracy.
Design System Update
This week, we have completed the build for Buttons, Chips and Alerts. During this process, we are actively improving our development processes and are excited to share new ongoing features the Secured Finance community can look forward to: Consistency between Storybook, Figma and Chromatic.
We see the Secured Finance app as modular, with different moving parts heading towards a common goal. In showcasing the different states and “stories” in our UI, we are utilising plugins to ensure a 1–1–1 consistency across design, development and testing.
Moving forward, we’ve enabled the @storybook/addon-designs add-on in Storybook to ensure a more consistent design-to-development workflow. We are also adding that plugin in Chromatic, our visual review and testing tool. These tools collectively streamline the design-to-development workflow, enhancing efficiency, maintaining design integrity, and facilitating collaboration.
When the design components in Figma match the actual components in Storybook and their visual tests in Chromatic, it reduces the need for back-and-forth revisions. Developers can reference Figma designs knowing they translate directly to Storybook components, which are then reliably tested in Chromatic. This alignment reduces confusion and errors, speeding up the development process and enabling a more iterative design and development cycle.
Ensuring that what is designed in Figma accurately reflects in Storybook and is correctly validated in Chromatic means that the final product remains true to the original design vision.
Focusing On Mobile UI As Our Next Priority
After the design system is completed and sufficiently built up, we will start the next phase of product development cycle; enhancing mobile UI. This will allow greater flexibility for traders to move between different devices when trading on our app.
Just-in-time Delivery Based On User Feedback And UX Problems
Just like how Toyota pioneered just-in-time manufacturing to reduce waste, we want to design and ship features based on the urgency and importance of each user problem that we are trying to solve. Once the design system is unified, and the trade execution flow smoothened out, users will be able to experience a smoother journey when using our app to trade fixed income crypto bonds.
Accessibility and Innovation are Our Keys To Success
Secured Finance’s multi-chain strategy extends beyond merely addressing the issue of high gas fees, representing a visionary leap toward redefining the DeFi ecosystem. By promoting interoperability and composability across different blockchain ecosystems, Secured Finance is laying the foundation for a more accessible, innovative, and unified DeFi landscape. This strategic move is a significant stride towards establishing a more inclusive financial system that leverages the unique capabilities of various blockchains, potentially setting a new standard for the future of finance.
Co-written by: Hadi Lee
User Guides
- Secured Finance Expands to Arbitrum
- Secured Finance’s Strategic Expansion to Avalanche
- Secured Finance Ventures into Polygon zkEVM
Reference
Secured Finance Official Links
Website | Twitter | GitHub | Galxe | Link3 | Guild
