The Diagnostic (UX Audit)
I started with a structured diagnostic, identified the highest-impact friction points, and redesigned with a clear principle: show what matters, hide what doesn't, let the user decide when to see the rest. My evaluation was categorised into three main levels of priority:
- What Worked Well: The core functionality was solid. The tool provided a great depth of information and successfully integrated relevant historical events into the price timeline.
- What Needed Improvement: Identified legibility and hierarchy issues. Certain functionalities were not immediately recognisable, and the general visual treatment lacked professional polish.
- What Needed Fixing: Critical issues regarding the Visibility of System Status and User Control. Users had difficulty undoing changes or understanding their current state within the navigation.
Below is a screenshot of how the chart was looking prior to the audit.
Competitor Analysis (Benchmarking)
To ensure the redesign met industry standards, I analysed market leaders: CoinMarketCap, Binance, and CoinGecko.
- Insights: I focused on their use of responsive navigation, "zoom and drag" capabilities, and how they handle high-density data.
- Takeaway: Top-tier platforms prioritise clean layouts and intuitive hover states to manage complexity without overwhelming the user.
My decision from the analysis: I would not try to compete on data density. The right angle was clarity and speed to insight — be the chart traders open when they need to make a decision quickly, not the one they use for research.
Identified Pain Points
Through an evaluation of the existing tool, several critical usability and visual issues were identified:
- System Visibility & Control: Users had no clear way to undo changes or navigate back to previous timeframes after interacting with specific events.
- Cognitive Load: Very long, unformatted numbers were difficult to process at a glance.
- Information Hierarchy: The layout used centre-aligned text and poor column spacing, making legibility difficult in data-heavy sections.
- Visual Clutter: Overlapping event titles on long-term charts created "visual noise," hiding the actual price movement.
- Visual Context: The colour palette and UI elements felt "random," failing to provide a cohesive brand experience or a sense of financial security.
- Navigation & Interaction: The "Back" button was missing or non-functional when navigating event timeframes, leaving users "stuck."
Strategic Solutions
I implemented a series of strategic design changes:
- General UI Update: Transitioned from a "generic" look to a polished, modern aesthetic with dedicated Light and Dark themes.
- Visibility & Status: Improved the feedback loop so users always know which timeframe or filter is active.
- User Control: Added functional controls to undo changes and navigate through historical data seamlessly.
- Recognition over Recall: Made actions and options visible (e.g., explicit toggles for Volume and Events) so users don't have to search for tools.
- Data Optimisation: Implemented numerical abbreviations (e.g., $190T instead of $190,000,000,000,000) and optimised the hierarchy of price and market cap display.
Design Execution & Results
The final proposal features a clean, high-fidelity interface (applied to the 99Bitcoins brand) that balances density with clarity.
- Interaction Design: A new vertical cursor line and pinpoint markers on the price line allow for surgical precision when reading data.
- Event Management: Introduced truncated titles and compact hover states to keep the chart readable even when multiple historical events occur simultaneously.
- Clear visual hierarchy: Price line as the dominant element, volume as a secondary layer with reduced opacity. Users can toggle volume on/off.
- Direct interactions: Reduced time-to-action for the most common interaction from 2 clicks to 1 tap.
- Context Without Clutter: Default state is clean. Users who want event context can toggle it on. This respects the majority use case (quick price check) while preserving the power user feature (event correlation).
Lessons Learned
- Clarity is Trust: In the crypto space, visual professionalism directly correlates with the user's perception of data accuracy.
- Information Architecture Matters: Even the most valuable data is useless if it's not scannable. Small changes like text alignment and number formatting significantly reduce cognitive load.
- Heuristics as a Compass: Applying established UX principles (like Visibility of System Status) helped transform a "functional" tool into a "delightful" user experience.
One thing this project reinforced: a structured audit at the beginning makes the rest of the project faster, not slower. Because we agreed on the problems before we started designing, I had almost no design review pushback. Everyone already agreed on what was wrong, so the solution just needed to prove it addressed those things.
