( By Munawar Khel / XS Studios / Senior UI/UX Designer / 2014 / 6 min read )
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
The result and the decision behind it
( What it did )
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
( The decision behind it )
Replace navigation depth with a scannable tile surface
With five distinct audiences and no basis for ranking them, a menu forces every visitor to guess. Tiles let each audience find its corner by recognition instead. The tile surface also displays the organisation's activity rather than concealing it behind labels, which matters for an operator whose credibility rests on visible scale and constant movement.
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
- 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.
The full record / 3 decisions
- My role
- Senior UI/UX Designer
- Timeline
- 2014
- Platform
- Responsive corporate website, bilingual Arabic and English
- Category
- Ports and Marine Terminals / Logistics / Corporate Communications
- Status
- New design, delivered
Tools Sketch, Photoshop
Team Sole designer on the homepage system, working within the XS Studios agency team for the client
Decisions
Replace navigation depth with a scannable tile surface
- What
- Structured the homepage as a grid of colour-coded tiles, each a door into a content area, rather than relying on the primary menu to route visitors.
- Alternatives
- A conventional corporate structure of hero statement, three-column intro, and a deep drop-down menu carrying the full site.
- Why
- With five distinct audiences and no basis for ranking them, a menu forces every visitor to guess. Tiles let each audience find its corner by recognition instead. The tile surface also displays the organisation's activity rather than concealing it behind labels, which matters for an operator whose credibility rests on visible scale and constant movement.
Give press releases a standing column rather than a tile
- What
- Pulled dated press announcements out of the tile grid into their own persistent column with a view-all route.
- Alternatives
- Treating press as one more tile in the media hub, consistent with the rest of the grid.
- Why
- For a corporate operator, the announcement stream is the clearest evidence the organisation is active and performing. Reducing it to a tile would have shown that a press area exists; a live dated column shows what the organisation actually did this month. Breaking grid consistency was worth it for the one content type where recency is the message.
Put the Arabic toggle in the utility bar, not the footer
- What
- Placed the Arabic and English switch in the top utility bar alongside search and careers, and treated right-to-left as a design input from the header down.
- Alternatives
- A footer language link or a separate Arabic domain, both common at the time.
- Why
- In the UAE, Arabic is not a secondary accommodation, and a language switch a visitor has to hunt for signals which audience the site was really built for. Designing directionality in from the start also avoids the far more expensive alternative, which is discovering during build that a layout tuned for left-to-right cannot be mirrored cleanly.
( Tags )
- Information Architecture
- Art Direction
- Responsive