{"id":14745,"date":"2016-08-11T14:10:59","date_gmt":"2016-08-11T21:10:59","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=14745"},"modified":"2021-09-20T22:32:43","modified_gmt":"2021-09-21T05:32:43","slug":"ux-case-study-hubspot-redesigned-homepage","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/ux-case-study-hubspot-redesigned-homepage\/","title":{"rendered":"UX Case Study: How Hubspot Redesigned Their Homepage"},"content":{"rendered":"
HubSpot<\/a>\u2019s home page is visited by more than 4 million users per month, serving 18,000+ companies across 90+ countries.<\/p>\n Their home page is the lynchpin for the company\u2019s entire online ecosystem. So when the company grew massively from a private company to a multi-product, public global organization, a homepage redesign was in order.<\/p>\n And it needed to happen quickly, in time for a grand release of a whole new product line at HubSpot\u2019s annual industry event, INBOUND, just 1.5 months from the project kickoff.<\/p>\n UX Designer Austin Knight<\/a> led the project, supported by a team of three (visual designer, developer and marketing manager). Outside the immediate team, Knight also worked with six others for product positioning, copywriting, and technical development.<\/p>\n This is the story of how a designer applied the focused research, collaboration and unwavering customer focus of Lean UX<\/a> to deliver bottom-line results on a tight schedule.<\/p>\n <\/p>\n Photo credit: HubSpot<\/a>\u2019s redesigned homepage<\/p>\n The following is an excerpt from <\/em>The Project Guide to Enterprise Product Design<\/em><\/a>. The free guide explains best practices based on real projects. <\/em><\/p>\n The HubSpot project began right when Knight was introducing the more iterative, Lean UX approach to his team. Created by Jeff Gothelf<\/a>, Lean UX aligns business strategy with lightweight design process through constant \u201clearning loops\u201d (build \u2013 measure \u2013 learn).<\/p>\n In this case, the first step of this work was to dive into analytics and user research to quickly validate assumptions.<\/p>\n Unlike some processes where a marketing analyst might provide the design team with web data insights, Knight dove right into the data himself. Massive amounts of data were available in HubSpot, Google Analytics and Mixpanel. The main challenge was sorting through the data to reveal meaningful patterns.<\/p>\n <\/p>\n Knight discovered a significant number of users exhibited the following behaviors:<\/p>\n It was clear that, despite being in-depth, the home page lacked critical information that decreased conversion.<\/p>\n Knight also examined heat maps<\/a> and scroll maps conducted with 25,000 users each, supplying 467,308 unique data points. Ranging from several years back to the present time, the maps helped Knight further understand where disengagement was happening, including discovering that only 25 percent of users would scroll on the homepage.<\/p>\n <\/p>\n Finally, user session recordings acted as hybrid quantitative\/qualitative research.<\/p>\n Since the recordings were live, anonymous, and undetected, the results were fairly reliable since they represented user behavior in a natural environment.<\/p>\n Session recordings ran continuously throughout the whole design project, providing a stream of data to validate user interviews and usability tests.<\/p>\n <\/p>\n While quantitative research helps you see the \u201cwhat\u201d, it doesn\u2019t always reveal the \u201cwhy\u201d. To dive into motivations behind behavior and UX requirements, designers need to interview users and stakeholders.<\/p>\n 1. Customer Interviews <\/strong><\/p>\n Because 10% of the HubSpot homepage traffic consisted of HubSpot customers logging in or searching for resources, the redesign could not neglect such a valuable user group.<\/p>\n Knight interviewed customers not just to validate the other sources of data, but also as a basis for determining how the new homepage could deliver dynamic content to specific segments.<\/p>\n By developing a rigorous user interview<\/a> process and tying questions to outcomes, he gathered highly focused feedback.<\/p>\n 2. Stakeholder Interviews<\/strong><\/p>\n Since this project would literally change the digital face of HubSpot, Knight also interviewed executive leadership and product, marketing, sales, and customer support teams.<\/p>\n He then cross-referenced the results with feedback from user interviews, support call transcripts, unsolicited HubSpot redesigns<\/a>, tweets, emails, and even conversations that Knight had with attendees at his own speaking events.<\/p>\n <\/p>\n \u201cData-inspired, human-centered design \u2013 that\u2019s what we do,\u201d Knight said. \u201cDesigners need to interpret data on their own and objectively justify their design decisions whenever possible. We work in an industry where designers are becoming increasingly empowered by quantitative and qualitative data. As such, we generally don\u2019t make decisions based on opinion or what someone \u2018likes\u2019. There has to be more to it. The true magic of today\u2019s designer is in how they can interpret implicit and explicit data, and thoughtfully transform that information into design solutions.\u201d<\/p>\n Finally, based on all the initial research, Knight was soon able to quickly design a few incremental changes for validation with multivariate tests.<\/p>\n The tests helped qualify or disqualify specific design elements, which would then influence the entire team\u2019s strategic decisions as they moved to the full homepage redesign.<\/p>\n <\/p>\n As explained in The Project Guide to Enterprise Product Design<\/a>, Knight followed a structured process of \u201cstarting broad, testing, learning, iterating, and narrowing in on the optimal solution with each round\u201d.<\/p>\n Once the team decided on three major variations, they created lo-fi prototypes<\/a> and added fidelity as needed to present to stakeholders for feedback. Once a major direction was selected, Knight remained in the lo-fi stage for multiple iterations before moving on to visual design.<\/p>\n In fact, the lo-fi prototypes bear a striking resemblance to the final product, given all the time spent gathering feedback and direction from users at this critical juncture.<\/p>\n <\/p>\n \u201cWe tested with users throughout, from testing paper prototypes to working with our wireframes and on to visual design,\u201d Knight said. \u201cThe voice of the customer was present throughout the process. As a designer, this extra voice in your ear is critical. It doesn\u2019t make all the decisions for you, but it helps you find your direction.\u201d<\/p>\n During the visual design stage, Knight worked closely with his visual designer.<\/p>\n It\u2019s also important to note that Knight was already discussing the design with his developer at each step of the process. While they wouldn\u2019t begin coding extensively until the hi-fi prototyping, they all worked on interactions throughout, ensuring the entire team was on the same page.<\/p>\n The team created a modern aesthetic with bold colors, HD imagery, and an atypical grid structure. This grid structure was inspired by the need for the new homepage to represent a \u201cliving design\u201d. The grid-based, modular structure scales well across devices, content could be easily changed or moved and key sections could be updated with content inspired by stakeholder and user suggestions.<\/p>\n <\/p>\n Another interesting element of the atypical grid structure was the photo framing.<\/p>\n The team took a very unique set of photos intended to fit perfectly into the structure, allowing the off-hover state to show an out-of-focus section of a photo that would expand out into the right grid element on-hover, revealing the full photo and additional information.<\/p>\n The photo treatment became a distinctive design element and interaction that greatly increased user engagement. The team also developed dynamic content personalized to the user, which was revealed as a major opportunity in early customer interviews.<\/p>\n Finally, since 16% of HubSpot users access the site via mobile and more than 19% of the U.S. population has specific accessibility needs, compatibility and accessibility elements were critical to the design and accounted for in every step of the process, including the code.<\/p>\n <\/p>\n As with all other aspects of the project, the mobile and desktop versions were iterated on together on a parallel path.<\/p>\n The next step was building a clean code, using the company\u2019s own CMS.<\/p>\n Knight, his visual designer, and his developer worked hand-in-hand to ensure the code was compatible across all devices, QA testing their prototypes on a regular basis.<\/p>\n <\/p>\n The team tested the site across devices and resolutions in multiple versions of Chrome, Safari, Firefox, Internet Explorer, Edge, Opera, and Yandex. The team used BrowserStack<\/a> to emulate the site on real devices and since they knew they percentage of their users on each platform, they were able to prioritize fixes according to audience size and criticality.<\/p>\n The new site went live, as planned, on stage at INBOUND, premiering as the new products and features it was built to support were announced by the company\u2019s co-founders. The launch was a huge success.<\/p>\n As Lean UX practitioners, however, the core team couldn\u2019t just rest on their laurels.<\/p>\n The team cross-referenced live site data in Google Analytics and HubSpot, paying close attention to the following metrics:<\/p>\n The team only examined vanity metrics like bounce rate and time on page to create context for the core KPIs mentioned above.<\/p>\n To continue optimizing the design, the team ran more heat mapping tests (25,000 users in multiple sessions) and more usability tests.<\/p>\n <\/p>\n This was the first project that Knight and team completed using the full Lean UX process, combining data and form together to deliver quick business outcomes. And because the resulting site is as collaborative and flexible as the process itself, iterations can be made easily and often, keeping the design fresh and responsive to whatever the user needs and business goals might arise.<\/p>\n While we can\u2019t dive into all the numbers due to NDA, we can reveal the following post-launch business results:<\/p>\n HubSpot is now a firm believer in the Lean UX approach: \u201cOur team was efficient and collaborated well,\u201d Knight said. \u201cUsers were involved throughout the entire process. And as a result, we produced something impactful that we all could really be proud of.\u201d<\/p>\n For more advice based on case studies, download the free Project Guide to Enterprise Product Design<\/a>.<\/em><\/p>\nStep One: Deep Research and Constant Testing<\/strong><\/h2>\n
Analytics & Heat Mapping<\/strong><\/h3>\n
\n
Session Recording<\/strong><\/h3>\n
Qualitative Research<\/strong><\/h3>\n
Multivariate Testing of Small Tweaks<\/strong><\/h3>\n
Step Two: Building a Living Design<\/strong><\/h2>\n
Lo-Fi Prototyping<\/strong><\/h3>\n
Mockups<\/strong><\/h3>\n
Step Three: Coding and Testing<\/strong><\/h2>\n
Step Four: Constant Testing and Iteration<\/strong><\/h2>\n
\n
Result: Data-Informed UX Success<\/strong><\/h2>\n
\n