May 10, 2024

Designing TradeLocker at MochaLabs

Design

Motion Graphics

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

In-app notifications

Order panel minimized and maximized

Order panel minimized and maximized

Popover displaying when the market is open

Popover displaying when the market is open

Keyboard shortcuts

Keyboard shortcuts

Maintenance page

Maintenance page

Settings modal

Settings modal

User friendly low margin alert

User friendly low margin alert

Positions Menu

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

  1. 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

  1. Typography: Implemented a responsive scale, making text styles adaptable for desktop and mobile screens.

Responsive typography scale

  1. 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

  1. Communication and Open-mindedness: Engaging with colleagues and users can lead to innovative solutions and new perspectives.
  2. 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

Copyright 2025 All rights reserved. Matija Fućek