One of the most famous shops in the world, the London-based luxury department store Harrods, publishes the monthly Harrods Magazine for its demanding clientele. The well-established magazine serves as the store’s very own ‘style bible’, with high-class fashion, beauty and lifestyle features.
The digital edition also aims to deliver the premium quality of the store and magazine to all mobile devices (smartphones and tablets, iOS and Android).
From design to technology, this is an extremely complex task. How, then, can a contemporary and striking look be united with technical perfection and exclusive interactive content, such as the Harrods make-up studio, for a brand steeped in tradition?
Like all other content, this must be able to be maintained via a CMS to enable individual products and elements to be replaced and updated at any time. This aims to significantly improve, simplify and shorten the production of the digital magazine.
From the initial concept to the finished redesigned digital magazine, the design of the Harrods Magazine has been completely revised and functions responsively, whether on a smartphone or a tablet. The appearance is high-class and modern, clearly structured and decluttered, whilst navigation is user-friendly and easy to follow.
For this, we developed a completely new back end that did not previously exist for digital magazines: modules instead of templates. The system can be converted and composed for the visual bandwidth of all devices. The individual layout elements are designed to be as flexible and user-friendly as possible and adapt smoothly and dynamically to both text and image content for all screen resolutions. The modules form the basis – they are building blocks that are bundled into groups to create a fixed layout.
The focus is on the visual appearance of each page. As a result of this, we opted for a native text format instead of an HTML design. The Harrods Magazine app is therefore the first responsive native app (for iOS and Android) that is maintained via a CMS.
The new digital Harrods Magazine has been designed for all mobile devices, smartphones and tablets, iOS and Android. The design is responsive and adapts to various screen resolutions.
Normal templates are static. Our approach of working with flexible modules and module groups as a basis enables a versatile and variable layout design that is easy to maintain via a CMS. The modules are predefined and responsive.
The design looks progressive and elegant – also because the previous typography was modernised and ‘dusted down’. Through the use of various different fonts and freely combinable headline models, a wide range of text design options are available to the content manager.
One of the most important criteria in the development process was the creation of an optimal user experience. This also means the native programming of apps in order to guarantee optimal performance. This way, the high expectations of Harrods are also met in visual terms.
In order to ensure that the main points can be seen on every display, focus points can be set on the image area in the CMS. Regardless of how a photo is cropped for the various responsive levels, the selected area remains visible.
Within the development process, several prototypes were created, the user journey of which was repeatedly tested and improved.
All requirements were specified in 370 pages of documentation. This served as the basis for the precise implementation of the concept. Nevertheless, the documentation is also used as a kind of handbook by the content manager.
This represents the nucleus of the new digital Harrods Magazine. In the container, users can find all issues of the magazine, an events section and an overview of the services offered in the London luxury store itself. Products can also be saved in Favourites and bought via a shopping function.
With a range of exclusive topics and trends, the monthly issues represent the heart of the concept. The digital Harrods Magazine now portrays the very essence of the Harrods brand: inherently high-class, stylish and premium.
One of the core elements of each issue is the make-up studio. This was completely redrafted, designed and implemented. The result: the products are even easier to test on different faces, they can be shared via social media networks and can even be purchased via the app.
The focus was on simplicity of use. The workflow was optimised for the client in order to enable the creation of a new issue in a fraction of the time previously required. Here, the entire content is stored centrally and issued for all devices at the touch of a button.
Innovative in so many ways. Concept, design and development. Swipe is the perfect partner for us.
Head of Digital Design, Harrods