Horizonte Brokerage
Twenty-four pages, each with a reason to be different.
I rebuilt a brokerage website as a connected set of 24 pages. Short introductions, detailed reading sequences, paired comparisons and local interactions each retain a distinct place in the experience.
Previous frontend work, reconstructed
24 routes covering seven investment topics, five service areas, a platform illustration, six learning tables, explanatory pages and a sample contact flow
Where this started
The earlier site had its own architecture, separate from the institutional and corporate-banking websites. Its 24 routes ranged from compact topic pages to long-form explanations, with a catalogue, service section and several utility destinations.
The challenge was to keep that variety coherent. I needed to reconnect the reading paths while replacing historical claims, inconsistent numeric tables and financial actions with content and interactions appropriate for a fictional portfolio demonstration.
My part
- Implemented
- I developed the earlier frontend in collaboration with designers, including its navigation and interaction behavior. The historical visual design was a shared contribution.
- Reconstructed
- I reconstructed the page system using the portfolio’s Horizonte. identity, generated photographs and independently written Portuguese copy. The interactive examples remain local to the page.
Decisions
Give each page its own structure
The catalogue does not expand into one repeated template. Funds use category cards, property funds use side-by-side disclosure answers, and pension and treasury topics unfold through longer sequences. The learning page keeps its six-table structure.
Make the routes work together
Overview pages, exclusive menus, related links and section anchors connect the full route inventory. A six-selector contact example demonstrates validation, reset and confirmation without collecting personal information or sending a message.
Carry one identity across the system
The shared wordmark, Montserrat type and ivory/violet palette tie the pages together. Generated scenes with fictional adults give the reconstruction a human visual presence without implying a real team or customer endorsement.
Use motion to clarify sequence
Introductions arrive before their actions; cards enter as complete units. The shell stays visible, and reading remains available through reduced-motion and no-JavaScript alternatives. Motion follows the content hierarchy rather than adding a separate layer of activity.
Write for the demonstration itself
I rewrote the page copy, comparison answers, table cells, policy explanations and sample-screen text for this version. The mobile screen and Home Broker are illustrations, tax sections contain no rates, and the prototype provides no accounts, transactions or financial advice.
Looking back
The scale of the site made the relationships between pages as important as any individual layout. Rebuilding those connections let me preserve the variety of the original frontend while giving this version an independent voice and a clear scope.
Project note
This reconstruction presents earlier frontend work I implemented in collaboration with designers. The identity, generated photography and newly written content are adapted for the portfolio; all depicted people are fictional. It does not represent an operating brokerage, offer advice or products, claim business results, or attribute the original design solely to me.