Context
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.
Real-time Market Pricing
Monitor the fluctuations and trends for coconut oil in the world market. In addition, the real-time market pricing will automatically adjust the suggested purchase price of copra for users.
Inventory Management
Monitor and track inventory status, providing users with real-time updates and notification reminders when the warehouse capacity is ready to make a shipment.
Finance Management
Keep track of copra sales and purchases, with detailed yearly, monthly and weekly reports to monitor and analyze profit margins and the business’s financial status.
Design Process
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
Add description
High-Fidelity Wireframes
Dashboard
Add decription
High-Fidelity Wireframes
Landing Page, On-Boarding, Settings, Finance, Purchase and Sales Log
Add decription
UI Design
Logo
Add description
UI Kit
Our logo features a sugar cube that our team called "Sugar Baby". In this way, our app gives a fresh take on glucose management while balancing irony with approachability. We used plus and minus symbols for the eyes to indicate glucose highs and lows.
Bug Tracking
Add description
Takeaways
As the lead UI/UX designer, I focused on crafting the inventory and dashboard pages through multiple iterations, ensuring they were intuitive and user-friendly. Recognizing these screens as the most frequently used by our users, I collaborated closely with my co-designers, actively seeking and incorporating their feedback to refine the design. This iterative process taught me the importance of teamwork and user-centered design in delivering interfaces that balance functionality with ease of use.