PARALLELCHAIN LAB • FINTECH STARTUP
From Cluttered Chaos to Clarity
I led the redesign of ParallelChain’s Blockchain Explorer, Xplorer, from researching users’ problems and needs to designing for implementation. The new Xplorer will help users save time and effort through easy and efficient analysis of blockchain data.
The new design includes features like information tooltips for beginners, dark/light mode options, and an improved dashboard and navigation bar for intuitive browsing.
Team
JW
LS
ZY
JC
SG
Industry
Fintech
Primary Role
Lead Designer
Timeframe
Aug - Dec 2024
Team
JW
LS
ZY
JC
SG
Industry
Fintech
Team
JW
LS
ZY
JC
SG
Industry
Fintech
Primary Role
Lead Designer
Timeframe
Aug - Dec 2024
Context
A blockchain explorer is like a search engine for blockchain transactions, letting users track payments, wallet addresses, and network activity in real time for transparency and analysis. I led the redesign to achieve a user-friendly explorer that empowers users to navigate the blockchain with ease and confidence.
A blockchain explorer is like a search engine for blockchain transactions, letting users track payments, wallet addresses, and network activity in real time for transparency and analysis. I led the redesign to achieve a user-friendly explorer that empowers users to navigate the blockchain with ease and confidence.
A blockchain explorer is like a search engine for blockchain transactions, letting users track payments, wallet addresses, and network activity in real time for transparency and analysis. I led the redesign to achieve a user-friendly explorer that empowers users to navigate the blockchain with ease and confidence.
A blockchain explorer is like a search engine for blockchain transactions, letting users track payments, wallet addresses, and network activity in real time for transparency and analysis. I led the redesign to achieve a user-friendly explorer that empowers users to navigate the blockchain with ease and confidence.
A blockchain explorer is like a search engine for blockchain transactions, letting users track payments, wallet addresses, and network activity in real time for transparency and analysis. I led the redesign to achieve a user-friendly explorer that empowers users to navigate the blockchain with ease and confidence.
Problem
Many of the processes on the explorer and ways of displaying information was unintuitive, as compared to leading explorers like Etherscan. This included information overload due to cluttered data presentation.
Many of the processes on the explorer and ways of displaying information was unintuitive, as compared to leading explorers like Etherscan. This included information overload due to cluttered data presentation.
Solution
Introducing the revamped Xplorer, with better navigation and presentation of information to help users browse, analyse and complete their tasks faster while remaining well-guided throughout the user experience of the Blockchain Explorer.
Introducing the revamped Xplorer, with better navigation and presentation of information to help users browse, analyse and complete their tasks faster while remaining well-guided throughout the user experience of the Blockchain Explorer.
Research
Xplorer’s low product market-fit led us to conduct user surveys with 20 of our existing users to find out what’s wrong and how we can do better.
Xplorer’s low product market-fit led us to conduct user surveys with 20 of our existing users to find out what’s wrong and how we can do better.
User Surveys
We sent out a user survey to our existing users via our company’s discord channels. At the end of the survey, we also included an option for respondents to indicate if they want to opt in for our future Usability Testing. All respondents volunteered to take part in it! (i.e. no extra cost for user survey + UT!)
We sent out a user survey to our existing users via our company’s discord channels. At the end of the survey, we also included an option for respondents to indicate if they want to opt in for our future Usability Testing. All respondents volunteered to take part in it! (i.e. no extra cost for user survey + UT!)
Competitive Analysis
To align ParallelChain’s Explorer with leading blockchain explorers, we conducted a competitive analysis of a total of 7 explorers, focusing on user-mentioned platforms like Etherscan and Solscan. This helped identify established Web3 design patterns worth implementing in our redesign.
I then prioritised these patterns using the MoSCoW Analysis, ensuring that the most critical features were addressed first, while lower-priority items could be considered for future updates of the Blockchain Explorer.
To align ParallelChain’s Explorer with leading blockchain explorers, we conducted a competitive analysis of a total of 7 explorers, focusing on user-mentioned platforms like Etherscan and Solscan. This helped identify established Web3 design patterns worth implementing in our redesign.
I then prioritised these patterns using the MoSCoW Analysis, ensuring that the most critical features were addressed first, while lower-priority items could be considered for future updates of the Blockchain Explorer.
Design Heuristics
Taking into consideration the user research, competitive analysis and business goals I came up with a Heuristics Evaluation List that would help me set out the North Star for the revamped Blockchain Explorer website.
Taking into consideration the user research, competitive analysis and business goals I came up with a Heuristics Evaluation List that would help me set out the North Star for the revamped Blockchain Explorer website.
Creation of new Design System
Before embarking on the new design, I updated the design system and its components to align with the new company branding. This would help to strengthen brand identity, improve scalability, and streamlines maintenance and collaboration for future growth.
Before embarking on the new design, I updated the design system and its components to align with the new company branding. This would help to strengthen brand identity, improve scalability, and streamlines maintenance and collaboration for future growth.
Part of the Design System in dark and light mode — Modal (top); Button (bottom)
Part of the Design System in dark and light mode — Modal (top); Button (bottom)
Final Design: Data Tables
By studying common design patterns in top explorers, I edited all the tables by improving readability, showing more rows of information (users are able to scroll horizontally within the table) while prioritising key information to be shown.
By studying common design patterns in top explorers, I edited all the tables by improving readability, showing more rows of information (users are able to scroll horizontally within the table) while prioritising key information to be shown.
Data tables: An example of Transactions table shown here
Data tables: An example of Transactions table shown here
Final Design: Account Details page
Since most of the pages are very data-heavy, I sought to structure data-heavy pages by compartmentalising related information into their own respective widgets. I also used tabs for users to switch between, for more convenient navigation and also to prevent information overload.
Since most of the pages are very data-heavy, I sought to structure data-heavy pages by compartmentalising related information into their own respective widgets. I also used tabs for users to switch between, for more convenient navigation and also to prevent information overload.
Account Details page: Use of widgets and tabs to allow all parts of account to be viewed at a glance
Account Details page: Use of widgets and tabs to allow all parts of account to be viewed at a glance
Final Design: Info Tooltips
Users emphasised the need for an easier onboarding experience for Web3 newcomers. The redesign prioritised user support through clearer instructions and educational elements such as through info tooltips which are present on all pages.
Users emphasised the need for an easier onboarding experience for Web3 newcomers. The redesign prioritised user support through clearer instructions and educational elements such as through info tooltips which are present on all pages.
Info Tooltips: An example of info tooltips on the Block Details page (shown above)
Info Tooltips: An example of info tooltips on the Block Details page (shown above)
Final Design: Navigation bar
Revamped the navigation bar to be more intuitive to align with common Web3 explorers. This helps frequent Web3 users navigate the system with more familiarity and ease.
Revamped the navigation bar to be more intuitive to align with common Web3 explorers. This helps frequent Web3 users navigate the system with more familiarity and ease.
Navigation bar: Example here shown on desktop size and mobile size
Navigation bar: Example here shown on desktop size and mobile size
Design Handoff
Each week, I presented one feature or page to the engineering team, structuring it into clear user flows for better understanding. I also maintained regular communication with the frontend engineer, blockchain engineer, and business team to ensure alignment and smooth development.
Each week, I presented one feature or page to the engineering team, structuring it into clear user flows for better understanding. I also maintained regular communication with the frontend engineer, blockchain engineer, and business team to ensure alignment and smooth development.
Outcomes & Reflections
Despite this being my first UX project that I have led, I successfully delivered the project from research to user testing preparation, gaining technical skills in design system setup and management skills in project coordination and collaboration.
Despite this being my first UX project that I have led, I successfully delivered the project from research to user testing preparation, gaining technical skills in design system setup and management skills in project coordination and collaboration.
Outcomes
Enhanced Brand Confidence
A new design system aligned with refreshed branding to foster trust and recognition
Improved Data Clarity
Reduce cognitive load, allow users to easily navigate, digest complex data and find information they need
Cross-Device Accessibility
Optimised explorer for desktop, tablet and mobile, allowing users to access data seamlessly on the go
Simplified Navigation
Intuitive navigation to reduce errors and save time for seasoned users, and tooltips to support beginners
Enhanced Brand Confidence
A new design system aligned with refreshed branding to foster trust and recognition
Improved Data Clarity
Reduce cognitive load, allow users to easily navigate, digest complex data and find information they need
Cross-Device Accessibility
Optimised explorer for desktop, tablet and mobile, allowing users to access data seamlessly on the go
Simplified Navigation
Intuitive navigation to reduce errors and save time for seasoned users, and tooltips to support beginners
Reflections & Takeaways
Efficient Collaboration
Weekly check-ins with business and tech teams allowed parallel work, identified concerns early, and improved design speed.
Cover more ground in survey
The survey focused mainly on transactions and blocks, but expanding to include account and wallet questions could provide more insights without overwhelming users.
Graphics for understanding and branding
If there was more time, graphics could be added in future, for example, reiterating the logo or having supporting diagrams and graphics for explaining concepts in tutorials. This could help improve understanding, and also support ParallelChain’s branding.
Efficient Collaboration
Weekly check-ins with business and tech teams allowed parallel work, identified concerns early, and improved design speed.
Cover more ground in survey
The survey focused mainly on transactions and blocks, but expanding to include account and wallet questions could provide more insights without overwhelming users.
Graphics for understanding and branding
If there was more time, graphics could be added in future, for example, reiterating the logo or having supporting diagrams and graphics for explaining concepts in tutorials. This could help improve understanding, and also support ParallelChain’s branding.
Currently open to new opportunities
Currently open to new opportunities. Say hi!
anjelicaong23@gmail.com
Resume
© Copyright 2025
