A Journey Through my First Web3 Experience | 2020

Block Explorer | Web3


I acted as the design lead for this project and worked alongside Michel (Founder) and a team of web engineers


To create the first Block Explore in Algorand blockchain accesible in desktop and mobiles

User Audience

Developers between 22 to 56 years old and we should give priority  to desktop version.

Design Process

Randlabs and Algoexplorer marked my initiation into web3. Before this, I worked with a Point of Sale Online ordering system for the Middle East. My understanding of blockchain was nonexistent. When asked why they should choose me, I highlighted my adaptability. Despite my initial lack of knowledge, I demonstrated the ability to craft compelling experiences in this field, drawing from my experiences of creating products tailored for cultures reading from right to left, rather than left to right.

1st Blockchain touch

I do not know anything about blockchain. It’s time to learn! I remember going to YouTube videos to learn a little about blockchain. In the first days at the company, the team provided me with some documentation and papers, such as the Bitcoin white paper, to start my understanding of this layered technology and to become familiar with concepts such as transaction ID, hash, blocks, networks, and other important information that needs to be present in a block explorer.

Imagine a block explorer as the Google of Algorand. It has all the information about the network," helped me a lot.

Product Sessions – Alongside the team, we had various meetings where someone would present how to use other tools like Etherscan. As the Product Strategy suggests, I supported the idea of learning from our competitors and identifying areas for improvement to enhance the experience we are building. This marks the beginning of the second step – State of the Art or Benchmarking – identifying who our competitors are.

User Personas Product Requirements UX

Flow Chart | All Modules

Block explorer flowchart - algorand blockchian

MVP Explorer

Randlabs created an MVP. They hired me to seek user experience and visual design improvements for releasing the main block explorer in Algorand.

Old Algo Explorer
Old Algo Explorer Addresses

Product Insights

IMG 0832 scaled

The product needs everything. Randlabs is seeking the creation of a new brand, style guides, user experience, visual design, and motion graphics - all the components necessary for a successful market launch.


Home Wireframes Algorand
Hi Fi Wireframes
Circulating Supply Algorand

Algo Explorer is a robust product. We are creating a dedicated version for each platform.

Mobile Wireframes

Mobile HiFi Wireframes

If you're paying attention, you'll notice how the brand is evolving. During those days when I felt overwhelmed by interaction design, I would create logo proposals for the product. On the left, you can see how the navigation bar, home, menu, and search bar improved from one iteration to another. I provided Algo Explorer with a dedicated solution that was pixel-perfect.

UI Measurements

UI Measurements

My Point of Sale multi-platform experience involved creating a product tailored for a new culture, such as Egypt. It helped me understand why the pixel is the most important component on the screen. A pixel-perfect interface allows users to breathe and enhances awareness.

Home Measurments

This was in 2020  supporting Randlabs. I bring all my knowledge to the team.

Home Final Visual Design

Screen Shot 2023 07 10 at 9.08.40 PM

Dark Mode

Algorand chart price | algorand coinmarketcap

Responsive Design

The product own it’s own design for each platform. This was really good at randlabs, the team was very open to challenge our self and create dedicated design for mobile version.


Succesful Release

After a lot of work, the product is on the market - we've launched the main block explorer in the Algorand ecosystem.
Here's what people are saying on social media about the release.

IMG 0662
IMG 0657
IMG 0658

Governance Module

Screen Shot 2023 07 10 at 9.12.44 PM

Pangea Design System​

I have developed a comprehensive design system for Algorexplorer called Pangea DS, ensuring consistent visuals and user experiences across the digital platform. It includes reusable components, clear documentation, and accessibility considerations, promoting collaboration and scalability. This system empowers us to create cohesive, user-friendly products that reflect our brand identity.

Brand book blockchain
Icon System

NFTs are Here! Our explore now needs to support this feature by the high volumen in the network

Web Illustrations

NFTs Module

Algo Explore began to recognize the need to create an NFT module to provide Algorand users with information about it. I led the discovery process to determine the best MVP to start this module, as it could be significant, as you can see in the flowchart below.


NFTs Discovery

NFTDesignDeterminants 1

Design Determinants

NFTFlowChart Algoexploer28site29 1

NFTs Flow Chart


NFT Overview 1

Log In Profile

Verification of accounts started to become a necessity as well. We created the entire Profile module to address this

Verify Address Step 2
App Proposal Rejected
Asset EmptyState NotApps
Asset EmptyState NotAssets

Conclusion Experience

After working for more than two years at Randlabs, I’ve learned a lot by crafting over three products from scratch and redesigning the MyAlgo wallet, the first desktop wallet in Algorand. In this opportunity, I worked very closely with the founder and the entire engineering team, which provided me with a wealth of knowledge, opportunities to make decisions, and achieve amazing results.

In this experience, I delivered User Experience Design, Interaction Design, User Research, Product Strategy, Motion Graphics, Visual Design, Pitch Design, and Social Media Assets. I addressed all my design needs for Randlabs, AlgoExplorer, and MyAlgo.

Last updated 10/02/2024

What do you know about life if you’ve never experienced bringing a product to life and seeing it die after some years?

Randlabs team is now

Other Cases

My Algo Wallet

Sunrise Layer

Be Movil App