Overview
GBY is a Saudi marine company representing international boat, yacht, and marine mobility brands. The website needed to communicate premium positioning while helping visitors understand a complex portfolio of brands and products.
Context
The business required a bilingual digital presence that could support brand credibility, product discovery, and future growth. The experience also had to feel appropriate for a high-consideration category where visual quality and trust strongly influence enquiries.
Problem
A visually rich catalogue can quickly become difficult to navigate. The challenge was to preserve the emotional impact of marine imagery while giving each brand, model, and business message a clear place in the information architecture.
Goals
Create a refined digital experience that feels premium without sacrificing clarity or speed.
- Establish a strong first impression.
- Organize multiple brands and product families clearly.
- Support natural Arabic and English browsing.
- Make enquiry paths visible without becoming aggressive.
- Maintain a consistent experience across screen sizes.
My Role
I led the UX/UI direction and front-end execution. My work covered content hierarchy, page structure, responsive layouts, visual direction, bilingual behavior, component styling, and implementation quality.
Process
I audited the available content, grouped it by user intent, and defined a navigation model that separates corporate information from brand and product exploration. High-fidelity designs were tested against real text and imagery before being translated into reusable front-end patterns.
Key Decisions
The experience uses large editorial imagery, restrained typography, and carefully paced content rather than dense product grids. Brand pages can carry distinct visual personalities while remaining part of one coherent GBY system.
Design System
A shared system defines typography, spacing, buttons, surfaces, overlays, cards, image ratios, and responsive behavior. This keeps the experience coherent while allowing individual brand pages to feel appropriately differentiated.
Accessibility
The implementation prioritizes readable contrast, keyboard-visible interactions, semantic headings, useful alt text, large tap areas, and responsive text. Decorative motion remains subtle and does not block access to content.
Bilingual & RTL Considerations
The Arabic experience was designed, not mirrored mechanically. Navigation order, text alignment, spacing, icon direction, logo relationships, and line breaks were reviewed for RTL, while product names and mixed Latin content remain readable.
Development
The site was built as a lightweight static front end using semantic HTML, CSS, JavaScript, and Bootstrap utilities where useful. This approach supports fast delivery, straightforward hosting, SEO control, and easier maintenance without adding unnecessary framework weight.
Outcome
The result is a clearer and more premium digital presence that better reflects GBY’s market position, makes its portfolio easier to understand, and gives users direct paths to explore brands or contact the company.
Learnings
Luxury is created through editing and consistency more than decoration. Strong image selection, disciplined spacing, and clear hierarchy were more valuable than adding visual effects.