Case Study Overview
As an exchange in the competitive crypto market environment, Axiom Exchange required a differentiator in the market to leverage. A robust brand identity was needed to build trust and appeal to users, investors and potential partners. Additionally, the platform had to offer an intuitive experience for both novice and expert/seasoned level crypto traders for userbase retention and growth.
The primary challenge throughout the process was to design the platform with vasts amounts of financial data, which users required to create trading decisions, while retaining a smooth and intuitive experience.
Due to funding constraints, the project did not have the resources to conduct formal user testing such as A/B or usability testing. However, to ensure a user-centered design throughout the platform, heuristic evaluation, personas, and journey mapping were employed to better understand the users needs.
Methodologies
Competition analysis
User analysis
Heuristic evaluation overview
User feedback
Competition analysis
Photon
Photon is one of the most well known crypto pair trading platforms within the crypto market. They are primarily focused on catering to novice to competent level traders based on their straightforward on-boarding flow which allows users to start trading quickly and their well designed, sleek intuitive user interface. While they mostly target novice level traders, their simplistic interface does not hinder any functionalities making it still an attractive choice for even advanced traders.
Strengths
User-friendly interface: The user interface has simplicity in mind when it comes to displaying data making navigation easy and direct for new users.
Fast trading performance: Photon is well known for its high-speed order execution which is a critical feature for the fast-paced crypto trading environment where speed can determine a profitable or losing trade.
Weaknesses
High fees: Photon’s fees are relatively higher than other exchanges. High volume traders are most impacted by this.
Limited features for advanced traders: Photon lacks advanced trading tools that appeal to more seasoned traders.
BullX
BullX is a feature-rich crypto pair trading platform within the crypto market targeted towards a more competent and seasoned level of traders. Its platform and user interface offer more advanced trading features, such as multi-wallet support and automated trading strategies. BullX’s marketing approach as well as their effective referral system, target experienced Telegram users who have a deeper understanding of the Solana pair trading space, making it appeal to more knowledgeable traders.
Strengths
Rich feature set for advanced traders: BullX is well known for their advanced trading utilities which allow traders to have a more streamlined and efficient experience. These features allow for the automation of complex tasks that would otherwise be time consuming if done manually.
Weaknesses
Cluttered UI: Due to the overuse of different icons and numerous sheets within panels, the UI has introduced a steep learning curve increasing the likelihood of confusion and slowing down interactions for newer and novice users. The cluttered layout may overwhelm users, making the overall navigation of the platform more difficult. Simplifying the UI can improve user onboarding and retention in the platform.
Conclusion
Photon, while having a solid foundation of features and a highly user friendly interface, lack advanced trading features which limits its scope and appeal to more seasoned traders in the market. BullX has advanced trading features but it’s cluttered, unrefined UI produces a moderate learning curve that deters newer users.
How Axiom Exchange compares
By analysing the strengths and weaknesses of the most widely used exchanges, we can strategically position and design Axiom to capture a potential market share. Adopting an intuitive design with advanced trading features will appeal to novice, competent and seasoned traders. This balanced approach ensures that all user segments can utilise and appeal to the platform, as ease of use is combined with advanced functionality required by advanced traders.
User analysis
Given the constraints of this project, the project did not have resources available to conduct formal user testing such as usability and A/B testing. However, with this limitation we adapted our approach by involving the team itself including the founders, who have in-depth comprehensive knowledge of the market, in testing the UI in its development stage and providing feedback. The founders of the project also conducted broad informal user interviews, user testing with the target audience, beta members and provided feedback.
As the founders possess a comprehensive understanding of the product’s target audience, their feedback was valuable in refining many aspects of the platform. They played a large role in the onboarding flow and influenced a lot of the critical trading flows.
However, we recognise that relying on founder-led testing might not capture the wide scope of the target audience and their behaviours or potential pain points that a formal user testing can uncover. As the platform evolve, we plan to conduct more formal user testing in order to gather more comprehensive feedback and further optimise the user experience.
Personas
Based on the research, 2 main personas were identified to represent Axiom’s main user base. Persona 1 is a novice trader who needs a frictionless and an intuitive experience. Persona 2 is a an advanced power trader who values efficiency, advanced features and customisability.
Persona 1
Key User Needs: Simple onboarding, frictionless experience, familiarity from mainstream crypto exchanges such as coinbase.
Pain Points: Being overwhelmed by complex platforms, fear of confusion and time consuming learning curves.
Goals: Begin a journey and learn in order to be a profitable trader in the Solana pair space.
Behaviours: Logs in during trends and high volume in the space. Creates orders without the frequent use of advanced trading features.
Persona 2
Key User Needs: Access to advanced trading features, customisability, low fees, and reliability.
Pain Points: Frustrations with cluttered user interfaces, lack of advanced features and customisability.
Goals: Refining trading strategies, risk management and optimise their workflows in order to make the stable profitable trades.
Behaviours: Spends 4-6 hours a day monitoring multiple Solana pairs in order to create and execute high level trading strategies.
Journey mapping
Based on the 2 Personas representing the main user bases of the platform, pain points were addressed and further optimisations to the flows were made with user empathetic considerations.
Persona 1
Product Awareness
Touchpoints: Marketing, referral system, crypto forums, word of mouth.
User Actions: Persona 1 engages with promotions on X, uses a friend’s or existing user’s referral link, or reads about the platform in forums.
Pain Points: Due to the crypto environment, there’s scepticism about the product. As a novice trader in the Solana pair space, Persona 1 is intimidated by new terminologies and space specific concepts.
Opportunities: Provide straight forward and clear beginner-friendly context about trading in the Solana pair space. Provide documentation and educational resources on utilising the platform.
Onboarding flow
Touchpoints: Landing page, sign-up flow, tutorial flow.
User Actions: Sign up using Telegram or Phantom wallet, Persona 1 is provided an encrypted private key and then starts onboarding tutorial flow to understand the platform’s features.
Pain Points: As a novice, Persona 1 might not understand the importance or context of blockchain technology such as the private key.
Opportunities: Context within the sign up flow breaking down blockchain concepts such as Axiom’s encrypted private keys and best practices (e.g storing private keys).
First trade flow
Touch Points: New pair, Trending, Pulse or Radar pages to a Pair trading page where the users can execute orders.
User Actions: Persona 1 trades using basic trading features such as Buy now, Sell now and limit orders.
Pain Points: There might be a feeling of uncertainty when first using Buy dip, Buy breakout and Stop loss, Sell Profit limit orders. There is also an initial but short learning curve with navigation before Persona 1 can confidently place their first trade.
Opportunities: Offer tooltips and prompts to explain what parts of the Pair trading page interface are for. Provide explicit feedback after actions such as when an order is placed.
Platform Utility flows
Touch Points: Persona 1 checks the Portfolio modal and page, Vision page (analyses wallets), Watchlist modal, Trending modal and page, New pairs modal and page, Pulse page, and Radar page to develop trading strategies and to build context of the market.
User Actions: Persona 1 deduces trading strategies based on trading performance and market conditions through the platforms utility pages and modals.
Pain Points: Persona 1 might not be confident when developing trading strategies due to a lack of knowledge in the Solana pair space or initial learning curves with UI navigation.
Opportunities: Access point within the platform to join the Discord or Telegram chats where traders from all levels discuss market conditions and market opportunities. Link Documents and educational material about the platforms and it’s features.
Support and Feedback
Touch Points: Documents, customer support, Discord server (tickets system) and FAQs.
User Actions: Persona 1 seeks help when they come across unexpected errors, behaviours and if they do not understand a feature.
Pain Points: Persona 1 might struggle to find help or resources and may feel stuck if there’s a lack of support material.
Opportunities: Easily accessible documents, FAQs, and Discord (support tickets system) access points. Implement video tutorials or graphics that cater to novices.
Persona 2
Product Awareness
Touchpoints: Marketing, referral system, crypto forums, word of mouth.
User Actions: Persona 2 engages in promotions on X, reads reviews about the platform mentioning advanced trading features, or uses a friend’s or existing user’s referral link.
Pain Points: Persona 2 has expectations and is concerned if Axiom will have advanced trading features which they needs in order to create and execute their high level trading strategies.
Opportunities: Explicitly showcase advanced trading features in the landing page, Discord server and Telegram channel, emphasising the powerful tools, reliability and efficiency of the platform which caters to seasoned traders.
Onboarding flow
Touchpoints: Landing page, sign-up flow, tutorial flow.
User Actions: Persona 2 signs up quickly, skips tutorial flow, and configures the advanced features and interface to his preferences.
Pain Points: Access to advanced features may feel cumbersome or not easily accessible due to many steps.
Opportunities: Leverage design principles such as contrast and hierarchy to explicitly show and make advanced feature accessible with minimal friction in the flow.
First trade flow
Touch Points: New pair, Trending, Pulse or Radar pages to a Pair trading page and advanced trading features.
User Actions: Persona 2 quickly develops and executes their high level trading strategies utilising the advanced feature set of the platform to maximise profits and returns across multiple Solana pairs simultaneously.
Pain Points: Persona 2 might have multiple windows open with different pages and has to navigate between multiple tools and tabs which can slow down the experience. There could be certain customisability which are not present.
Opportunities: Leverage design principles to make the navigation of advanced features as seamless and frictionless and possible (high contrast and good visual heirarchy). Offer customisability in the Pair trading page such as configuring the locations of panels and tools in the interface.
Platform Utility flows
Touch Points: Daily Portfolio checks and monitoring of the Vision page (analyses wallets), Watchlist modal, Trending modal and page, New pairs modal and page, Pulse page, and Radar page to develop high level trading strategies and to build context of the market.
User Actions: Persona 2 spends several hours a day monitoring the market, refining strategies and managing their portfolio and connected wallets.
Pain Points: Frustrations can occur from slow loading information and cluttered UI inhibiting accessibility of tools causing friction.
Opportunities: Optimise platform speeds for real-time data. Leverage design principles to design an intuitive non-cluttered pages (use of whitespace and heirarchy) or to allow a more extensive customisation of the platform to help foster a more efficient workflow for Persona 2.
Support and Feedback
Touch Points: Documents, customer support, Discord server (tickets system) and FAQs.
User Actions: Persona 2 seeks help when they come across unexpected errors, behaviours and if they do not understand a feature. Persona 2 as a knowledgable trader can also provide insight on how to make the platform more appealing to power users.
Pain Points: Persona 2 might need more technical support with deeper knowledge and understanding of trading fundamentals or the Solana pair space. More advanced issues can take longer to resolve resulting in a potential churn of Persona 2 if issues persist or take too long to address.
Opportunities: Offer support centers in Discord, Telegram, or documents that caters to more seasoned traders and power users. Faster advanced responses within Discord (tickets system). Offer rewards for finding errors with the platform.
Heuristic evaluation
To evaluate the usability of the platform, Jakob Nielsen’s 10 Usability Heuristics was applied throughout the early design process. Potential usability issues were identified and addressed, furthering optimisations of the platform. This was done in order to compensate for the lack of formal user testing.
Visibility of system status
Persona 1
Finding: During early development, some critical actions such as placing trades did not provide clear feedback. This can cause uncertainty.
Opportunity: Real-time feedback through the use of toasts components were applied to critical actions giving explicit feedback notifications to users.
Persona 2
Finding: Real-time information failed to update leading to frustrations especially for power users who use multiple windows.
Opportunity: Refresh button and an inactive state for pairs was implemented to indicate the user that the pair needs to update the real-time information.
Match between system and the real world
Applicable to both Persona 1 and Persona 2
Finding: Some parts of the platform had crypto and trading specific terminology which in some contexts was ambiguous or caused confusion for Persona 1.
Opportunity: Tooltips were implemented to provide better context for seasoned traders and explanations for novice traders.
User control and freedom
Applicable to both Persona 1 and Persona 2
Finding: Both persona 1 and persona 2 had preferential trading habits, and would benefit from customisability of the Pair trading page.
Opportunity: Implementation of a customisable Pair trading page where users can rearrange panels and modify settings to preferences.
Consistency and standards
Applicable to both Persona 1 and Persona 2
Finding: During the early stage of FE development, some icons and buttons were inconsistent confusing users as their behaviours and states were inconsistent with the design. Some platform behaviours, such as clicking addresses to copy, were present and well understood throughout space and the competition but worked differently in Axiom.
Opportunity: Robust communications between myself and the FE team ensured there was consistency of components throughout the platform. Some component behaviours were also revised in order to lessen the learning curve or newly onboarded Persona 1 and 2 users.
Error prevention
Applicable to both Persona 1 and Persona 2
Finding: Persona 1 were at risk of making actions without fully understanding the consequences and implications (Pump.fun and Moonshot pairs are prone to rugging and are extremely volatile leading to unwanted losses).
Opportunity: Founders proposed a pop-up when clicking on high volatile pairs warning users about the pair’s high risk. While useful for Persona 1, Persona 2 did not require the warning so a choice to disable the dialog was implemented.
Recognition rather than recall
Applicable to both Persona 1 and Persona 2
Finding: During the early design stage. The approach for designing the platform had a focus on reducing cognitive load. This idea came from the analysis of Bullx’s platform as they heavily relied on many icons adding a learning curve to novice and cognitive load to advanced traders.
Opportunity: The reduction of icons and use of labels (more explicit) was applied throughout the whole platform. This reduced learning curves and cognitive load for both persona 1 and persona 2.
Outcome
After utilising the critical Usability Heuristics by Jakob Nielsen, key usability improvements were identified:
More streamlined trading experience.
Improved customisation options in the Pair trading page appealing persona 2.
Increased feedback with actions to reduce uncertainty.
Improved contextual information throughout the platform to reduce confusion and improve clarity with tooltips.
User feedback
Throughout the beta and early release of Axiom Exchange’s platform, feedback from Axiom users from Discord were grouped and recorded. User interface suggestions and design focused feedback were analysed, and holistically assessed on how they can benefit the user base, accessibility of the platform and impact the trading experience.
Axiom Exchange main Pair trading page.
Based on the UX research, there’s a user centric approach for the design for the Platform.
Branding Identity Overview
Axiom’s branding was designed to convey innovation, accessibility and high performance. The visual identity, encompassing the logo, colour palette, typography, was thoughtfully curated with competition, the crypto environment and target audience in mind, creating a professional yet approachable experience.
Logo
Logo.
Logotype.
Axiom’s logo mark is sharp, sleek and modern conveying an essence of precision. It references an ancient iconography (from the renaissance period) the "Eye of Providence" which displays symbolism of stability, insight, guidance, and transparency. I wanted these qualities and references to give a subtle narrative to the brand giving the brand a sense of depth and complexity.
RF Dewi Expanded is a geometric typeface which feels modern and futuristic helping convey the innovative aspects of the brand.
Colour palette
Branding palette used throughout branding materials
User interface palette.
The primary colour of blue conveys a sense of transparency, trustworthiness and reliability.
Typography
RF Dewi Expanded.
IBM Plex Sans.
The 2 modern sans-serif fonts were chosen for their readability across devices. RF Dewi ,both regular and expanded, are utilised throughout the branding materials while IBM Plex sans is the typeface for the platform.
Tone of voice
Axiom’s tone is professional and direct. It speaks clearly to novice and seasoned traders, with educational resources written in a reassuring way for beginners.
User-centric design and navigation
The philosophy for the design was to leverage design principles to make the platform feel fast and frictionless helping traders foster high quality trading strategies and strategy executions. An interface design that is clean, modern, easy to navigate and rich in advanced trading features is what was required for the design to appeal to novice and seasoned traders alike.
From a wide picture, a clear and simple navigation structure utilising tab components, throughout the platform, was a design choice made to reduce the learning curve for new users and to reduce cognitive load for all users. Tabs were chosen rather than the use of sheet components, which is used in BullX’s interface, as sheets restricts the view of information and access to other functions. Critical actions, such as the "create order", function are also made clear with high contrast and requires minimum clicks.
Accessibility considerations
To ensure accessibility for all users, an array of accessibility guidelines were applied throughout the design of the UI. For example, utilisation on the APCA guidelines ensured that the contrast between text, in varying scales and weights, is sufficient with the background, ensuring text readability, improving the user experience and friendliness.
Status & Navigation
Leading side: status and navigation.
Axiom introduces an advanced trading feature that work like presets for trading. A compact row contains the preset button which also acts as a glanceable component and the current Solana price. This gives the user quick context about their trading configuration, and the price of Solana.
Next the the Axiom logo, the navigations to other pages are in text. This design choice is more explicit compared to icons used by BullX and requires little to no learning curve. It is also high contrast for maximum visibility.
Trailing side: socials, quick access modals, search, wallet and user settings.
Socials link to educational resources and where new updates are announced. Quick access modals enable the user to maintain the Pair trading page while accessing: Trending pairs, New pairs, Portfolio and their watchlist. Users can search for pairs, add funds through the wallet modal and access their user settings.
Pair trading page
Default pair trading page layout.
Pair summary panel
By applying the concept of visual reading patterns, the most important contextual information for a pair such as the pair name (along with bonding curve), price, market cap, liquidity and supply are in a panel located at the top of the page.
Chart panel
The chart differs from other platforms as it’s much larger relatively. This enables traders to have more freedom when performing technical analysis of price actions. The page is also a non scrolling page (besides mobile breakpoints) which gives a sense of stability and groundedness to the design.
Long term vs short term datasets
Long term slow data use the same panel as the chart and can be found in the tabs (Top traders, Holders, Orders). These datasets are large but do not change frequently resulting in the design choice to temporarily replace the chart when selected. Contrastingly, short term fast data such as the order book, TXNS, volumes and makers are in panels and components always visible throughout the navigation of the the Ordering panel. These datasets are important metrics and are required for fast decision making.
Order panel
The Order panel contains the largest button in the page which is the "Create Order" button. The panel houses all the information and functions required to perform a valid trade with the preferred configurations.
Customisation
Moving the chart panel.
Users can customise the page by dragging and dropping the panels at their preferred locations and configurations.
Pair lists pages
Before accessing the pair trading page, Solana pairs are listed within the trending pairs, new pairs, pulse and radar pages. Users can click these lists to access the pair trading page.
Trending pairs and new pairs page
Trending pairs page.
Trending pairs and new pairs share the same page design with the difference being the time selection not required for new pairs page.
I wanted to iterate on the standard design present in competitors in order to create a more accessible and user friendly experience for users of the platform.
The first design choice was to include toggle buttons for commonly used filters in the function row. This reduces mouse clicks making it more efficient for users to quickly glance, toggle on and off filters. In contrast, in competitor flows, users open the filters pop-up to apply filters.
The second design choice was to fix the width of the table for the largest breakpoints. Competitors such as Photon have their table width set to fill the page. Tables that span across the whole page would not be user friendly for users who use smaller scaling display settings and ultra-wide monitors as user’s eyes would need to cover a large distance when reading the information. Having the tables width fixed reduces the distance the eye has to scan when reading across, further improving the user friendliness of the platform.
Pulse page
Pulse page.
The pulse page contains 3 tables which became challenging to design in smaller breakpoints. While competitors reduced the scaling and added icons for important metrics such as the market cap and volume of a pair, creating a more card like design for the rows, Axiom’s platform stays consistent with the existing table design language and opted for a traditional column based table design. This ensures that there will be no learning curves, ambiguity and establishes a more sensible information hierarchy for the metrics. Column sorting works with this approach which is not present in competitors.
Pulse page S and XS breakpoint.
To ensure the design is responsive, in small breakpoints a table is collapsed with a function to switch between hidden tables. This is with the consideration that traders often focus on 1-2 tables at a time when developing trading strategies for pairs.
Radar page
Radar page.
Radar contains a large list component reminiscent of a card with a chart panel. During the design of the list component, the Z reading pattern is taken into consideration allowing for a smooth reading experience and fluid display of information for users. Within the list component, contextual information about the pair is given first, followed by the original stats and real time performance of the pair with their respective panels.
The information panel of the list component is fixed allowing more temporal data from the chart. This is to encourage higher level trading strategies for the platform’s users.
Vision page
Vision page.
Vision is a wallet analyser and leaderboard. The original idea for the design was to create separate pages for the analyser and leaderboard. However, combining the pages was synergistic and allowed for a more intuitive flow when analysing wallets from the leaderboard. It also allowed for the quick analysis of user’s wallet watchlists when filtered from the leaderboard.
Vision page leaderboard and watchlist dropdown.
The leaderboard table had the a fixed width, similar to the trending and new pairs table. Viewing custom lists in the vision page allows for a better flow when analysing multiple wallets.
Vision page analyser.
The wallet analyser is split into 3 main panels. 1 and 2 are contextual stats about the wallet. In 3, users are able to switch the table statistics between Positions and transactions through a tab switching component.
Consistency Across the Interface
To ensure the consistency of the platforms experience and aesthetics, a comprehensive component library was created and utilised throughout the design process.
Remix icons were the iconography chosen for the platform. The icons had an aesthetic that fits with the brand and had a sense of familiarity to the target audience.
Interactive design
Microinteractions
Wallet modal confirm animation.
Custom Lottie animations were utilised to enhance the responsive feel of the platform. For pop-ups, the Lotties main intention was to really draw in the users focus onto important messages. For the wallet withdrawal and deposit, the Lottie animations were utilised to give a clear direct response to the user that the action has occurred.
The design of Axiom’s platform delivered significant results in both user engagements and business growth. In the Discord server and X, the platform received many compliments about its user experience and aesthetics.
The platform has achieved a relatively high user base exceeding 5,000 users, within the Solana pair trading market, since the launch of the platform.
