OSPREE
Improving the Existing UI of a Cryptocurrency Compliance Web Platform
Introduction
User Persona
Name: Michael Carter
Age: 37
Location: New York City, USA
Job Title: Cryptocurrency Compliance Officer
Experience: 9 years in financial compliance, 4 years specializing in crypto compliance
Role: Responsible for ensuring the transparency and compliance of cryptocurrency transactions.
Responsibilities: Handling large volumes of data, analyzing transaction histories, and ensuring regulatory compliance.
Needs: A clear, intuitive interface that simplifies complex data analysis and enhances operational efficiency
Pain Points
Data Overload
Managing large volumes of complex data can be overwhelming and time-consuming.
Regulatory Complexity
Navigating constantly changing regulations is challenging
Poor UX
Clunky interfaces with cluttered dashboards slow down productivity.
Limited Integration:
Lack of integration with other compliance tools creates workflow silos.
Back-End
Known Issues:
Collaboration Challenges
The initial working file is difficult to navigate and hampers cooperation with developers.
Scalability Needs
The fast-growing app requires a flexible, modular structure to quickly and intuitively assemble new sections and pages.
Function Overload
As features expand, the interface must remain intuitive and easy to navigate.
Theme Management
A systemized color scheme is essential to efficiently add and manage both dark and light mode versions
Design
Solution
Data Overload:
- Data Prioritization: Display key metrics and compliance indicators upfront using visual hierarchy.
- Intuitive Layout: Simplify navigation using a clear and consistent app hierarchy.
- Progressive Disclosure: Use expandable panels and collapsible sections to reduce cognitive load.
- Minimalist Design: Reduce clutter by using whitespace, consistent typography, and clean UI elements.
Collaboration Challenges:
- Atomic Design System: Build an atomic design system using reusable components (atoms, molecules, organisms, templates, and pages) for better scalability, consistency, and collaboration.
- Modular File Structure: Organize the working file into clear, labeled sections for easier navigation.
Theme Management
- Design Tokens for Colors: Define design tokens for both dark and light modes, ensuring consistent color usage across components.
- Automatic Theme Switching: Allow users to switch between dark and light modes manually or based on system settings.
Poor UX
- Update Navigation System and Hierarchy: Redesign the navigation system with a clear and logical hierarchy, ensuring quick access to key features and data.
- Advanced Filtering: Allow users to filter and segment data based on specific criteria (transaction amount, location, risk level, etc.).
Results and Metrics
The new interface elements were designed to be intuitive and user-friendly, making it easier for users to understand and navigate through vast amounts of data.
Coherent and Consistent Design:
The entire application now presents a unified look and feel, thanks to a consistent application of fonts, icons, and design principles.
The implementation of a robust design system facilitated the creation of new blocks and sections, ensuring they fit seamlessly into the existing structure.