Designing the Future of DeFi: Mycelium & Tracer DAO UX Journey

Profile2

Muhammad Al Mahdi

7 mins read

.

February 1, 2022

design_diary_thumbnail_mycelium

Project Background

"From Website to DeFi Innovation"

I started working with Mycelium alongside Jackson at JBuxd Studio, initially handling their website and deck design for the entire company. Our involvement deepened when Mycelium embarked on creating Tracer DAO, an open-source, smart contract protocol for derivatives. This shift required a comprehensive design approach to ensure seamless usability and strong brand alignment.

Approach

"Building a Strong UX/UI Foundation"

As Lead UI Designer, I collaborated closely with Mycelium’s in-house team, which included 3D designers and graphic designers. Having a diverse team enriched the UI/UX process, allowing us to integrate visual storytelling elements alongside the functional components of the Tracer DAO ecosystem. The presence of specialists from various disciplines ensured that the final product was not only aesthetically appealing but also intuitive and user-friendly.

 

We aimed to establish a strong foundation by streamlining workflows, optimizing user journeys, and creating a design system that could scale as Tracer DAO evolved. Working alongside Jackson and the internal Mycelium team, we refined our process through iterative feedback loops and close communication with stakeholders.

Discovery & Understanding

"Decoding Tracer DAO"

Tracer DAO (TCR) is a decentralized protocol designed to enable anyone to deploy derivatives markets via Tracer Factory templates. The first market launched was Tracer Perpetual Pools, a financial primitive that introduced key innovations: no margin requirements, no liquidations, and fully fungible tokens. These features provided traders with low-cost, leveraged exposure to assets without the risks typically associated with traditional financial instruments.

 

 

Beyond its financial applications, Tracer DAO plays a crucial role in governance within the OriginTrail ecosystem. The TCR token, operating on the Ethereum blockchain as an ERC-20 token, facilitates decentralized decision-making, incentivizing participation and ensuring transparency in data verification across industries such as supply chain management, healthcare, and research.

Solution Concept

"Designing for Simplicity in a Complex Ecosystem"

Given the technical nature of Tracer DAO, we focused on translating complex DeFi mechanics into an intuitive and visually coherent user experience. Our primary design goals included:

  • Simplifying intricate financial operations into digestible UI components
  • Ensuring responsiveness and accessibility across all devices
  • Developing a modular system that allowed for future scalability and feature additions

 

 

We worked extensively on user onboarding, recognizing that clear, guided interactions were essential for both experienced traders and newcomers to the DeFi space. By refining the information architecture and optimizing the navigation experience, we created a seamless flow that minimized friction and improved user retention.

Designing Solution

"A Collaborative UX/UI Approach"

As the project expanded, we made the strategic decision to bring in an additional UX/UI designer, Elli, who had a strong background in cryptocurrency and blockchain markets. Elli’s expertise in market cycles and user behavior proved invaluable in shaping the product’s usability and aligning it with the expectations of DeFi traders.

We maintained a rigorous design process, conducting weekly standups with the founders and development teams. These meetings ensured that we remained aligned with product goals, addressed emerging challenges proactively, and adapted our designs based on iterative feedback.

 

 

Collaboration was key in ensuring that every design element—from dashboards to trading interfaces—was fully optimized for usability. By leveraging a combination of usability testing, A/B testing, and continuous iteration, we ensured that each component delivered a smooth and efficient user experience.

Testing & Iteration

"Refining for Perfection"

The fast-paced nature of the project required long hours and dedicated focus to keep up with the rapid development progress. While there weren’t major roadblocks, we encountered certain challenges when refining intricate feature flows. These required extensive iteration and detailed discussions with the design team, project managers, and key stakeholders.

 

One of the biggest challenges was maintaining coherence between the fast-moving development teams and the evolving design iterations. At times, ensuring that the UI aligned perfectly with new functionalities required revisiting our assumptions and making real-time adjustments. Despite these hurdles, the process remained highly collaborative, with all teams working towards the shared goal of delivering a polished final product.

Results

"Launching a Game-Changer in DeFi"

After more than six months of dedicated effort, we successfully launched the product on schedule. The seamless collaboration between Mycelium, JBuxd Studio, and the internal design team resulted in a well-executed, scalable platform that met both user needs and business objectives.

Working with Mycelium on Tracer DAO was an incredibly rewarding experience. Having direct access to stakeholders enabled quick decision-making and allowed us to maintain a high level of precision throughout the design process. The journey reinforced the importance of collaboration, iteration, and a deep understanding of both the technical and human aspects of product design.

 

 

Looking back, this project served as a testament to the power of cross-functional teamwork in creating impactful digital experiences. It was a privilege to contribute to such an innovative initiative, and I look forward to future projects that challenge the boundaries of UI/UX design in the blockchain space.

Contribution

"This success was made possible through close collaboration with Mycelium and the Tracer DAO team."

A/B testing, Brand style guides, Competitior analysis, Concept testing, Design Documentation, Design Testing, Hifi UI Design (Mockup), Illustration, Illustration and iconography, Infographic design, Information Architecture, Lofi Prototyping, Prototyping and Interaction design, Stakeholder Insights and Discussions, UI Styleguide And Design systems, UI/UX Brief (PRD), Usability testing, Visual Design, Wireframe & flows, Wireframing
design_diary_thumbnail_botflow

Surpassing Initial Botflow Goals and Taking Off

Another project with Anthony, enjoyable, the same flow, the way of working together, easy to communicate, and completing the Botflow website with ease.

Botflow is a no-code chatbot automation platform that helps businesses automate their business processes. Botflow can be used for a variety of tasks, including: Customer service, Sales, Marketing, Operations, and Learning and development.

design_diary_thumbnail_edward

Empowering Educators in Addressing Dyslexia Challenges in Children with Blending-Board

Edward Orton-Gillingham (EOG) is an educational institution founded by Ann Edward, an Accredited OGA (Orton Gillingham Academy) Associate Trainer and Dyslexia Therapist. This institution focuses on providing training, courses, and certification for educators who wish to master the Orton-Gillingham Approach, a proven method for addressing language-based learning difficulties, especially dyslexia. EOG offers various levels of training, ranging from 30-hour programs to 100-hour programs, to help educators and educational professionals understand, master, and apply the Orton-Gillingham method.

design_diary_thumbnail_10tom

10 CENTOM’s Solutions Inspire the World to Tackle Social and Environmental Issues

10 Cent Tom is a social organization based in Gold Coast, Australia. The organization aims to create opportunities for people with disabilities through the collection and recycling of beverage bottles. In a simple yet effective manner, Tom Baker, the founder of 10 Cent Tom, has successfully inspired the community to care for the environment and provide opportunities for people with disabilities to work and contribute.

design_diary_thumbnail_10tom

10 CENTOM’s Solutions Inspire the World to Tackle Social and Environmental Issues

design_diary_thumbnail_axiom

Providing Peace of Mind in Cargo Delivery

Axiom Marine is a company that connects global commodity market players with efficient and cost-effective maritime logistics solutions. The platform offers cargo booking services, shipment tracking, and market analysis to help users optimize supply chains and increase profitability.