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
Horoscopes prototype 2. Landing page navigation
Horoscopes prototype 3. Cadence Anchor links
Example User flows. Horoscopes prototype 1-3.
Horoscopes Italy prototype
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