Jun 10, 2020
Designing a better VOGUE Experience
A UX Case study of Vogue’s Digital iOS app
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
