• Save
Site Redesign: When Hell Freezes Over Use a Blowtorch
Upcoming SlideShare
Loading in...5

Site Redesign: When Hell Freezes Over Use a Blowtorch



Hotwire is a data-driven company: all projects have to have clear financial return; all customer interactions - purchase, quote, drop-off and click rates - are closely tracked. As a result, there was ...

Hotwire is a data-driven company: all projects have to have clear financial return; all customer interactions - purchase, quote, drop-off and click rates - are closely tracked. As a result, there was never enough support from the numbers alone to complete a redesign since Hotwire’s launch. So, when hell freezes over… use a blowtorch.

Based on my experience driving the first successful Site Redesign at Hotwire, I will share strategies and tactics to:
* Sell your large-scale UX project, gaining support from executives and approval to
augment UX and Engineering staff to resource the effort.
* Make your project happen by creatively distributing the work, all while showcasing UX
leadership and maintaining momentum toward completion.
* Demonstrate UX successes and build equity within the organization for future work.

I will also share lessons from successes, failures and pain at Hotwire to help guide those embarking on a large-scale UX project.

This presentation will not simply be a user experience case study of the Hotwire redesign, but rather will focus on strategies to successfully use your project to position the UX team and manage the organization from start to finish.



Total Views
Views on SlideShare
Embed Views



6 Embeds 36

