Brief
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...
• Scalable to Condé Nast portfolio; GQ, Glamour, Traveller, the New Yorker...
• Designed for the Condé Nast design system
• Unifies legacy external providers
• Unifies legacy external providers
• Align different user experiences across current online sites
Audit
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.
Data
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, popular cadences. Further understanding was also gained from discussion with Audience development, Data analytics, and Taxonomy.
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, popular cadences. Further understanding was also gained from discussion with Audience development, Data analytics, and Taxonomy.
Design strategy
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...
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.
Design exploration
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).
Horoscopes prototype 1. Toggle chip navigation
● Users use scrollable toggle chip to see their particular star.
● An 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 enhancement: the user does not have to use them,..
Horoscopes prototype 2. Landing page navigation
Landing page for users to navigate to their individual stars. Each cadence for each star has it's own page. Order of cadence aligns with preference seen from user behaviour data. This more simplistic option offered to engineering teams to align with the complicated mix of markets.
Horoscopes prototype 3. Cadence Anchor links
Landing page for users to navigate to their individual stars. With a toggle chip anchor link to jump to cadence of users choice.
Example User flows. Horoscopes prototype 1-3.
User flows were iterated to suit both user and business needs. Ideas were presented to multi-function teams; Stakeholders, Engineering, Audience development, Editorial, Product as well as Global design teams for feedback, testing and improvements.
Horoscopes Italy prototype
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.
Design Checklist & conclusion
• 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
