AlgoExplorer
A Journey Through my First Web3 Experience | 2020
- UX Design
- Product Strategy
- Problem Solving
- blockchain
Block Explorer | Web3
Team
I acted as the design lead for this project and worked alongside Michel (Founder) and a team of web engineers
Goal
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.
Flow Chart | All Modules
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.
Product Insights
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.
Wireframes
Algo Explorer is a robust product. We are creating a dedicated version for each platform.
Mobile 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
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.
This was in 2020 supporting Randlabs. I bring all my knowledge to the team.
Home Final Visual Design
Dark Mode
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.
Governance Module
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.
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
Design Determinants
NFTs Flow Chart
NFTs UI
Log In Profile
Verification of accounts started to become a necessity as well. We created the entire Profile module to address this
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 www.c3.io