http://dataoven.x-y.net 13
http://www.linkedin.com 11
http://www.slideshare.net 5
https://www.linkedin.com 5
http://www.lmodules.com 1
http://www.e-presentations.us 1


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Background <br /> Welcome to “Site Redesign: When hell freezes over use a blowtorch” <br /> My name is Melissa Matross <br /> Head up User Experience at Hotwire <br /> We’re just finishing out a Site Redesign <br /> This talk is about the organizational sides of running a large scale UX project – how to get buy in, manage the project, demonstrate successes and things to look out for... <br />
  • Hotwire is a data-driven company: <br /> all projects have to have clear financial return; <br /> therefore it can be very difficult to get buy in on solely a UX focused project. <br /> <br /> <br /> <br /> <br />
  • Executive commitment <br /> Resources <br /> A better site!! <br />
  • Pick your guinea pig: <br /> A project came up that was going to significantly impact our Flight Search Results page <br /> The page was significant in number of page views, but low impact to the site from a financial perspective <br /> It was 1 page only <br /> <br />
  • <br /> Find an advocate: <br /> My boss – the VP of Product, supported the experimentation. <br /> I needed to approve all work for the guinea pig by him, but he allowed us to experiment and helped convince other execs when we went live. <br /> <br />
  • <br /> Break YOUR rules: <br /> We didn’t have a clear style guide, but we COMPLETELY changed the look and feel, breaking any rules that we may have had <br /> <br />
  • <br /> Take the time & Get it right: <br /> This is what is going to be the example that you use to apply to the rest of the site. <br /> You will use this design to convince others that you need to redesign the site. <br /> Shop it around – after launch (especially if you have financials to back it up!) <br />
  • <br />
  • <br />
  • <br /> Talk about the mess you have today (current state) and WHY <br /> Areas for improvement <br /> Inconsistency : resulting in a “patchy” look and feel <br /> Not scalable : requiring in major work to add new features <br /> Brand is not clearly communicated <br /> Technology and look and feel not current <br /> Talk about WHY this is the case: <br /> Drivers: <br /> Lack of communication of updates and changes between departments <br /> Lack of education (brand, style guide, standards) and enforcement <br /> Time between updates (things change) <br /> Lack of ownership of the pages (hosted by vendors) <br /> Lack of resources for updates <br /> Give a relevant evaluations/statistics that execs care about <br /> According to the 2007 JD Power study, Independent Travel Websites received the lowest marks for appearance/design <br />
  • Opportunities <br /> JD Power awards <br /> Improved Branding <br /> Site will become more consistent and branded, leading to an improved brand perception and increased user trust <br /> Increased User Loyalty and Trust <br /> Improved user retention: More visits from existing users whose needs are better satisfied <br /> Greater credibility <br /> Faster Time to Market and Better Knowledge Management <br /> Improved CM <br /> Reduction in page drop-off (and hopefully a better quote rate) from a more consistent design <br /> Navigation to features that help save consumers money, resulting a better PR and improved word of mouth <br /> SEO improvements <br />
  • GOALs & Vision <br /> This is an area that you have to be really focused and clear on <br /> It may take a lot of time or revisions – but that’s ok <br /> Don’t be general - Be specific: <br /> I initially said that our “vision” was to be Useful, Usable and Desirable. How is that different than any other site?? <br /> Our goals for the project were to be: Branded, Simple, Consistent and Efficient <br /> Use their language. <br /> I incorporated marketing’s branding terms into our vision for the site. <br /> GET AGREEMENT on the goals <br /> Talk about infrastructure improvements in your goals. <br /> Efficiencies gained – explain how you are improving infrastructure generating time savings <br /> Be willing to let some stuff go <br /> For me, as sad as it is – I let go of persona development (since we have strong customer segmentation and lots of user research knowledge within the team) <br />
  • Be prepared. Have a plan. <br /> This means: <br /> Assess the nature of the redesign: navigational overhaul? Interaction design changes? Look and feel update? Both? <br /> How are you going to plan out the work – phased or all at once? Why? <br /> What are the benefits of each approach? <br /> <br /> Take into account resources – what do you want? <br /> How much time do you need to do the work? What are your targets? <br /> I came prepared with Developer costs both contract and offshore and UX contractor costs <br />
  • While many companies redesign in one phase, Hotwire should not: <br /> Typical redesigns require that all work be done at once - this will lead to significant workload on both the UX and Engineering teams <br /> Due to our small teams, we would likely need to use outside agencies <br /> Outside agencies require a significant increase in workload of Business Owners to review work <br /> All the work at one time requires more significant risk in QA and launch support <br /> <br /> Hotwire has tried the “typical” redesign in the past and it has been unsuccessful for the following reasons: <br /> There was not a lot of buy in at the executive level <br /> There was not a lot of collaboration between departments <br /> The redesign was done by an outside agency (without a full steering committee) and was not in line with the business goals or brand direction <br /> It required a significant investment from Engineering, and Engineering was not informed for the planning of it <br />
  • <br />
  • Attack and launch the redesign in phases <br /> This will allow us to get pieces of the new design on the site more quickly <br /> The improved experience will be on the site earlier <br /> Project work will be more evenly distributed (rather than the entire redesign with one launch) <br /> We have the opportunity to learn from early launched projects and correct for other parts of the site <br /> Will not require a significant temporary staffing for redesign push <br /> <br /> Organizational development will run in parallel to direct site work <br /> Effective development of research and standards will allow us to be more effective on future projects <br /> User Research and segmentation documentation will run concurrently with project work (separate resources) <br /> Deliverables and standards will be defined as part of each project <br /> For example: After each Interaction Design phase is completed, the Inventory and Template Guidelines document will be updated <br />
  • <br /> Disjointed user experience during redesign process <br /> As a result of launching sections of the site at different times, the site will not have a consistent user experience while in transition <br /> <br /> Increased design and development complexity during redesign process <br /> During a phased redesign we would likely face more extensive design challenges and duplicate work due to the two different designs <br /> Communication around standards development is critical to it’s success – by running it concurrent with projects there is risk that items will fall through the cracks <br /> Car Details & Local Car <br /> <br /> Rework <br /> We will need to apply extra effort on projects that are complete to keep consistent with current project learnings <br /> <br /> Timelines <br /> There is a risk of rushing the redesign resulting in frustration, overwork and lower quality deliverables; also, a risk of letting things lag and losing momentum <br /> <br />
  • <br />
  • Depending on the size of the site and team, a phased redesign can take up to a year or longer. <br /> A lot of factors can get in the way of completion: <br /> loss of momentum, <br /> conflicting priorities, <br /> resource constraints, to name a few. <br />
  • Site Refresh <br /> Updates are only to the look and feel of the page without changes to functionality or architecture <br /> There may be changes to page level interactions and behaviors <br /> <br /> Site Redesign <br /> Updates to the look and feel of the page with changes to features, functionality and architecture <br /> Fundamental architecture changes would be investigated and carefully considered <br /> On a smaller scale with a Site Redesign, we would consider: <br /> Re-architecting sections to streamline the experience <br /> Identifying and planning for new features that may be added <br /> Removing pages or sections <br /> We did both.       <br /> <br />
  • The goal of the Site Redesign Queue is to provide steady resources dedicated to most of the Site Redesign projects. A certain percentage of resources will be dedicated to the constant stream of work and will be handled separate from the standard Project Prioritization list. This will allow us to use our resources more efficiently by rolling from one Site Redesign initiative to the next, and will allow us to complete the Site Redesign efforts according the redesign goals (targeted completion is approximately a year from July). <br /> <br /> Site Redesign Queue (SRQ): Smaller areas of work that do not provide immediate benefit from a functionality or architecture overhaul, do not allow for significant functionality changes or version testing <br /> Lighter-weight efficient process as a result of the smaller scope: <br /> Business Partner fills out a Requirements doc (heavy-weight Creative Brief) <br /> Functional design consults (in some cases provides a lightweight doc) <br /> Engineering & QA work is done by a GSI team <br /> Managed by a producer <br /> <br /> Projects : Larger scale areas of work that Identify areas of significant benefit from or in need of new functionality <br /> To date, examples include: Billing, Confirmation, Homepage <br /> Planned for My Account & Help, but due to conflicts we scaled it back and moved it into the queue – we’ll address new functional pieces later <br />
  • The goal of the Site Redesign Queue is to provide steady resources dedicated to most of the Site Redesign projects. A certain percentage of resources will be dedicated to the constant stream of work and will be handled separate from the standard Project Prioritization list. This will allow us to use our resources more efficiently by rolling from one Site Redesign initiative to the next, and will allow us to complete the Site Redesign efforts according the redesign goals (targeted completion is approximately a year from July). <br /> <br /> Resource allocation: <br /> UX <br /> Offsite team for Eng <br /> Producer <br />
  • With every Site Redesign project/effort, we are documenting and developing standards for the site <br /> <br /> Less UX project development time: <br /> Interaction Design: borrow from standards to get started with WFs, less research/discovery of instances <br /> Visual Design: fewer comps & annotations, reference standards <br /> Potential Engineering advantages: <br /> Front end development: May save time if leverage component based framework; similar code snippets or standards can be used <br /> QA: Less unique instances may lead to less QA time <br /> Could some small projects become enhancements as a result? <br /> Risk mitigation: <br /> Knowledge of states: <br /> There have been instances in the past where knowledge of functionality has not been documented – as a result we have lost functionality over the course of minor updates <br /> Example: Code share states on flight updates <br /> <br /> Design Errors: <br /> The more standardized we become, the less errors and bugs should exist <br /> Fewer templates and variations will exist <br />
  • Find ways to involve others demonstrate cross departmental leadership, gain support, visibility and to cover your ass when things go wrong. <br /> <br /> Business Partners <br /> For queue efforts: business partner is critically involved as key stakeholder <br /> Lightweight requirements document <br /> Attends all review meetings <br /> <br /> Site Redesign Committee <br /> Cross functional committee including Creative Director for online advertising, merchandising, front end architect, marketing <br /> meets 1-2 times per month <br /> Goals of the committee: <br /> Ensure cooperation and collaboration between teams <br /> Serve as department representatives <br /> Ensure that all teams are aware of redesign decisions <br /> Provide a forum for review and decision making for cross functional items <br /> Discuss and develop common point of view on everything from CMS to Flash <br /> <br /> <br />
  • Frequent updates: <br /> Let people know when stuff is coming <br /> This helps maintain momentum <br /> <br /> Executive updates: <br /> After each release, let the execs know. Talk about: <br /> Wins & successes early and often. <br /> Progress <br /> What’s next <br /> Who is involved? <br /> Re-iterate goals repeatedly <br /> Talk about standards efficiency <br />
  • <br />
  • JD Power awards <br /> <br /> Recognized in a book <br />
  • <br />
  • Opinionlab also has numerical ratings that we can benchmark against over time. <br />
  • Quantitative: <br /> Omniture <br /> PR/Conversion lift <br /> Drop-off decrease <br /> Bug fixes <br /> Customer Care call decrease <br />
  • <br />
  • <br />
  • The impact: <br /> Drop-off: No clear change <br />
  • <br />
  • <br />
  • Standards <br /> SRQ:SRQ has been successfully tested process and could provide longer term value to the organization <br />
  • <br />
  • My Account <br /> Help <br /> Be flexible! <br />
  • Purchase Rate: Overall BREAKEVEN <br /> <br /> Learnings from new page: <br /> Unexpected sensitivity on Hotel Details– in the future, we will test any changes to the hotel path <br /> For investigation: Is there a difference in response based on customer segment (HFC vs. other repeat vs. new)? <br /> For investigation: Should Air Details now have a ‘Continue’ button above the fold? <br />
  • <br />

