( XS Studios / 2014 )
DP World
Delivered the corporate homepage system for the UAE region of one of the world's largest ports and marine terminals operators, as sole designer within the agency team
- My role
- Senior UI/UX Designer
- Timeline
- 2014
- Category
- Ports and Marine Terminals / Logistics / Corporate Communications
- Status
- New design, delivered
Tools Sketch, Photoshop
Generated schematic, not a screenshot. Real imagery to follow.
( The account )
Context
DP World is one of the world's largest ports and marine terminals operators, running more than 65 terminals across six continents. This project covered the corporate homepage for its **UAE region**, the operator's home market and the location of Jebel Ali Port, one of the largest container ports in the world.
A regional corporate site for an organisation of this size is not a marketing page. It is closer to a public switchboard. Shipping customers arrive needing schedules and terminal information, trade partners need Dubai Trade services, press need releases and photography, investors need performance figures, and job seekers need careers. Each of those audiences is legitimate, none of them can be deprioritised, and all of them land on the same URL.
The work sat inside an established corporate identity at a specific national moment. The footer carries the **Expo 2020 Dubai** and **ABSHER initiative** marks alongside DP World's own bilingual logotype, which positions the operator as national infrastructure rather than simply a company.
The problem
The structural problem is **audience breadth with no natural hierarchy**. A large corporate organisation produces many content types at once, press releases, circulars, newsletters, video, photography, exhibition schedules, terminal information, and the conventional answer is a deep navigation tree. Deep menus fail here for two reasons: they force every visitor to guess which branch holds their answer, and they hide the organisation's activity behind labels, so a site that publishes constantly looks static.
Three further constraints shaped the design:
- **Bilingual and right-to-left delivery.** Arabic and English are both primary in the UAE. Retrofitting right-to-left support after the fact breaks layouts, so directionality had to be designed in from the header down.
- **An established identity.** DP World's corporate navy, bilingual logotype, and the national initiative marks were fixed inputs. The job was to work inside that system, not to reinvent it.
- **Content volume that changes constantly.** Press releases, newsletters, and exhibition dates all update independently. Any layout that needed hand-composition per update would decay within months.
What I did
The homepage answers audience breadth with a **modular tile system** rather than a menu tree. Instead of asking the visitor to navigate, the page lays the organisation's activity out as a scannable surface of coloured tiles, each one a door into a different part of the site. A visitor scans rather than navigates, and finds their corner by recognition instead of by guessing a label.
The tiles are colour-coded across a saturated accent palette of purple, teal, gold, and blue, set against the corporate navy. Colour does the work that a menu label would otherwise have to do, giving each destination a persistent visual identity: the gold Video Gallery, the teal Exhibitions panel, the blue Photo Gallery, the purple Newsletter.
Above the tiles the page establishes **who this is and what they do** in a single row: a Core Business panel listing the four UAE terminals (Jebel Ali Port, Fujairah Port, Mina Al Hamriya, Mina Rashid), a Welcome panel carrying the regional positioning statement, and a rotating photographic news hero. The photography is deliberately industrial, container stacks, quayside cranes, terminals lit at night, which conveys operational scale in a way no copy could.
**Press activity gets its own standing column** rather than being folded into the tile grid, because for a corporate operator the flow of announcements is the clearest signal that the organisation is active.
Bilingual delivery is designed in at the top: an Arabic and English toggle sits in the utility bar alongside search and careers, rather than being buried in a footer or a settings page.
Outcomes
- Delivered the corporate homepage system for the UAE region of one of the world's largest ports and marine terminals operators, as sole designer within the agency team
- Resolved a five-audience information architecture problem with a modular colour-coded tile surface, letting shipping customers, trade partners, press, investors, and job seekers each find their route without a hierarchy that favoured one over another
- Designed bilingual Arabic and English delivery in from the header rather than retrofitting it, including the right-to-left implications flagged at handover
- Built the tile grid as a repeating pattern so content types could change without redrawing the page, which matters for an organisation publishing releases, circulars, newsletters, and exhibition dates independently
- Worked inside an established corporate identity carrying national initiative marks, extending it into page architecture rather than reinventing it
What I learned
Modularity is an editorial decision before it is a layout one. The tile grid works because the tile taxonomy is stable: Video Gallery, Photo Gallery, Exhibitions, Newsletter are categories that will still be correct in three years, while the items inside them turn over constantly. Getting that division right, what is a permanent category versus what is transient content, was most of the work, and it is the part that determines whether a modular page ages well or becomes a maintenance problem.
Consistency is worth breaking exactly once. Everything on this page is a tile except the press column, and that exception is what makes the page feel current rather than catalogued. The general lesson is that a single deliberate break reads as emphasis; a second one starts to read as an absence of system.
Bilingual work is an architecture constraint, not a translation task. The Arabic toggle is a small element, but designing for it meant the header, navigation, and grid all had to survive mirroring. Treating right-to-left as something to handle at the end would have meant rebuilding rather than adapting, and it changed how I approach any multi-language brief since.
( Tags )
- Corporate Website
- Information Architecture
- Ports and Logistics
- Marine Terminals
- Government and Public Sector
- Bilingual Design
- Arabic and Right-to-Left
- Modular Layout Systems
- Multi-Audience Design
- Media Hub
- Corporate Communications
- Art Direction
- Responsive Web Design
- Agency Work
- UAE