
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.

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
Initial Challenges
Upon joining, my first task was organizing the design front, starting with the foundations for a scalable design system. The major initial feature I tackled was a mobile experience overhaul, making the chart the central focus.
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
Improve grammar:
The chart became the centerpiece of the mobile 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
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 me@mfucek.com