Site Redesign: When Hell Freezes Over Use a Blowtorch Site Redesign: When Hell Freezes Over Use a Blowtorch Presentation Transcript

  • GOALS Executive commitment Resources A better site!!
  • ROGUE TACTICS Break YOUR rules
  • ROGUE TACTICS Get it right
  • FORMAL PROPOSAL Goals & Vision
  • FORMAL PROPOSAL Be prepared. Have a plan.
  • Typical Redesign
  • OUR PLAN “It’s going to take a little getting used to... but I think we should consider the idea of a major relaunch completely dead.” --Jared Spool, “The Quiet Death of the Major Re-launch”
  • Phased Approach
  • RECAP Don’t be afraid to engage in ROGUE TACTICS In your FORMAL PROPOSAL, talk about: Current state Opportunity Goals & Vision Your plan Risks BE REALISTIC!
  • MAKE IT HAPPEN Refresh vs. Redesign
  • MAKE IT HAPPEN Site Redesign Queue & Projects
  • MAKE IT HAPPEN Resource allocations Resource Team Resource Estimate Additional Notes/Exceptions Functional Design ½ person/month UX – Visual Design ½ person/month Additional resources required UX - Copy ½ person/month Contract resources required Dependent on new hire (contract if hire not UX – Interaction Design 1 ¼ persons/month available) SWE – Software Engineer ½ person/month Likely GSI – need to have local for SWE – Web dev 1 1/3 persons/month phase 5 Likely GSI – need to have local for QA ½ person/month phase 5 Customer Care 1 MM for Queue duration PM YES
  • MAKE IT HAPPEN Standards Goals Benefits Improve consistency Time savings Increase efficiency Risk mitigation Improve maintenance Reference guide Create documentation Continuity between library channels
  • DEMONSTRATE SUCCESS Qualitative & Quantitative Benchmarking
  • DEMONSTRATE SUCCESS “Overall, I am very impressed with Hotwire`s web design. The side columns indicating rates from nearby airports helped me find the flight I booked today. As an IT guy, I have to say congratulations to your Web Design team on this User-Friendly site! As a veteran of several major software projects, I can see it`s obvious your team is logical and efficient in their designs…” --Hotwire user, OpinionLab 12.14.08 “The navigation and minimal prompts are very convenient. Hotwire has the best site overall. Very user friendly.” --Hotwire user (GMH), OpinionLab 1.6.09--Jared Spool, “The Quiet Death of the Major Re-launch”
  • DEMONSTRATE SUCCESS Quantitative Measures Purchase Rate & Conversion lift Drop-off decrease Bug fixes Customer Care call decrease Opinionlab ratings
  • DEMONSTRATE SUCCESS Talk about goals & business Things that would not have been possible otherwise
  • Billing   Old New
  • The impact BRANDED SIMPLE • Chunked billing info into an easy step-by-step process of digestible modules • Reduced length of checkout process by removing Traveler Info/Login page • Improved contextual help/error messaging to better help the user prevent/recover from errors CONSISTENT EFFICIENT • Gave users the ability to add/edit info on page via layers • Fixed over 30 bugs • New modular layout more prominently displays value-adding features such as Trip Protection & CDW • Layout enabled addition of CDW in much less time Learnings from new page: • Due to stepped approach, help & error messaging improvements, we are now able to investigate: • Stepped approach also allows for segment specific process • Layer by layer drop-off • Possible shortcuts for HFCs (for ex: add-ons) • Specific Error instances and solves New
  • DEMONSTRATE SUCCESS Infrastructure improvements
  • WHEN THINGS GO WRONG Project deprioritization
  • Sometimes small changes have big impacts Old New
  • QUESTIONS? Thank you! Melissa Matross mmatross@hotwire.com