top of page
Tradezing
Tradezing admin penal
Tradezing NFT Widget
Zingbot
Project
Product Design & Concept development & Researcher
Role
OCT 2022 to MAR 2023
Date
Contributed to the development of user-friendly admin panels, designed NFT Widgets, Zingbot for the Majoy project.
Description
Tradezing
TradeZing is the first AI powered finance hub delivering real time insights and market information.
CONTEXT
What is Tradezing?
Tradezing is an online trading platform that aims to empower individuals with the tools and knowledge necessary to navigate the world of financial markets. Tradezing provides a comprehensive range of services designed to cater to both novice and experienced traders. The platform offers access to a wide array of financial instruments, including stocks, commodities, currencies, and cryptocurrencies.
WORKING ON ONGOING PROJECT
I make sure that every pixel of
our platform is running smoothly
On a daily basis, I collaborate closely with the senior designer, seamlessly translating his conceptualizations into meticulously crafted design screens. Our collaborative efforts are marked by insightful discussions aimed at discerning effective solutions and refining design elements. Subsequently, we diligently implement any necessary updates across all relevant screens, ensuring cohesiveness and excellence throughout the project.
Every change I make closely
follows the brand guidelines
The TradeZing project presents a unique brand identity, characterized by its vibrant use of gradient blue color schemes to represent its dynamic essence. This choice of color not only embodies our commitment to innovation and progress but also establishes a strong visual identity that resonates with our audience. By adhering to this distinct color palette throughout our design process, we ensure consistency and coherence, reinforcing our brand message and identity across all platforms and mediums.
Building the back-end
control penal
PLANING PHRASE
Understanding the needs of my team
We require an administrative panel that grants us comprehensive control over the trazeing platform. This necessitates access to posted videos, advertisements, transaction records, and various other data points such as user engagement rates and demographics. Therefore, it's crucial to outline a comprehensive list of functionalities before embarking on the design of the administrative panel.
USER TESTING
Building Information architecture
12 participants in total | 0 in-person | 12 online (tool: Optimal Workshop)
Online card sorting for Tradezing's admin panel enables remote stakeholders to organize features according to user preferences, fostering collaboration and ensuring a user-friendly interface tailored to the platform's requirements.
Testing the infomration architecture
12 participants in total | 0 in-person | 12 online (tool: Optimal Workshop)
To improve the efficiency of the Tradezing admin panel, leverage tree testing to refine its navigational structure. Present users with a simplified tree-like representation of the panel's hierarchy and observe their ability to locate specific functions. Analyze user interactions to identify and address any navigational issues or inconsistencies. Through iterative optimization, refine the panel's structure to enhance user experience and streamline access to key features within the Tradezing admin panel.
WIREFRAME
Early version of wireframe
Creating multiple wireframe versions facilitates iterative improvements, early issue identification, and collaborative alignment, enhancing workflow efficiency.
UI DESIGN
Giving admin pneal a layer of skin
From the wireframe, I establish a cohesive design language, then translate the structure into visually appealing UI elements. Using prototyping tools, I create high-fidelity mockups, incorporating feedback to refine the design. Attention to detail and documentation ensure consistency and effectiveness across devices, delivering a polished admin panel UI.
Design the interaction
Designing responsive interactions for the admin involves defining various interaction states and incorporating subtle animations to provide feedback. Using CSS media queries and flexible layouts, the interface adapts dynamically to different devices. Through iterative testing, I refine interactions for a seamless user experience.
Efficiency and simplicity
To gauge the efficiency and simplicity of the admin panel, I utilize various testing methods. Usability testing involves observing user interactions, A/B testing compares different versions, heuristic evaluation checks against usability principles, accessibility testing ensures inclusivity, and performance testing assesses responsiveness. These methods collectively ensure an optimized admin panel that meets user needs effectively.
Keeping a clean and simple design file
Throughout the design process, I ensure a clean design file by organizing elements logically with clear naming conventions, grouping related items, and providing annotations. This aids developers in easily tracking each screen and understanding design decisions, fostering smooth collaboration.
Working with developer team with the design
I collaborated closely with the development team to create the UI for our admin panel. We started by outlining goals and requirements, then proceeded to design wireframes and prototypes. Through iterative feedback and user testing, we refined the UI to ensure usability and functionality. Once finalized, we deployed the admin panel and provided training to employees. Moving forward, I continue to work with the team to provide support and implement updates for further improvement.
Designed NFT Widget
Understanding the need of our platform
Integrating an NFT widget seamlessly into our platform's streaming feature enhances user experience by providing real-time tracking of the NFTs being discussed. This empowers users to effortlessly identify the NFTs highlighted by influencers during streaming events about NFTs.
EMPHASIS
Building the information architecture
In real-world working environments, constraints like tight timelines often necessitate streamlined approaches to user research. For instance, in this project with a one-week deadline, I initiated the conceptual phase by brainstorming with my team. Following this, I referenced popular NFT websites to glean insights on effective NFT widget design and display methods, optimizing our path to the best solution within the limited timeframe.
DESIGN
LOW-Fidelity Design
Utilizing insights from brainstorming and NFT website research, I swiftly crafted a low-fidelity prototype. Sketching basic wireframes enabled rapid iteration and feedback, ensuring alignment with project goals despite time constraints.
Building a Widget Guideline
In constructing widget guidelines, I integrated insights from the low-fidelity prototype and user research while adhering to Tradezing's brand guidelines. By documenting essential design elements like layout, color schemes, and interaction patterns, I ensured alignment with both user expectations and our brand identity. These guidelines served as a comprehensive reference for the team, promoting consistency and efficiency in widget development.
Design the Widget store layout
Following the widget guidelines and Tradezing's brand identity, I developed a user-friendly widget store page. It enabled users to easily discover and download widgets like NFT Widgets, incorporating categorization, search functionality, and previews for enhanced usability. Through iterative refinement, I ensured seamless navigation and an optimized user experience.
How would NFT widget displayon the platform
I created interactive prototypes to showcase how NFT widgets would integrate into the platform's interface. Using the widget guidelines and Tradezing's brand identity, I demonstrated their appearance and functionality within the layout. Through user testing and feedback, I refined the presentation of NFT widgets for an optimal user experience on the Tradezing platform.
How to Set up NFT Widget
Users access the widget store page, select their desired NFT widget, customize it with options like a personalized message, and integrate it into their dashboard. Clear instructions and visual cues ensure a smooth setup experience, streamlining the process within the Tradezing platform.
What would NFT Widget look like when clicked
NFT Widget Integration on Tradezing
In conclusion, the implementation of NFT widgets on Tradezing has revolutionized user experience by offering seamless discovery, customization, and integration processes. With clear instructions and intuitive visuals, users can effortlessly incorporate NFT widgets into their trading strategies. Our commitment to user-centric design ensures a cohesive platform experience that empowers traders to stay informed and engaged with the evolving NFT market. As we move forward, we remain dedicated to refining and enhancing the NFT widget integration, continually striving to provide innovative solutions within the Tradezing ecosystem.
Creating Zingbot
This is the latest version of the Zingbot AI that I am currently working on. In this new AI, when users click on the options, there will be improved indications of the selected options, and the text bubble from the user's side will not be displayed. Moreover, users will no longer need to log in to the third-party Tradezing platform via an external link; they can directly log in through third-party integration.
We Want a customized Chatbot
to Allow user trade over our platform
Our platform is evolving to meet the dynamic needs of our users, and integrating a customized chatbot is the next strategic step in enhancing their trading experience. With over 30% of our user base actively engaging in trade transactions daily, the demand for seamless and real-time assistance has never been greater. By introducing a chatbot, we aim to streamline the trading process, offering instant support and guidance to users navigating our platform. Additionally, statistics show that platforms with integrated chatbots experience a 40% increase in user engagement and a 25% reduction in customer support inquiries. With these compelling insights in mind, implementing a tailored chatbot solution aligns perfectly with our commitment to providing a user-friendly and efficient trading environment.
Our Target audience are mostly Gen Z
Our decision to introduce a customized chatbot aligns with the preferences of our user base, primarily comprised of Generation Z. With over 70% of our active users falling within this demographic, who favor chat-based interactions, integrating a chatbot offers a direct and preferred communication channel. Studies indicate that platforms incorporating chatbot features have experienced a notable increase in user satisfaction and engagement, making this integration a strategic move to enhance the overall trading experience on our platform.
Research the Chatbot companies
In my search for the ideal chatbot solution, I conducted thorough research into various companies. Using industry reports and recommendations, I narrowed down options based on customization, scalability, and integration capabilities. After careful evaluation, I've identified a shortlist of top contenders that align with our requirements, ensuring we select the perfect partner to enhance our platform's trading experience.
Presenting my research to the team
To present my research on building ZingBot to the team, I'll compile key findings into a concise report. During the presentation, I'll outline criteria used for evaluation, highlight top contenders, and encourage team discussion. Visual aids will be used to illustrate comparative analysis, ensuring a collaborative decision on selecting the ideal chatbot solution for our platform's trading experience.
How would this work?
ZingBot's integration with apps like Coinbase would simplify trading on Tradezing. Users can access cryptocurrency trading seamlessly within the platform, execute trades, monitor markets, and manage portfolios without switching interfaces. This integration expands trading options and enhances convenience, offering a comprehensive solution for cryptocurrency trading on Tradezing.
Mind Map
To draw a mind map for ZingBot, I centralize "ZingBot" and branch out with key categories like "Features," "Integration," and "User Interaction." Under each, I add subtopics based on research, such as "Natural Language Processing" and "Trade Execution." For instance, under "Integration," I might include "Coinbase API" and "User Authentication." Using different colors or styles, I distinguish between categories and subtopics, incorporating data points or statistics where relevant to enrich the map. This visually organized approach helps structure ZingBot's development and highlights areas for further investigation.
Building Command line
To construct a command line interface (CLI) for ZingBot, I first outline essential functionalities users might need, such as checking balances or executing trades. Next, I design a clear interface using relevant programming libraries, and implement logic for each command to interpret user input accurately. Throughout development, I rigorously test for various scenarios and document usage instructions for users' seamless interaction with ZingBot's CLI for their trading tasks.
Early literations
In the early low-fidelity prototype iterations for ZingBot, I prioritized core functionalities like account authentication and trade execution with simplicity. Basic wireframes were used to outline key screens and user flows, allowing for rapid feedback and iteration. These initial designs laid a strong foundation for further development and refinement of ZingBot's interface and functionality.
Deciding an Icon
In brainstorming sessions, my team and I considered multiple icon options for ZingBot, prioritizing simplicity and relevance. After deliberation, we unanimously chose an icon that effectively captured ZingBot's purpose and identity, ensuring clarity and recognition.
Give Zingbot emtions
We opted to make the ZingBot icon interactive by assigning it various emotions during user interactions. Through animation and subtle expression changes like smiling or frowning, ZingBot conveys emotions corresponding to user interactions, enhancing engagement and intuitiveness.
Evolution of Zingbot
The ZingBot interface has evolved, initially focusing on simplicity and functionality before incorporating user feedback for iterative improvements. Additional features and visual enhancements, including the emotive ZingBot icon, were introduced to enhance the user experience. Through continuous refinement, the interface has become a robust and intuitive platform for traders on Tradezing.
Understand how would users
interact with Zingbot on mobile side
I showcased the user flow on the mobile site of ZingBot, presenting various solutions for seamless navigation through key functionalities like account authentication and trade execution. Through mockups and wireframes, I emphasized simplicity and efficiency, gathering feedback to refine the mobile user experience for traders on the go.
Understand how would users
interact with Zingbot On desktop side
Similarly, I demonstrated the user flow on the desktop site of ZingBot, showcasing multiple solutions for navigating through essential functionalities such as account authentication and trade execution. Through mockups and wireframes, I emphasized intuitive design and efficient workflows, gathering feedback to optimize the desktop user experience for traders.
Summary
In conclusion, the evolution of ZingBot's interface across mobile and desktop platforms has been guided by a commitment to simplicity, functionality, and user feedback. By showcasing various solutions and refining the user flow, we've created intuitive experiences that empower traders to navigate effortlessly and execute trades seamlessly. Through continuous iteration and optimization, ZingBot remains at the forefront of enhancing user experience for traders on Tradezing.
bottom of page