The Project
Our task was to create a tracking panel for $Tao miners sold by our client. The project involved designing, developing, and launching the panel, which would allow users to monitor their machines' token generation and status. Additionally, the panel was to serve as a support portal for users seeking assistance from TaoMine's team and as a knowledge base with relevant information. Our primary focus was to ensure the design was visually appealing, user-friendly and intuitive to navigate, enhancing the user experience.
Design
Our in-house designer took charge of the exchange's design, presenting three initial ideas to the TaoMine team. They quickly settled on one of the proposals, and we proceeded to refine it through a series of iterations. Our touch-ups included adjusting the layout for better user flow and optimizing the color scheme to enhance the overall user experience. Specifically, we improved the legibility of the text by adjusting the font size and line spacing, making it easier for users to read the information displayed on the panel. We also increased the contrast between the text and the background, which helped to reduce eye strain and improve the overall user experience. Additionally, we added visual cues to guide users through the platform, such as highlighting clickable elements and using consistent color schemes to indicate different sections of the panel. We also optimized the layout to ensure that key information was prominently displayed, making it easier for users to navigate and interact with the platform. During the iterative process, one of the main points of discussion with the client was whether to implement a dark mode or stick with a light mode. After careful consideration, the client decided to go with a light mode. Our team adjusted the color palette to make the platform more visually appealing, while still ensuring that the text and other elements were easy to read and navigate. We understand that every design decision can have a significant impact on the user experience. By working closely with the client and iterating on the design, we were able to create a functional and visually appealing platform that met their needs and exceeded their expectations.
Tech stack
We utilized various software tools for our project, including Figma, React, Next.js, Tailwind, Deno, Nodejs, Express, and Supabase, each of which contributed significantly to the success of the project. We used Figma for design purposes, which allowed the client to provide us with dynamic feedback. With this tool, we were able to create and modify design elements in real-time, allowing for an efficient design process and improved communication with the client.For the front-end development, we utilized the Next.js framework and Tailwind. These tools enabled us to build a high-quality user interface quickly, without compromising the quality of code. React, being a popular front-end library, allowed us to create reusable components that made the code more maintainable and easy to read. Next.js, a popular framework for server-rendered React applications, enabled us to build a performant and optimized application with ease. Tailwind CSS helped us to create a responsive design to ensure a smooth UX on all devices. To ensure maximum safety and security, we utilized several back-end tools, including Deno, Nodejs, Express, Ethers.js, and Supabase. Deno is a secure runtime for JavaScript and TypeScript, and Nodejs is a popular platform for building scalable back-end applications. Express is a widely used Nodejs framework for building web applications, which allowed us to create an API quickly and easily.
