Designing the Vogue Runway Android app

As part of the MVP launch, I designed the Vogue Runway Android app from scratch including core features such as Latest Shows feed, Search Capability, Gallery Experience, and Profile section.

Company: Vogue Runway

Length: 6 months

Completed: September 2021

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

Tools: Figma, ProtoPie, Usertesting.com

‍

Business Goal

Building an native Android app will enable Vogue Runway to:

Grow its app audience and international presence
Grow revenue
Re-affirm its position as the go-to fashion show destination across web, iOS and Android.

The Challenge

Designing the first in-house Android app, meant that all the core features from iOS needed to be adapted to meet the native behaviours that users are familiar with. At the same time, a number of usability issues needed to be addressed that required buy-in from both business and editorial stakeholders.

My Role

Redesigned all core features from iOS, created a robust component library, whilst making improvements to the overall UX and UI, that met both usability best practices and Android users’ expectations.

Design Process

UX Audit of iOS app

Identified a number of usability issues from the existing iOS Vogue Runway app, including the following:

As part a search query, users' typed text and suggested terms were not visually differentiated and hence easily scannable.
No search results were unhelpful, displaying a blank screen with no relevant copy or actions.
Two navbars reduced space available for content, and made key sections such as search and profile harder to access.

‍

Wire-flows

Following google material design, I created the respective UI components before putting together the screens for each of the core features. Then, for each key user flow, I created the corresponding wire-flows to evaluate the desired interaction and behaviour of the components across screens, whilst addressing the usability issues mentioned earlier.

High-fidelity wireframes, specs & component library

Applied our brand identity elements (colour, typography and iconography) to give the app the look and feel of Vogue Runway. Then. as part of engineering hand-off, I created specs for all screens and components including states, spacing, design tokens and anatomy.

results

Post launch metrics

The Vogue Runway Android app was officially launched on September 1st, 2021 across the globe in 177 countries.

‍

It is the first in-house native Android app across the organisation, and will further help establish Vogue Runway's position as the market leading destination for fashion show consumption across web and mobile platforms.

retro

Lesson Learned

Lesson 1

This project taught me the importance of communicating and documenting clear design feedback for the developers to review and implement it into the next build. This could be in the form of written feedback, visuals and even prototypes if necessary, to avoid as much confusion as possible.

‍

Lesson 2

Launching an app is a truly cross-disciplinary effort that requires close collaboration between product, data, engineering, editorial, and marketing. As such, things such as not having enough transparency over app metrics or delayed promotional campaigns, could be improved through clear project planning, where each stakeholder is appropriately involved and updated from the start.