Background
We aimed to build and release the MVP for the Readers’ Choice Awards 2022 (USA) bundle page. To do that, We considered some relevant aspects from a commercial, product, and User experience standpoint lacking from the previous experience and satisfied the user needs. This process involved the discovery and contribution of a massive Design system with design Tokens and the research and execution of different AI tools to automate some processes.
The Challenge
We wanted to understand the user motivations and goals for the bundle page. At the same time, the business aimed to introduce new product cards with the ability to bookmark venues and set up key KPIs to move. CMS (Copilot) managed the content. So, ultimately, We had to balance the user needs and short and long-term vision of the bundle page from a product and commercial perspective.
Role
Lead Product Designer.
I led the Reader's Choice Awards 2022 Epic bundle page, and the Venue product cards from a UX strategy (tactic and strategic) and product design standpoint. I led the whole cycle from the discovery to the delivery phase to understand the users' motivations for this bundle page. Enhancing user engagement, retention and optimisation.
• Product Designer
• User Experience (UX) Designer
• Interaction (IxD) Designer
• User Interface (UI) Designer
• Visual Designer
Deliverables
• UX strategy
• Empathy map
• Analysis 2022 RCAs Bundle Page
• Audit 2022 RCAs Bundle Page
• Card Sorting categories
• Card Sorting content product card
• Survey user motivations on-site
• New product cards across site
• New components of the Design system
• Design Tokens
• Wireframes
• Prototype
• New RCAs bundle page
• A/B test
• Documentation
Tools
Figma, Miro AI, Hotjar, Optimizely, Usertesting.com, Typeform, ChatGPT, Jira.
My Impact
Overview of performance and learnings for the CNT RCAs Tentpole. Tuesday 4 October - Tuesday 18 October
• Strong engagement across all RCA content with Time Spent +47% YoY
• Driven heavily by traffic increase in Social +34% YoY and Email +67% YoY
• Very positive Commission growth YoY, due in large part to Expedia, +166% Overall Commission Revenue at a value of $56,145
• New RCAs Landing Page provided +19% YoY UVs and +62% YoY Time Spent
| 2022 | 2021 | |
|---|---|---|
| Book now clicks | 237 | 223 |
| View All Winner’ clicks | 10760 | 8,843 |
| Clicks to articles/galleries | 33,612 | 20,010 |
| 2022 | 2021 | |
|---|---|---|
| Bookmark clicks - Not Signed In | 37 | (No bookmark CTA in 2021) |
| Bookmark clicks - Signed In | 25 | (No bookmark CTA in 2021) |
| Total Bookmark clicks | 62 | (No bookmark CTA in 2021) |
Final UI
Overall, the new RCAs Bundle page and new Product cards are aligned with “Verso” Design System and Design Tokens and precisely with CNT Brand Identity. We have added a new CNT product card in the storybook and the whole content has been built in copilot CMS.
#UX Strategy
I collaborated with the Product Manager and Tech Lead to define and align the UX strategy for the MVP. The Business team, including the Project Manager and Product Director, set the business goals. The UX strategy was crafted to acquire new users, gather leads, and promote retention by engaging existing users, showcasing content, and promoting loyalty. Interviews in 2021 guided us to create an empathy map and set the user goals for 2022. With the UX strategy for the RCA's bundle page established, we created a detailed plan. The product team and I outlined the UX initiatives to achieve our goals, enabling us to assess our current position, define a five-month plan, and outline a long-term vision for 2023. The plan required ongoing review with the PM and flexibility in actions to achieve the OKRs.
Dependencies:
• Existing / reuse capabilities - Copilot component for countdown clock
• Campaigns are planned for the different tentpoles in the Allure universe - Best of Beauty Awards (Explore, from an engineering and design standpoint, what we can reuse.)
#Empathise
Analysis old bundle page: I analysed the bundle page; just from a UX standpoint, I didn’t have any information or insights about the users, just pure analysis.
Hotjar insights: I had some behaviour analytics data to help me empathise and understand our users; in summary, the users barely reached the second half of the landing page when they started to scroll. There was so much content to digest, and the bundle header image took up so much space; in terms of the engagement zone, the users didn’t follow a concrete pattern due to the lousy grouping and poor experience from a content arrangement standpoint. In mobile viewport, it was even worse.
Empathy map using AI: We had relevant user insights from user interviews from the 2021 bundle page, an example of how We could speed up this process is laveraging ChatGPT to create an empathy map, and prompt…
Miro AI assist: After automating the empathy map using Chat GPT (and ensuring its accuracy through a review process), we can then copy and paste it into AI Miro to aid in the automated generation of sticky notes for the empathy map and prompt…”Can you generate sticky notes keeping the same structure?”
Audit categories RCAs Bundle page : I conducted an audit of the bundle page, examining the number of categories, flows, and variations. The goal was to understand what went wrong in the previous years, identify potential changes, and start to devise ideas based on this information.
User flow analysis: The user's journey is currently disjointed. After showing interest in a winner, they can navigate to various pages, disrupting the user experience and potentially leading to drop-offs. We should optimise the flow to keep users within the funnel and avoid directing them to irrelevant pages. I collaborated with the editorial team to propose this change.
Data from 2021: This data, focusing on pages UVs and Revenue, should be interpreted cautiously due to a lack of testing and analysis in the previous year. To address this, let's conduct a card sorting experiment to identify crucial categories, align with business objectives, and explore commercial and editorial implications.
Card Sorting Hierarchy of the Categories: I conducted a card sorting test on usertesting.com to determine which categories were more significant to the users and to strike a balance with the commercial goals for this page.
Card Sorting filters and content Product Cards: I conducted a card sorting experiment to identify essential product card information and optimal order. Despite missing post-MVP APIs like live pricing and rating, I considered adding them for a more comprehensive and accurate test to avoid repetition. Additionally, I conducted 'filter' card sorting to understand user motivations in accommodation filtering due to low survey traffic, potentially caused by a lack of incentives, since proper setup of timing, survey length, and technical issues.
Survey filters and user motivations: The business aimed to comprehend user motivations while on the site. It sought to identify the most useful filters for users when refining search results. The findings will be implemented in 2023 when We have APIs filters in place.
#Define
User: Global audience and Condé Nast Traveler user exploring Readers’ choice Awards.
Needs: Navigate across categories, explore the best 2022 “Categories” and “save” and book a venue.
Insights: The users were frustrated with the bundle page's arrangement and access to the content.
#Ideate
We had relevant data and results from all the research phase. As the release strategy involved launching the product cards first, followed by the RCA bundle page, I began designing the new product cards.
Product Card: Let’s analyse what We have in the current Product Card
Let’s narrow down what we need for the new product cards, MVP content, and current new APIs available.
The Design System team developed a Figma plugin called 'Swap BI.' With this tool, all the agnostic and brandless components switched to the selected BI, causing the Type tokens and colour tokens to also change accordingly.
So, how does it work the CNT Brand Identity ?and how does that connect to the “Verso” Design System?
From a colour perspective, each swatch in the palette has a Colour ID, Value, and Variable. To modify the Colour token, simply adjust the value, and it will automatically update the corresponding colour token. This change is specific to the CNT brand, as the token reference remains consistent across all brands (Vanity Fair, The New Yorker, Vogue, GQ, etc...). Understanding the role of each token is crucial when applying Color tokens.
The same goes for the Type Tokens. If You update the brand font, the Type Token will be updated automatically for the CNT Brand.
I started designing the new product cards, considering factors like research-based content, orientation, variations, carousel inclusion, accessibility, and impact on endpoints. Regarding accessibility, all the components, tokens and styles complied with WCAG 2.1 Level AA. I created a local library for CNT (Condé Nast Traveler) cards, a variation of the main brandless ones, and then added them to the storybook.
Bundle page RCAs 2022: After We released the product cards across the site, I started to create the bundle page. The data indicated that 80% of the traffic for CNT comes from mobile devices. So, mobile first approach, I began outlining the architecture for the bundle page and initial thoughts.
Content Strategy and SEO optimisation: I teamed up with the UX copywriter to strengthen brand loyalty, attract global audience, and establish RCAs as a go-to source for travel inspiration and information. Our content was strategically tailored to resonate with travel enthusiasts and readers of Condé Nast Traveler. To increase organic traffic we worked on Identify the right keywords, create relevant content, optimise page titles and descriptions, use internal links (PDP link, Best of, articles…) and optimise images.
I started the process with low-fidelity wireframes to gather initial feedback from key stakeholders and the product team.
-
• "The Editors Verdict" is not part of Condé Nast Traveler, so We won't have that.
• "Browse" what? We need to be content-specific.
• "Browse all Winners" deserves to be more prominent.
• Visual in-page component from Allure works here, anchor link to each category, let's reuse it.
• The CNT product cards don't have the slider at the bottom.
• From a navigation and experience perspective, it makes sense.
Iteration 1
-
• Since we are using the “Bundle Header” component across different parts of the site, let’s reuse the same to maintain consistency.
• We need an intro to contextualise the user, and at the same time, it will be much better for SEO optimisation.
• “View all Winners” instead of “View all”.
• No need to have the ability to filter the articles by location, We don't have this component built-in Verso Design System, so let's keep it simple.
• It’s worth building a new component allowing users to visit the article page. Having a Header and description is excellent for SEO purposes, but let’s keep just the Header; the description on each article in this small place can be irrelevant in many cases.
Iteration 2
-
• Let’s add the disclaimer.
• Let’s change the intro for RCAs, let’s create relevant content.
• We need to see how they look the categories with no affiliate CTA.
• Let’s place the product cards component carousel.
• We need a title for the anchor link component “Explore by Category”.
• Better to say…The Best “Name of Category” in the world.
Iteration 3
So, here are the components We use from the Design system. We had a Core library with all the aspect ratios, Grid, Spacing Base-8, and assets. So, We had these components below to start to create the Bundle page, We reuse the visual in-page navigation from the Allure brand, and the product cards We had already built.
Copilot CMS: Apart from managing Content creation, including text, images, videos, and more… We added the Event banner “Countdown Clock” that We used in different brands to drive anticipation, awareness, and excitement before RCA content launch.
So, what is the ultimate outcome? Following the results of the card sorting and the careful consideration of business, editorial, and commercial priorities, the sequence of categories is as follows: Hotels, Resorts, Spa Resorts, Your Year in Travel, Cruise Lines, Countries, Cities, Trains, Airlines and Airports, Islands, and Ski Resorts.
#Prototype
User Interaction and performance: When designing the new Product cards, I prioritized a simplified and responsive mobile layout, considering the carousel's performance on small devices. I ensured an intuitive navigation experience, adaptability to different screens, and touch-friendly elements, especially with a potential in-page navigation at the top.
Documentation for the MVP: I supplied the bundle page, visual in-page and visual link banner components documentation. Apart from that, I had design review sessions and QA designs with engineers.
A/B test: While the RCAs bundle page is designed to be inspirational and exploratory, we observed a low click rate on 'Bookmark' CTA. As a solution, I suggested conducting an A/B test on the 'Bookmark' icon to assess its potential impact on conversion rates.
Strategic Vision for 2023
Initially, we crafted a UX roadmap for the next 5 months (MVP) tactical and the future (2023) strategic, mapping out features for consideration. We will determine the goals for the post-MVP in Q1 2023. They will be based on the insights gained from user feedback, market analysis, and the performance of the initial product release. I presented a prototype approach, pointing out the features and the E2E flow. The board approved this approach.
Lessons Learned
The key lesson from this project is the importance of testing. Although we built the bundle page based on solid research, the absence of real user testing before launch was a missed opportunity. Despite not reinventing the wheel from the previous year's Readers Choice Awards, the new experience proved intuitive and achieved both business and user goals, particularly in revenue. Nonetheless, testing with real users before launch would have been preferable. But, adaptability to timing and resources remains crucial when you are part of the business. The plans for the post-MVP and the A/B test were paused as a result of the business reorganisation and harmonisation for 2023.