Overview • User Research • User Flow • Wireframes and User Test • High Fidelity Mockups • UI Design and Hand-off • Conclusion • Proposal Document
Tasks
UI/UX Research
UI/UX Design
Landing Page Design
Proposal Design
Timeline
13 weeks
Industry
Agritech
Team
4 Designers
4 Developers
Sections
Overview
The idea started when one of our group members has a small family business that buys and sells copra (dried coconut shells). Their business process still uses manual practices, such as logging records, checking inventory stock, and getting the current market price of the copra.
In Cocotrade, I worked and collaborated with three designers (Jennifer Mallari, Kathreen Nervez, Hazel Lao) and four developers (Hisashi Ishihara, Sachi Asano, Prathibha Wijetunga, Akifumi Hayashi).
My Role
I was deeply involved with the UX processes starting from user interviews to pinpoint the problem then refined and reiterated the user flow and sitemap for a more seamless experience.
I researched and designed a responsive and functional landing page, applying the current best practices. I set up some components, like input forms and navigation menus. I also created our proposal document with another designer, Kathreen.
The Problem
The daily fluctuation of market rates is challenging to calculate and update for copra sellers. Logging stocks and inventory is done manually, making it time-consuming to keep track of copra from each seller. Our team found an opportunity to help copra business owners address the problems with their manual processes.
Our Solution
CocoTrade is an all-in-one web app that offers a paperless inventory and sales management system to copra traders. With CocoTrade, business owners can easily view their monthly and daily transactions. Additionally, they can set their own copra prices based on the world market price and keep track of their purchases, observing trends from daily to yearly.
Our market and our users
Target Market
Small family-run and medium-sized copra traders in Southeast Asian countries such as the Philippines and Indonesia
Competitive Analysis
Big companies like SAP and Arctic Data have most of our features, however, Cocotrade is tailor-made for copra trading which makes it easier for our users to handle their business.
User Personas
With these user personas, we were able to start to ideate and proceed with our userflow.
Alice Leal Guo, 53
Small-scale copra trader
Bamban, Tarlac, Philippines
Bio
Alice comes from a family with a long history in copra trading. She inherited the business from her parents and has been managing it for the past 25 years. She is based in Tarlac and operates a small warehouse where she buys copra from local farmers, processes it, and sells it to coconut oil manufacturers.
Pain Points
Challenges in monitoring fluctuating market prices
Problems in manual and prolonged record-keeping and calculation of purchase/sales leading to miscalculation and profit loss
Poor inventory monitoring and management that leads to overstocking
Needs and Expectations
Real-time access to market prices and trends for easy business decisions.
Daily purchase computations and sales transactions to reduce errors and save time.
Inventory tracking to ensure adequate stock levels and prevent overstocking of copra.
Easy to navigate platform that integrates smoothly with her existing workflows.
Emily Chen, 38
Operations Manager at a copra trading company
Jakarta, Indonesia
Bio
Emily has a background in finance and has been working in the copra trading industry for over 12 years. She currently manages operations at a medium-sized copra trading company based in Jakarta, Indonesia overseeing domestic sales.
Pain Points
Challenges in monitoring the gain of the company due to poor financial management
Challenges in manual data entry errors and lack of real-time monitoring of coconut oil market prices
Difficulty in tracking copra inventory across multiple warehouses
Needs and Expectations
Real-time financial monitoring including cash flow, profit margins, and expense tracking of copra trading operations.
Sales orders, purchase transactions and invoicing status to manage revenue and expenses efficiently.
Access to live market prices and historical data to analyze trends, negotiate better prices, and forecast market movements.
Initial steps for an automated and digital record keeping
User Flow
The priority is for our users to start efficiently digitalizing their copra buying and selling records. We prioritized functions that are essential to a small business.
Wireframes
With a short timeline of 13 weeks for the whole project, we started our mid-fidelity wireframes to visualize our UX solutions. We always prioritized functions to help small family-run businesses.
User Testing
We conducted usability testing using our mid-fidelity wireframes. We got our results and adjusted them to add a prompt for a successful sales and purchase log. We also adjusted our copy since some of our testers were confused with the prior messaging of "Your warehouse is ready for shipment" to "Your inventory is ready for shipment."
Accessible, high contrast responsive design
Mockup
Dashboard
We applied a bento style and grid system for the dashboard. This style gives a better understanding of data visualization and hierarchy. Users will get a clear summary of their current business status at a glance.
Mockup
Purchase & Sales
Purchase Log is used when the business person buys copra from a farmer. They will fill out all of the details initially but data like name will be store for the future. Price per kg is relative to the current coconut price. Moisture level refers how dry the copra is.
Sales Log is used to track the shipped out inventory to the designated buyer (a corporation).
Mockup
Inventory
As middlepersons, they will have a warehouse of copras that can be ready to ship anytime. They can track how much is prepared to be sold and how much more they need. They can also see what's left in the warehouse and what's being shipped.
Mockup
Finance Tracker
Users will see the overall status of the business in this page. They can quickly see their daily, weekly, monthly, yearly purchases and sales activities.
Mockup
Landing Page
With the landing page, we showcased the main features of the web app for our hero banner. The sleek, clean design and the use of consistent imagery list the benefits of using our web app.
UI Design and Hand-off
UI Kit, Design System
For our developers to better execute our front-end design, we built a library where they can reference every component, colour, and card used.
Annotations
We also left notes for additional instruction and the intended behaviour of a function/design.
Alpha & Beta Milestones
To enhance our web app, we conducted Alpha and Beta bug bash to solve and correct what should have been.
Conclusion
A Little Reflection
Given the 13-week timeline, the project was very hectic for designers and developers. It also didn't help that the audience learned about Copra during the pitch presentation. As we juggled five subjects during this term, the team needed to communicate more effectively. My key takeaway is that no matter how minor something is, it is essential to inform all members, especially when adding components and changing assets. But more importantly, I commend our developers for being technical, and the team won Best Development.