The Gentlewoman: From Print to Digital
UX/UI Case Study
Along with Iratxe Unzueta, in the framework of Ironhack’s UX/UI Bootcamp, I was involved in the design of a responsive online platform for a magazine or newspaper of our choice and deliver a consistent, branded and engaging experience and all the documentation that would allow the project to continue after our intervention as UI Designers.
We only had 6 days to design a hi-fi interactive prototype of the website, create an animation using Principle, and also deliver a style guide and a benchmark analysis.
Following, I’m pleased to introduce you an abstract of the whole process. I hope you enjoy it.
The Gentlewoman
For developing our project, we decide to chose a print magazine, The Gentlewoman. We both like it and we think that turning its last issue into digital is an exciting challenge.
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.
The Research
Before anything else we gather information about the magazine. We realize that although it is a print magazine it 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 access to the entire content of the printed magazine.
The User Persona
In the project briefing there is a list of 5 predetermined user personas. We picked out Paula, we think she is the one who better defines the reader of the magazine.
Paula is 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 to show off on online and have her first expo soon to start being “someone” in the art scene.
The Benchmark
At this early stage we both agreed to analyze the competitors and compare them with The Gentlewoman.
The Gentlewoman stands out for its qualitative literature and photography. We realize its design an content is alternative and profound as opposed to conventionality and superficiality.
The Value Proposition
Once we define the Problem Statement we can draft the Value Proposition:
An online responsive magazine that offers interviews and articles about women showcasing their genuine and deep personality, wit and personal style.
The Creative Central Concept
Having in mind the genuine character of The Gentlewoman, we start shaping the Central Creative Concept that will graphically support the whole project.
We build the concept: The Multilayered Woman. Referring to woman’s diverse profoundness in personality, wit and style. So we quickly summarize it in the following Moodboard and Style Tiles:
The Responsive Web Design
Mobile first. We developed the design for mobile then we adapt it to the tablet, laptop and desktop viewports to reach a truly responsive web design.
We created a landing page introducing the cover and the main information of the current magazine’s 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.
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.
Following the Cover Story page on mobile, where the multilayered woman concept is graphically expressed by overlapping pictures, shapes and typography in a modern and consistent way.
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 the Club sections respectively.
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.
In the following pictures you can overview the whole responsive design in the different devices.
The Final Prototype
Thanks for reading, I hope you enjoyed it! I would appreciate any feedback. To know more, visit my online portfolio. Feel free to connect with me on LinkedIn.
