Condé Nast Traveler Booking Feature
Client: Condé Nast (Design Lab)
Industry: Travel
My Role: UX/UI Designer & Researcher
Conceptual feature work to existing website, Condé Nast Traveler
My Deliverables
I worked on the full UX/UI process from user and competitive research to full branding and design to prototyping and user testing.
User research - Information Architecture - Wireframing - Responsive Design - User Testing
The Challenge
I created a fictional personalized booking feature as an additional part to the already existing Condé Nast Traveler website. The project called to design an experience to include an informational landing page, a quiz that includes the option to share personal boards with saved articles and inspiration, and a dashboard to manage all booking information.
The Research
As Condé Nast Traveler was already a leading publication in it’s industry but completely new to custom travel itineraries and booking, it was important before beginning the design process to take a further look into the industry and their potential target demo with the following chosen approaches:
Competitor Analysis: still a relatively untapped industry with not many direct competitors, the research focused on sites that offered personalized travel itineraries and some booking features.
Competitors Main Strengths: Clean User Interface Design, Easy Navigation, Easy to Use Live Chat Feature, Comprehensive How it Works Sections, Reviews/Testimonials Included
Competitor Main Weaknesses: Sample Itineraries Too Complex, No Way to Share Saved Articles, No Way to Manage Bookings, Quizzes Done via Third Party Site, Lacking Location Options
User Interviews and Surveys: to learn more about consumers past experiences with booking travel and thoughts on how the process should look like online via both 1-1 interviews and surveys. There was a total of 18 people, 35-65 years old who all booked a trip within the last month.
Main Needs/Wants: Reviews, Boards to Save Articles & Inspiration, Comprehensive Starter Quiz, Live Chat, Clear Pricing Structure, Full Itineraries with Verifiable Details, Account Dashboard
Main Pain-points: Vague Pricing, Rigid Itineraries that Lack Full Detail, Too Many Separate Bookings to Track, Limited on Hotel & Flight Options, Limited on Location Options
After thorough research into both the competitor’s strengths and weaknesses as well as surveying and interviewing the target consumers, it was clear that the feature needed to include a comprehensive informational landing page with reviews, sample itineraries, and pricing structure, as well as a detailed starter quiz, live chat feature, and an account dashboard that gives one place to manage and modify the bookings. To take the research a step further and simplify the understanding of the consumer’s main needs, pain-points, and potential interactions, a persona, empathy map, and story board were created.
The UX
With user research culminating in the identification of the main persona, the focus then turned to the structure of the feature by identifying the high-level product requirements of the landing page, quiz, and account dashboard, as well as organize the information with a site map. Once the site’s structure was also put in place, the focus turned to the potential interactions by creating the task and user flows.
High Level Requirements 1 Current Homepage with updated main navigation including login and personalized travel booking 2 Current Homepage with Login pop-up with option to retrieve password or create an account 3 Personalized Booking About Page including description, reviews, pricing structure, and sample itineraries 4 Quiz Pages with detailed questions, moodboard selections, and price packages 5 Personalized Itinerary Options Page with three options at different pricing 6 Personalized Itinerary Page with full details on all housing, travel, and attractions and options to make a modification via sending an email or live chatting 7 Live Chat Page with form to submit requests 8 Finalize Booking Page with form to input necessary information for all guests 9 Confirmation Page with confirmation number and link to access account 10 Account Dashboard Page with options to view, modify, and share with others
The Prototyping
For this project, there were two stages of wireframes, a mid-fidelity used for usability testing and a higher-fidelity created with the existing brand’s UI that included the suggested updates from the testing feedback. Since there was an already existing UI, the content of the flows was the bigger emphasis in the testing. Using the mid-fidelity wireframes for the first prototype helped streamline the UX process by being able to complete the usability testing earlier in the process and create more finalized high-fidelity wireframes after.
The first round of wireframes were used to create a mid-fidelity prototype for the usability testing. To be able to make adjustments to the flow based on the participant feedback prior to adding in the final UI Design helped make a quicker, more streamlined approach. The prototype included a full flow including the homepage login, the informational landing page, the interactive quiz, the live chat to make adjustments, and the account dashboard with the share itinerary feature. Link to Prototype
Testing: The usability testing was done on 5 more people, both men and women between the age of 35-65. The main feedback was that the overall look and feel worked well with the existing Condé Nast Traveler website and the flow was easy to navigate and had the right information and content for a personalized booking app. The adjustments recommended were minor and included a better worded CTA button on the homepage for the new feature, an added bullet point on the starter package so users know they can upgrade from the free package to one of the paid ones, re-wording the quiz questions to be more conversational, making the quiz processes feel less lengthy by adding an indicator to where users are in the process as well as skip and save CTAs, color differentiators on the plane & hotel pages between yes/no CTAs and sliders, and adding imagery to the itinerary page
The UI
With feedback from the usability testing, a UI kit was created to showcase the existing branding from the Condé Nast Traveler website as well as any added elements from the new feature. Then adjustments were made to the flow wireframes and the UI Design was added to create a final high fidelity prototype. Link to Prototype.
The Next Steps
Any further steps would be to do another round of usability testing with the high fidelity prototype and make more adjustments if needed based on the feedback