Designing a better VOGUE Experience

Why Vogue?

It so happened that on my 25th birthday I got a digital subscription to Vogue, after spending many years of reading and adoring the physical copy. I was naturally overjoyed beyond words. I religiously used the app every day while commuting to school, during coffee breaks, before bed you name it! The problem was, even after diligently using it for over a week, I still had trouble navigating through the app. I have a Master’s in Information Technology, it shouldn’t be this hard I thought! I then figured that if I am facing these problems then plenty of others are as well. I dialed up my friends for their opinion and went online to do a brief research. There were plenty of complaints regarding the app’s lack of a friendly user interface.

​Through usability testing, I got to know that people struggled with navigating the app. The navigation was neither clear nor user friendly. I took it upon myself to revamp the app as an opportunity to provide the users with what they want: a real VOGUE experience.

Disclaimer: I am not affiliated with VOGUE in any capacity

Vogue’s current iOS App

OBJECTIVES:

  • Facilitate a better user experience for Digital Vogue by improving adn improvising its UI.
  • Improve my skills as a designer and design a more personal intuitive user interface.
  • Design through User Empathy
  • Learn how to analyze user / customer research, create flow charts, wireframes and prototypes.​

ABOUT VOGUE AND ITS USERS:

Before I began this case study I wanted a thorough analysis of “Vogue” as a brand. For over 125 years Vogue has been a highly influential authority on Fashion, Beauty, Couture and Culture. Currently there are 22 editions of Vogue printed worldwide.

Target Audience

Vogue’s target demographics are mostly women between the ages of 18–45. These include women who work in the fashion and cosmetic industries such as models, publishers, designers, photographers etc and young women who are simply interested and would like to be up to date with the latest novelties in Fashion and Beauty.

​As of 2020 Vogue boasts over 24.6 million users worldwide. Out of all the users, 18% are male while 82% are female. The current users of Digital Vogue is a whopping 94.1 Million while the users of the print edition are 24.6 Million.

In the continental US alone there are 13 Million unique users of Digital Vogue.

Online Survey

I also conducted an online survey to further understand user needs and requirements. The respondents are between the age group 22–30. They were all females in varying professions such as college grads, software developers, architecture students etc. The respondents seemed to be a fair representation of Vogue’s users.

Online Survey Results

User Research

My next step was to hit the app’s Review on the app store. People have the most honest opinion of their experience there. Below are some of the screenshots of the reviews I read.

Screenshots of the app’s review from the iOS Appstore

Some of the complaints that really stuck out were:

Not user friendly

Confusing to navigate

Difficulty in finding the “home”

Non-intuitive

Affinity Map:

I used affinity mapping to group similar observations together. This helped me identify and highlight several key insights that came up during the interview.​

Me attempting to make sense of all the data collected.

2x2 Matrix

The 2x2 matrix helped me better understand the relationship between the user and the business which further helped me prioritize the issues that need to be addressed.

User Persona:

I created a user persona that best describes Vogue’s typical user. The persona I developed is roughly based on all the users I interviewed.

User Persona

REDESIGN PROCESS

Current Information Architecture

The area where most of the users had trouble using the app was with the navigation. The Vogue app also includes a “how to navigate” feature in its settings so that users can use it for guidance. I believe that a good design would not make the user forget about it in the first place. Therefore in order to redesign a better navigating experience, I rebuilt the information architecture for which I used the card sorting method.

Current Information Architecture

Revised Information Architecture

The newly revised IA not only improves the overall structure and organization of the app thereby making the navigation easier, but also increases the visibility of the app’s key features.

Revised Information Architecture

Ideation and Low fidelity prototypes

I first tried all my initial ideas by hand and sketched them out on paper. This helped me through the iteration process and figure out all my options before I settled on one.

Low fidelity Prototypes

Wireframes

I designed the initial wireframes keeping in mind all the issues discussed above. I then put these wireframes through testing using techniques like Contextual Inquiries and Heuristic Evaluation before committing to the final design.

Medium Fidelity Prototypes

UX REDESIGN AND SUGGESTIONS

Experience 1 — Homepage homage

The current homepage of the app appears to be bulky. The elements are placed way too close to each other, leaving no breathing space which can be pretty confusing and also cause anxiety to the users, like it did to me. So I decided to include a “grid” button that would enable both list view and a grid view.

Before
After

Experience 2 — Hamburger vs Kebab

Most of the essential features of the app were hidden away in a kebab menu. The elements were placed in a disorderly, haphazard manner which made it difficult for users to remember each element’s place. Nobody wants to memorize a feature’s position. So I decided to redesign the menu and organize its content in a more conventional and convenient manner. I relied heavily on the card sorting method for this particular redesign.

Before
After

Experience 3- The swiping scandal

This was one of the most confusing parts of the app, “the swipe down” to get the menu options.

When a user reads, he/she tends to scroll down. So swiping up or down to get the table of contents and other menu options goes against the direction of reading which makes the user lose sight of what he’s reading. Which is exactly what happened to me. So I decided to implement the traditional “tap to view” option. This will make reading much easier and provide a comfortable access to the menu options.

Before
After

Experience 4-The table of contents tableau

The table of contents is one of the crucial parts of navigation. It helps users navigate between the pages and aids them in browsing through topics. The current app uses a “swipe down” feature to get to the table of contents as talked about in experience 3. To make things simpler I included a “tap on the left side of the screen” to get the table of contents.

Before
After

Experience 5- The curious case of the preview button

The current app did not have a visible “preview” button present. Users aren’t made aware instantly that they can preview the magazine before buying it. I deduced that the chances of a user buying a magazine or a subscription increase if he/she “previews” it first. So I figured why not incorporate the preview button in the homepage right where the user can see it!

Experience 6-The personalization paradox

One of the most important aspects for a user is that the app be personalized. That’s what sets them apart from hundreds of others who use the same app. When an app has a profile, or uses the user’s name and/or image it can have a positive impact on the user which further increases brand value. Who doesn’t like to be greeted personally? The lack of personalization in the current app seems to be a bit off-putting. There isn’t so much as a user email id let alone the users’ name present anywhere. The user has absolutely no idea whose account they are on.

Before
After

Experience 7-Favourites!...or lack thereof

The current navigation to “favorites” is a bit long and I felt that it could be made much simpler.

Before
After

Experience 8- The Loading screen runway

Nobody likes a loading screen, it makes the users impatient and irritant and I believe nothing is worse than a static loading screen. In such a case the user isn’t aware of what’s happening which blatantly ignores Norman’s heuristic principles on “Feedback”. So I ever so slyly introduced a bit of animation into it like so.

The redesigned finished product

I also made a functional prototype of the app on Adobe XD which can be found here.

Needless to say, I absolutely loved working on this project right from the beginning. This was a perfect opportunity for me to hone my design skills and push myself better. I’ve been a huge fan of Vogue ever since I was a 15 year old girl, and now 10 years later working on enhancing the digital experience was so serendipitous! I wanted to do a thorough job so I took the process slow and steady and now that it is done I do feel a strong sense of accomplishment.

I’d really like to extend my gratitude to Priyanka Gupta whose case studies were like the holy grail for beginners like myself! I urge all the novice UI UX designers to check out her portfolio :https://priyanka.io

To my TL;DR fam, I feel you and I’m Sorry about the uber-long paragraphs!

On a final note, I’d like to quote Henry Ford:

“If I had asked people what they wanted, they would have said faster horses.”

Thanks a ton for taking out the time to read this!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store