Overview

CocoTrade is a web app designed to simplify inventory and sales management for small and medium-sized copra trading businesses. Inspired by a teammate’s family business struggles, the app replaces manual tracking with a digital system that lets users log transactions, monitor inventory, and adjust prices based on world market trends.

Our team aimed to create a user-friendly and scalable tool tailored to traders in Southeast Asia, helping them reduce errors, save time, and gain better control over their operations.

My Role

As the lead designer, I was responsible for ensuring the design consistency across the entire project. I’ve worked with three experienced designers that I collaborated with in defining the visual direction of Cocotrade.

I designed the pages for dashboard and inventory screens—from wireframes to high-fidelity prototypes—focusing on clarity, usability and responsiveness. I created reusable components and custom iconography, and implemented Figma variables for colours and typography, which significantly improved design efficiency and developer handoff. I also contributed to the UI kit and project proposal documentation.

Lastly, I took the lead in cross-functional collaboration, managing design feedback loops, aligning the team through design reviews, and ensuring that all assets delivered met both user and technical requirements.

Timeline

We completed Cocotrade over a 12-week timeline. We followed an agile workflow, with weekly sprints that included planning, design, development and testing phases. This approach allowed our cross-functional team to iterate quickly, deliver key features on schedule, and ensure continuous collaboration throughout the project.

The Problem

Copra trading businesses rely heavily on manual processes for logging transactions, tracking inventory, and adjusting daily copra prices based on fluctuating market rates. These tasks are time-consuming, prone to error, and make it difficult for business owners to maintain accurate records and operate efficiently. Our team identified the need for a digital solution to streamline these operations, reduce manual workload, and support more accurate, real-time decision-making for small and medium-sized copra traders.

Our Solution

Cocotrade provides a streamlined solution to help copra traders manage their daily operations more efficiently. By automating key processes like pricing, inventory tracking, and transaction logging, the platform reduces manual workload and improves accuracy.

Research

We began our research by first understanding what copra is and how the trading process works. We watched several educational videos and gained deeper insights with the help of our teammate Hazel, who shared her firsthand knowledge of her family’s copra trading business. As she explained each step of the process—from daily price checking to inventory tracking—we were able to visualize the real-life challenges that traders face.

Research

Brainstorming

Our team conducted multiple brainstorming sessions to map out the user journey and identify pain points. We asked critical questions about the day-to-day operations, the tools currently in use, and the frustrations experienced by traders. These sessions helped us uncover key problems and define which features would be essential for our MVP. This early phase of research laid the foundation for our design decisions and ensured we were building a solution grounded in real user needs.

Research

User Personas

Research

Competitor Analysis

Enterprise tools like SAP offer a wide range of features for many industries, but they are complex, expensive to customize, and require technical expertise—making them unsuitable for small businesses like copra trading. Arctic Data is more flexible but still requires a lot of resources, dedicated roles, and setup time, which can be overwhelming for small family-run operations.

These challenges show a clear need for a simple, affordable, and easy-to-use solution. CocoTrade was built specifically for small to medium-sized copra traders in Southeast Asia, offering just the right features to manage pricing, inventory, and sales—without the extra cost or complexity.

Userflow

Wireframes and Mockups

Wireframes

Low Fidelity Screens

This was one a crucial step in ensuring the usability of the app. Through multiple iterations, we focused on the simplicity and accessibility to accommodate our target users who are primarily middle-aged and older adults.

High-Fidelity Wireframes

Dashboard

The dashboard provides traders a quick overview of their daily operations. It displays the real-time market price of palm oil alongside the current copra purchase price for farmers, helping users stay updated with market fluctuations. The dashboard also includes an inventory trend chart, a summary of recent purchases and sales for the day and a month-to-month comparison, giving traders valuable insights into their business performance at a glance.

High-Fidelity Wireframes

Inventory

It is one of the core features of Cocotrade, giving users a simple way to monitor and manage their copra inventory. In this feature, traders can view both stored and shipped copra, track inventory levels and plan upcoming shipments. It also provides a summary of recent sales, helping users stay on top of their operations at a glance.

High-Fidelity Wireframes

Landing Page, On-Boarding, Settings, Finance, Purchase and Sales Log

UI Design

Logo

The logo of Cocotrade is a representation of palm leaves, which symbolizes sustainability and the tree where copra is from, with the bar charts representing the platform’s data-driven insights and analytics

Typography

Rasa typeface was chosen to be used for headings because of its classic serif characteristics with modern details. This serif font also conveys a sense of tradition and reliability.

DM typeface was chosen for body texts and headings in dashboard. Its clean lines and simple forms ensure that text remains clear and readable. It also has a nice contrast with the serif style of Rasa.

Color

Orange was used because of its warm color and bluegreen that represents nature and stability.

UI Kit

Bug Tracking

Our team conducted both alpha and beta bug tracking to ensure functionality and design consistency during implementation. This process was essential in refining the product and allowed us to present the project at its best.

Takeaways

Coordinating closely with our PM and lead developer, I ensured that the design vision stayed aligned with technical feasibility and project goals. One of the biggest challenges I encountered was the gap between our Figma designs and the developers’ implementation, which often led to inconsistencies in spacing, typography, or component usage. To address this, I advocated for and organized bug bash sessions during both the alpha and beta stages. These sessions brought designers and developers together to review the product in real time, identify visual and functional discrepancies, and resolve them collaboratively. Not only did this process improve the final quality of the product, but it also strengthened communication within the team and highlighted the value of iterative testing. My key takeaway is that effective design leadership goes beyond creating screens—it involves building bridges between design and development, fostering open feedback loops, and ensuring that the final product truly reflects the intended user experience.