skip to Main Content

Design of the market leading retail website for Maps International – rollout of a new visual brand and UX improvements requiring minimal build time

Process: Brand application/interpretation for digital, design of responsive UI including all key product templates, purchase processes, product filtering/customisation, account pages. UX recommendations and UI design.

Working closely with an internal UX team the challenge was to design the first application of new branding (designed by O Street) and improve the UX without the need for significant functionality or technology changes.

UI modules and design details, including iconography, were inspired by the new branding, featuring strong diagonals, geometric shapes and dual line weights.

Maps International Icons

Application of the brand colour palette was experimented with to achieve a balance between an appealing, brand-appropriate look & feel, and a well structured, customer-friendly UI.

Maps International Nav Colour Sketches

The ‘quick-basket’ module features basket items with price, an editable quantity field and the option to show size & finish details. There are clear options to proceed to checkout or view the full basket page, and visual focus is provided with a subtle masking of the page behind.

Maps International Quick Basket Feature

A ‘sticky’ header was explored to keep the ‘quick basket’ in view when scrolling – designed to create consistent navigation positioning for different UI states: page view, menu view and product filter view.

Maps International: Mobile basket
Maps International: Mobile menu
Maps International: Mobile product filters
Maps International: Your Basket

The products are configurable with many options for size, finish and personalisation. A design system was created to provide a simple one-step-at-a-time process, to guide customers through the necessary refinements to their product choice.

Maps International: Product Configuration