The Gentlewoman. From print to digital

The Gentlewoman is a biannual magazine that celebrates modern women of style and purpose. It offers a fresh and intelligent perspective on fashion that's focused on personal style — the way women actually look, think and dress. Featuring ambitious journalism and photography of the highest quality, it showcases inspirational women through its distinctive combination of glamour, personality and warmth.

Overview

Along with Iratxe Unzueta — within a 6 days period — I was involved in the design of a responsive online platform for The Gentlewoman magazine.

The Gentlewoman's screens

Scope

  • Deliver a consistent, branded and engaging experience.
  • Deliver all the documentation that would allow the project to continue after our intervention as UI Designers.
  • Design a hi-fi interactive prototype of the website.
  • Create at least an animation using Principle.
  • Deliver a style guide and a benchmark analysis.

Research

Although it is a print magazine, The Gentlewoman currently has a virtual place, thegentlewoman.com, where the two main interviews of each issue are published.

We set the objective; to create an online platform where the subscribed user could easily have access to the entire content of the printed magazine.

User Persona

We defined the user persona, Paula, a 19 years old creative that wants to be an artist and connect with people around the world. She reads voraciously, everywhere, anywhere — in bed, public transportation, with friends, out loud, for her projects, etc.

Her goals are being cool and achieve her dreams, read the most influential authors from her time in order to show off online and have her first expo soon to start being someone in the art scene.

Paula's needs

Benchmark

We analyzed the competitors and compared them with The Gentlewoman.

The Gentlewoman stands out for its qualitative literature and photography. Its design and content is alternative and profound as opposed to the conventionality and superficiality of other magazines.

Paula's needs
The Gentlewoman's direct competition

Value Proposition

An online responsive magazine that offers interviews and articles about women showcasing their genuine and deep personality, wit and personal style.

We suggest profoundity and avoid superficiality by presenting the information in differents levels of depth.

Creative Central Concept

Having in mind the genuine character of The Gentlewoman and the idea of profoundity by differents levels or layers of depth, stated before, we started shaping the Central Creative Concept that will graphically support the whole project.

We built the concept: The Multilayered Woman. Referring to woman's diverse profoundness in personality, wit and style.

How do we get there?

Mood Board & Style Guide

So we quickly synthesized it in the following Mood Board and Style Guide:

Mood Board
Style Guide

Responsive Web Design

Mobile first. We developed the design for mobile, then we adapted it to the tablet, laptop and desktop viewports to reach a truly responsive web design.

We created a home page introducing the cover and the main information of the current issue :  magazine's name, issue number and main featured artist. By scrolling down, the reader can browse through the website and reach the next screen  —Cover Story— showcasing the main interview of the issue.

Landing Page and Cover Story screens

In case the reader tabs on an article while not being subscribed, a dialog appears offering the possibility to subscribe and have unlimited access to the whole content for 9,99€/year. This dialog also indicates the reader the possibility to choose between 5 articles to read free of charge before taking the decission to subscribe.

Subscription screens

At the Cover Story page on mobile, shown below, the Multilayered Woman concept is graphically expressed by overlapping pictures, shapes and typography in a modern and consistent way.

Cover Story screen on mobile (for a better and faithful experience watch this image on mobile).

On the upper right corner of the mobile edition of the website, the reader is able to tab the hamburger menu and access the magazine's Summary —divided in three parts— the Shop and Club sections respectively.

Cover Story screen on mobile

By tabbing on Part 1, the reader have access to the magazine's first section that showcases some secondary Interviews & Shootings. In this example, taking in consideration that the reader is browsing with no subscription and has already read the Cover Story article, the tool bar states that the user has only 4 readings left free of charge before having to subscribe in order to keep reading the magazine.

Magazine’s Part 1 section on mobile (for a better and faithful experience watch this image on mobile).

In the following pictures you can overview the whole responsive design in the different devices.

Cover on different devices
Part 1 section on different devices
Cover Story section on different devices

Final Prototype

This project has been conceptualized and designed by the team of Iratxe Unzueta and Adrià Lleó within the framework of Ironhack Barcelona's UX/UI Design Full Time Bootcamp.

To know more about it, READ THE FULL CASE STUDY on Medium (5 min.)