Olea: Product Foundations First, Brand Identity Later
Connecting investors, suppliers, and operations
Olea is a fully digital platform connecting institutional capital with supply-chain enterprises, initially serving Asia’s manufacturing corridors with expansion into the Middle East and Africa.
A supplier waiting weeks for financing approval could miss a critical working-capital window. An investor evaluating the same deal needed to understand quickly whether the opportunity justified the risk.
Three portals addressed distinct needs:
- Investors: detailed, reliable data to evaluate opportunities and monitor risk.
- Suppliers: guided, low-friction financing and repayment workflows.
- Internal operations: secure tools to manage connections between both sides.
I worked alongside product, engineering, and business teams in a co-located project office. Senior leaders reviewed progress every two weeks. These different workflows had to move into design while the platform’s visual identity was still undefined.
Move early without creating expensive rework
There was no logo, palette, or visual direction. Waiting would have delayed the customer-facing portals, which required the most detailed design, stakeholder review, and testing. That would leave less time for validation.
Moving ahead also carried risk. If colours and styling were fixed across hundreds of screens, applying the eventual brand could require extensive rework.
I treated the missing brand as a system architecture problem: establish what could remain stable, and make the visual layer replaceable in both design and code.
Four decisions that kept delivery moving
- Prioritize portals by delivery risk
I prioritized the Investor and Supplier portals because they were Olea’s external face and required the most careful review.
The Internal portal was more operationally complex and screen-heavy, so I scoped it against an established internal design system. This gave engineering a proven foundation for the highest-volume work while keeping customer-facing delivery moving. - Separate product structure from visual identity
I defined layouts, component behaviour, information hierarchy, workflow states, and role-based interactions as the stable foundation. Visual identity would sit above it as a themeable layer.
After exploring several visual directions, I aligned stakeholders on an interim institutional look appropriate for fintech. This provided a shared baseline for evaluating product structure before the formal brand arrived. - Build reusable components around business behaviour
The components needed to carry trade-finance logic as well as visual consistency. I structured trade cards, dashboard modules, approval flows, data tables, status indicators, and filters as reusable product behaviours.
These components supported shared needs across portals, while role-specific navigation and workflows preserved the differences between investors, suppliers, and internal operations. Their visual styling could change independently of their underlying behaviour. - Define colour roles with engineering
Engineering was concerned about the rework that hard-coded colours could create. Before Figma variables existed, we created a shared naming reference that functioned as a manual token system.
Colours were named by purpose—surfaces, actions, warnings, success states, borders, text, and data status. This connected design styles to front-end theme mapping, allowing engineers to implement consistent colour logic without interpreting individual mockups.
Impact and reflection
For this zero-to-one build, the clearest impact was reducing the risk of moving before the brand was ready. Production-ready external portal designs gave stakeholders a concrete direction, and development was already underway when the brand arrived. The shared system allowed us to apply it without rebuilding the portal structures.
The key lesson was to decide what should stay stable and what should remain replaceable. Next time, I would test that separation in week one: apply a hypothetical palette to representative screens and verify that both the Figma system and front-end implementation could update colours globally.
