Horizonte Energy
An energy-bill journey, explained through interaction.
I rebuilt a focused landing page from my earlier frontend work with designers. Its electricity-bill context connects four explanatory cards, a branching sample form, illustrative app screens and a full set of questions.
Previous frontend work, reconstructed
One responsive page with a looping depth carousel, seven sample field roles, a conditional selector, three illustrative app views, 24 questions and a help dialog
Where this started
The earlier page explained a personal-loan product whose payments were associated with an electricity bill. Its sequence moved from a portrait and benefits to an explanation, form, app section and expandable FAQ. Each of those roles remains identifiable in the rebuilt page.
The reconstruction needed to retain the sequence and distinctive carousel behavior without repeating product promises or collecting leads. I replaced historical imagery, copy and app destinations with material that explains and demonstrates the interface.
My part
- Frontend & interaction
- I implemented the earlier frontend in collaboration with designers. The original visual design was collaborative work, not my sole authorship.
- Reconstruction
- I recreated the page using the shared Horizonte. identity, generated portraits and phone illustrations drawn in code. Fixed sample options replace personal information throughout the local test.
Decisions
Introduce the context at home
A generated portrait sets the scene in a home environment. The opening names the subject and its demonstration boundary, then links directly to the sample form and the illustrative app section.
Preserve depth through the loop
Four cards explain the page from different angles. The selected card sits forward while its neighbors recede, with the reference’s spacing and opacity relationships. Looping controls support arrows, keyboard input, swipe and direct selection.
Make the branch testable
Seven lists preserve the earlier form’s field roles using fixed fictional entries. Selecting another electricity company reveals an eighth required list. Validation and a local confirmation lead into review or reset, with focus restored to the relevant control.
Use three illustrative app views
Two phone drawings retain the role of the app section. The foreground phone offers three explanatory views. There is no download destination, account setup, credit calculation or financial operation.
Keep the complete question set
Four questions appear before the full-set disclosure. All 24 answers explain the demonstration and its limits. A separate help dialog gives short operating instructions, while native disclosures remain readable without JavaScript.
Time actions after their explanation
Copy precedes its action in the entrance sequence. The portrait and backing layer reveal together; the header and footer stay visible. Reduced-motion styles present the same content in a stable state.
Looking back
I focused on the transitions between reading and trying: the explanation introduces the form, the branch demonstrates a condition, and the questions resolve uncertainty. Keeping those connections made the page feel complete without adding a live financial service.
Project note
This case reconstructs earlier frontend work I implemented in collaboration with designers. The identity and content are adapted for this portfolio, using fictional generated portraits and newly written prose. It offers no lending, energy service, approval or commercial terms; it collects no personal data and contacts no lender or electricity company. No business result or sole authorship of the original design is claimed.