Vogue Horoscopes
UX/UI, Prototyping, Analytics
Vogue Horoscopes is an exceptionally popular subject for Vogue users in India and Japan. I was tasked with the responsibility of expanding this.
Design a scalable Vogue Horoscopes design solution for global online markets
• To be compatible across existing Global Vogue markets
• Scalable to Condé Nast portfolio; GQ, Glamour, Traveller, the New Yorker...
• Designed for the Condé Nast design system
• Unifies legacy external providers
• Align different user experiences across current online sites
The first stage of this project was to compile a detailed audit on the existing Vogue Horoscopes markets. Vogue has 5 markets with Horoscopes sections; Vogue India, Vogue Japan, Vogue Germany, Vogue France and Vogue Italy. Other Condé Nast brands and competitors were also analysed throughout this process.
A large volume of data was available to us from the existing Vogue markets. Analytics tools gave us in-depth insight into valuable user behaviour; specific areas of interest, most popular search terms, geographical engagement, device breakdown, scale and popular cadences. Further understanding was also gained from discussion with Audience development, Data analytics, and Taxonomy.
We gained a lot of insight into user behaviour from all the different markets, identifying commonalities, consistent weaknesses and typical user behaviour.
From this we could develop our design strategy.
• User flows of existing markets sketched and compared
• Wireframes tested to gain insight into the Horoscopes UI/UX
• Strategies discussed with Design systems, Engineering and Product design teams
A variety of responsive designs were tested & measured against the current design system and presented to stakeholders, engineering and design teams for discussion, improvements and iteration.
• Filters, Drop downs, Barrels filters, Toggle chips, List filters explored
• User journeys and page structure data from successful pages helped define and lead many of the initial wireframes. Stripping out weaknesses such as flawed combination filters and dated content (See prototypes below)
• Users use scrollable toggle chip to see their particular star
• Existing design affordance users are familiar with (especially on mobile)
• These toggle chips are anchor links which assist the user on reaching their goal quicker
• Space efficient taking up only 32px of vertical space
• Users are able to see the full content of the page if they scroll, the links act as an optional enhancement
Landing page for users to navigate to their individual stars. Each cadence for each star has its own page. Order of cadence aligns with preference seen from user behaviour data. This more simplistic option was offered to engineering teams to align with the complicated mix of markets.
Landing page for users to navigate to their individual stars. With a toggle chip anchor link to jump to cadence of users' choice.
Additional monthly tab added to the top of Vogue Italy's UI to enable users to reach the commerce component on Vogue Italy's monthly page.
• Users shouldn’t need a huge vocabulary of gestures to satisfy their needs
• Keeping gestures simple and straight forward make them easy to discover and learn
• Order of cadence aligns with user behaviour data
• Fulfils user & business need
• Aligns with the content of all 5 existing markets and beyond
• Scalable modular structure
The strategies are all designed on a modular level, with optional ad-ons to align / be compatible with existing markets