Brand Identity & E-Commerce
A complete visual identity and product UI for a Caribbean e-commerce marketplace, built from nothing and designed to attract investment and launch.
Client
Scarlett Connect Ltd
Year
Feb–Sep 2021
Role
Brand Designer and Product Designer. Solo. Responsible for the full design arc from logo to shipped component library.
Stack
Figma · Storybook · WordPress · WooCommerce
Context
Scarlett Connect Ltd had a founding team, a business plan, and a clear ambition: build the Caribbean's first credible multi-vendor e-commerce platform, starting in Trinidad and Tobago. What they didn't have was a visual identity, a design language, or a product UI. Products, services, events — all of it needed to exist before the team could approach investors or onboard merchants. The brief was to build all of that from the ground up, working directly alongside the CEO.
Problem
The challenge wasn't just design execution, it was sequencing. The brand had to come first, not as a style exercise but as the foundation every downstream decision would sit on. Typography, colour, icon language, spacing: all of it decided once at the brand level, then held consistently through a product UI complex enough to handle multi-vendor commerce, service bookings, and event listings. Designing the product first and retrofitting a brand onto it would have produced exactly the kind of inconsistency the team was trying to avoid going to market.
There was also a cultural dimension. The client was building for a Caribbean audience. The visual language had to read as local without becoming generic, approachable without looking cheap. The European design sensibilities I brought needed adapting, not imposing.
Approach
The first decision was the symbol. The scarlet ibis, Trinidad and Tobago's national bird, was the obvious reference and the right one. The question was how to render it. I ran multiple grid-based explorations, working from photographic references of the bird in flight and at rest, translating poses and silhouettes into geometric mark candidates. Six distinct directions before narrowing to the one that worked: the bird's head and wing abstracted into an upward, asymmetric form rendered in overlapping red planes. The geometry reads as movement without being literal. The grid construction underneath gave the mark the discipline to hold at small sizes and across print and screen.
The second decision was colour. The scarlet ibis gave us the red, but a single red is not a colour system. The brand needed a warm, graded red range that could carry the primary identity and still support a full product UI across light and dark themes. I settled on a primary scarlet running from deep red to orange-red, paired with a muted steel blue for the wordmark. The blue-red pairing is unusual enough to feel considered rather than generic.
The third decision was the wordmark: custom-spaced italic bold, built on a clear x-height grid, giving the brand a friendly but confident register. That sensibility carried through the product type system, Bernina Sans as primary and Lato as secondary, with the scale defined from display headers down to labels with explicit line-height and tracking values at each step.
From there, the product was built on top of the brand. The component library in Figma, headers, product cards, ad units, navigation, hero sections, filters, badges, all derived their visual decisions from the identity. The red as the primary action colour, the geometric language as the basis for corner radii and structural choices, the type scale as the hierarchy across every screen. Storybook integration followed, giving the engineering team a single place to access and implement what the design defined.
Work
The logo construction started with grid-based explorations of the ibis in multiple orientations before converging on the final mark, a stylised head and wing form built from overlapping geometric planes. Every curve and intersection has a reason.
The wordmark was built on a proportional spacing grid with explicit measurements for minimum clear space. Three rendering variants were defined, Simple, Gradient, and Organic, giving the brand flexibility across surface types without breaking the system.
The colour and motion language derived from the ibis's wing planes. Overlapping faceted shapes in red-to-orange gradients became the primary graphic element across merchandise, presentations, and app splash screens. The same shapes animate as loading states in the mobile app.
The full product UI was built on the brand foundations. The component library covers headers in two sizes, product cards in three variants, ad units in portrait, landscape, and strip formats, service cards, badges, and form elements, all documented in Figma and implemented in Storybook.
Outcome
When the engagement ended in September 2021, Scarlett had a complete visual identity, a documented brand system, a full component library in Figma with Storybook coverage, and a working WooCommerce-based platform ready for merchant onboarding. The team had what they needed to approach investors and begin acquisition. That was the brief.
It was my privilege to work with a designer of Francisco's calibre and keen work ethic. He delivered design with a European sensibility for a classic yet clean, modern look, and with white space balance that lends a sophistication to our visual brand identity.
Sabrina V. · Creative Director, Scarlett Connect Ltd
Reflection
The sequencing was right: doing the brand first and the product second meant every decision in the product had a system to reference rather than a judgment call to make. The cultural adaptation took more iteration than the visual craft — understanding what the client's audience would read as premium versus what felt imported and cold required working closely with the CEO and staying genuinely open to feedback. The grid-based logo process turned out to be the most effective communication tool for that: showing the construction gave the client a way to engage with the craft rationally, not just react to it aesthetically.
Other Projects
