TradeLocker
Introduction
MochaLabs was born from a pivotal moment in the journey of a startup that transitioned to a B2B focus and decided to let go of its web team. I had already been working with this talented team for almost a year when the pivot occurred.
Instead of parting ways, my colleagues seized the opportunity to create something new, founding MochaLabs in response to a proposed partnership with another firm seeking a development team to bring their product ideas to life. With this partnership, MochaLabs began its journey, emphasizing ownership and responsibility in developing innovative products.
From Side-Gig to Full-Time Role
Before officially joining MochaLabs, I was working on a different project. Eager to rejoin my former colleagues, I waited for the project to conclude. In the interim, I took on a side-gig for MochaLabs, creating a product reveal animation for TradeLocker.
TradeLocker product reveal video
This video showcased the platform's capabilities just as development began to show tangible results. This project rekindled my excitement, and once my previous commitment ended, I joined MochaLabs as a Senior Product Designer, ready to dive into the creative and collaborative atmosphere.
TradeLocker: The Project
TradeLocker is a web-based day trading app designed to run on any device using web technologies. The goal was to provide a seamless experience across platforms, leveraging technologies like React Native and Electron. You can check the platform out here.
Initial Challenges
Upon joining, my first task was organizing the design front. I got handed a Figma project where designs were all over the place. I started with laying down the foundations for a scalable design system.
Design System
- Color System: I simplified and organized colors into seven groups, ensuring scalability for future themes, including light and dark modes.
Colors organized into several groups
- Typography: Implemented a responsive scale, making text styles adaptable for desktop and mobile screens.
Responsive typography scale
- File & Component Organization: Established a structured system with foundational files, component libraries, and design files organized by the LTR (left-to-right) principle.
Moving from final designs in their context on the left to the more atomic components on the right
Mobile Experience Overhaul
The major initial feature I tackled was a mobile experience overhaul, making the chart the central focus.
The mobile experience was overhauled allowing the chart to become the centerpiece of the app, with secondary screens accessible through the top navigation.
This change was made because users rarely change instruments, and we had also started to show more information directly on the chart, such as active and pending positions.
Chart-centric mobile redesign
User Feedback and Community Engagement
We prioritized user feedback, creating an open communication channel through a rapidly growing Discord community, thanks to our amazing and capable Growth department.
Their efforts in engaging users with surveys, polls, and AMAs were instrumental in steering development and design in the right direction.
Community-Driven Changes
An example of user feedback shaping the product was the transition from a top navigation bar to a sidebar on the desktop app. Initially resisted by users, we iterated based on their input and demonstrated the benefits, ultimately gaining their preference.
An image that was sent into the community for feedback
Many Quick Wins
Through communication with the user-base a lot of problems were quickly pinpointed and resolved, along with many feature requests.
Special attention was paid to designing the features with great UX in mind to make otherwise advanced or hard-to-understand features easy to work with.
Here's a quick look into just some of them:
In-app notifications
Order panel minimized and maximized
Popover displaying when the market is open
Keyboard shortcuts
Maintenance page
Settings modal
User friendly low margin alert
Positions Menu
Key Lessons Learned
- Communication and Open-mindedness: Engaging with colleagues and users can lead to innovative solutions and new perspectives.
- Flexibility in Processes: Being adaptable allows for rapid experimentation and optimization, leading to more polished and user-centric products.
Conclusion
My experience at MochaLabs and working on TradeLocker reinforced the value of community engagement, flexible processes, and a structured design system. These principles will undoubtedly influence my future projects, aiming for excellence and user satisfaction.
Enjoyed the read?
Hit me up via [email protected]