Improving the Vogue Runway gallery experience

As part of the upcoming launch of the Vogue Runway (VR) app on Android, I undertook a UX audit of the existing user flows on iOS, to identify areas for improvement. This was then followed by prototyping and testing new designs from both a usability and interaction design point of view.


Company:      Vogue Runway

Length:           2 months

Completed:  March 2021

Team:              UX Lead, Product Manager, UX Researcher, Product Designer (me)

Tools:               Figma, ProtoPie, Usertesting.com

‍

Business Goal

As part of the upcoming launch of the VR app on Android, the main objective was to build an minimum viable product (MVP) that:

  • Addressed usability issues across key user flows
  • Incorporated core features and functionality from iOS
  • Ensured interactions were optimised for mobile

The Challenge

At the time, there was a need to both standardise and simplify the way users interacted with VR fashion show collections on mobile, and align it closer to the desktop/web experience.

‍

Note: a collection is essentially all the looks from a given fashion show and each look may have additional detailed shots too.

My Role

Responsible for evaluating key user flows, prototyping and conducting usability testing of the prototypes, and delivering high-fidelity wireframes accordingly.

Design Process

UX Audit

The main audience of VR is fashion professionals who primarily visit the website and app to get first access to the latest runway shows as well as past shows or content.

‍

To get a better understanding of how users could access and interact with the fashion show collections, I mapped out the user flows for all key tasks. In addition, after cross-checking the similar user flows on desktop it quickly became clear that there were inconsistencies that needed to be addressed.

Prototyping

Given that our users also visit other places to see fashion shows and related content, including Instagram, Pinterest, Youtube, BoF, WGSN, Tagwalk, and Vogue Business, we decided to test two relatively familiar types of image-led feeds. I created the following 2 prototypes:

‍

Concept A - where users swipe vertically to see looks in a collection, and swipe horizontally to see more detailed shots of a particular look.

‍

Concept B - Where users scroll vertically to discover more looks, and scroll horizontally to see more detailed shots.

Usability Testing

I drafted a usability testing plan outlining the research objectives, hypotheses, recruitment criteria and screener, as well as a the "interview" script including the set of questions and tasks for users to complete. Once reviewed and approved by the UX researcher, I launched an unmoderated usability study on usertesting.com and analysed 9 user sessions.

results

Research Findings

I presented back to the design team the following key insights that emerged from the usability study:

  1. Lack of clear affordances for navigating the fashion show collection feed, both in default and focus mode.
  2. Desire expressed for every look in the collection to have additional detailed shots, as well as the ability to zoom in.
  3. Overall preference for Concept B, as it felt more intuitive, with quick and easy access to more detailed shots of looks in a collection.

retro

Lessons Learned

Lesson 1

One of the things I learned during this project was to ensure that whenever UX copy is being tested as part of a design concept, that it aligns with the way the relevant tasks are written to minimise confusion among participants.

‍

Lesson 2

The other takeaway was related to the analysis of usability testing sessions, in which when note taking I should make clear distinction between observations and participant comments, all while keeping notes as brief as possible. This will make it easier to synthesise later on.

final designs