UX Research | Interaction & Website Design
Role: research, card sorting, competitive analysis, site mapping, wireframing, prototyping
At the start of 2020, Knotel’s product team was tasked with redesigning knotel.com to be the new face of the company and better cater to range of user needs. In collaboration with software engineers, product managers, product designers, and the marketing team, I led research the evaluate the design and content of the current website, prioritize features for the product roadmap, and redesign one of the webpages for Knotel’s furniture line, Geometry. While the full website overhaul is still under development, the page I redesigned for Knotel Geometry launched in April 2020.
Project Context
Former Knotel.com website and navigation
Website Redesign Kickoff
To launch the website redesign initiative, the product team led a half-day workshop with stakeholders from the marketing, product, and engineering teams in collaboration with the VP of Product. The work session was used to define the purpose and value of the website, conduct an exercise to understand what we currently know about the audience and their motivations for coming to the website, and begin ideating around potential new features. I was in charge of leading and facilitating the discussion around the users - outlining who they are, their goals, needs, and current pain points.
The primary audience was defined as prospective customers, corporate real estate brokers, and landlords that would potentially want Knotel to lease their spaces. Secondary users would be prospective Knotel employees and current Knotel customers already in spaces.
Research Definition
The outcome of the workshop helped define the research process that our team would take. After defining the key purpose and user segments, we created key research questions:
How can the website be streamlined to best meet user needs and expectations?
What is the expected user navigation of the website?
How can we best communicate Knotel’s value proposition?
What information do we need to inform Knotel’s value model? What output would be beneficial in helping users understand the concept of Knotel?
How can we create a one-stop shop for brokers, owners, prospects, and current customers to accomplish key tasks and understand the value of flex and of Knotel?
Research Initiatives
The website research project was split into two main workstreams: 1) improving the navigation, and 2) improving the communication of Knotel’s value through additional features. The user research was set up to address both of these goals.
Methodology
Over the course of 2 weeks, our team conducted in-person sessions with 8 internal stakeholders from across Knotel and remote sessions with 8 external users that had experience working in the real estate industry.
To conduct the user study, we leveraged a platform called Recollective that enables screen recording, timing usability tasks, cord sorting tasks, and digital ethnographies. The activities in the user study involved rating how clear Knotel’s current value proposition on the website was, as well as performing two card sorting exercises asking participants to prioritize which features would best communicate Knotel’s value and to sort the current website pages into expected categories.
Website Navigation
Current site map
Card Sorting Exercise
The first workstream aimed to improve the navigation and the usability of the site to facilitate the accomplishment of key tasks driving them to knotel.com. To inform the site map of the future knotel.com, we conducted a card sorting exercise asking users to sort content into expected categories.
Most respondents felt Knotel’s Workspace and Geometry should fall under Product, potentially with some explanatory information like case studies or the pricing/value model.
Who We Are, Mission/Values, Leadership, and Careers all fell under About. The Leadership page is potentially unnecessary.
Resources should include the Blog, Press, News, Lookbooks, FAQ, and Events.
Contact Form should be under the Contact tab, but there should be Call to Actions throughout the site.
Card sorting results
Key Takeaways
Product should be “Workplace Solutions” - All our products - workspace, Geometry, strategy services - should fall under “flexible workplace solutions.” The “Product” tab should be renamed to reflect this.
Info not core to the product can be removed - Knotel isn’t a “community,” so there is no need for an “Events” page as we don’t host too many events. Additionally, leadership information is not necessary to selling the Knotel product and can be removed.
There is an opportunity for thought leadership - We want the website to remain useful as the use case changes. To do this, we need to put relevant content and thought leadership and make it easy to get there by highlighting the “most clicked article” or “what’s trending”.
“It’s super dense and it’s not providing any information... The product page is the furthest away from where it needs to be. It looks like we’re either Gensler or CBRE.”
“To me this seems kind of unnecessary. It seems kind of like an ego boost or silly to show the VPs/owners. As a customer, I don’t care. I want to see what you have to offer not who your VP is.”
“We should also have “trending now: our top 5 blog” or “the
most clicked article” and highlight important things… The feedback we get is that ‘we went on your website and don’t understand what you guys are doing.’”
Proposed Site Map
Taking into account the user feedback, a product designer and I redesigned the knotel.com site map and proposed a new navigation bar. The updated site map streamlines the navigation and decreases the amount of pages by location by linking out to listings.knotel.com.
Redesigned site map
Navigation Menu Redesign
New Features - Clarifying Knotel’s Value Proposition
The second workstream aimed to clarify the communication of Knotel’s value proposition on the website. The research sought to answer two questions:
How well does the website currently communicate Knotel’s value proposition?
How can we best communicate Knotel’s value?
Synthesis
71% of respondents rated their understanding of Knotel’s value proposition based on the website as a 3 or lower on a 5-point scale.
Internal stakeholders felt the website shared Knotel’s value to a lesser degree than external stakeholders, overall.
The sample space visualizer, interactive graph, and video about flexibility’s value were the items most commonly selected as beneficial in helping to communicate Knotel’s value. Almost everyone agreed that case stories and the sample space visualizer were at least nice to have.
“I couldn’t find any info on cost to use the space. Not even a ‘range per SF’ or lease terms like ‘NNN or Gross.’ As a potential user I’d need to know at least a range of rent rates to justify a follow up call or turning a salesman loose on me with a “request info” submission.”
“In most places it’s ‘word salad” that confuses me more than helps me. It’s inconsistently worded. The words keep being used but they don’t mean the same thing everywhere. Geometry is listed at the top, but I don’t understand that it’s a core product.”
“I think if you’re new to flexible space, you need to understand the basics of what is different vs the baseline (traditional lease)....I think an interactive graph can bring things to life for someone who already has some base level of information.””
Potential New Features
Three features were ranked most highly during the feature card sorting.
Sample Space Visualizer
Create an interactive visualization of a prototypical Knotel space where one can change the furniture/layout and company branding
Interactive Value Graph
Create an interactive graph where users can understand how much Knotel would cost relative to its value over time
Video About the Value of Flexibility
Keep the video in a prominent location on the website.
Product Roadmap
Using the website research, both the navigation and the new feature ideation, our team crafted a product roadmap and ranked each item based on impact, content effort, design effort, and development effort. The product roadmap helped us prioritize which items to move forward with first. Before diving into the new feature opportunities, streamlining the content for clarity was most important. In order to do so, we started with the Knotel Geometry page.
Webpage Redesign - Geometry
Prior Geometry Site
Prior to the redesign, the Geometry website was a separate site created through Webflow. The website had its own navigation bar and a different brand unrelated to the core Knotel brand. Our focus in tackling this part of the website first was to bring the Geometry page back into the primary knotel.com site, streamline the content in a way that clarified what Geometry is, and brought the brand closer to the Knotel brand while still remaining a unique entity.
Competitive Audit
To start exploring how to redesign the Geometry page, our team sought inspiration by conducting a competitive analysis with comparable sites - other co-working companies, architecture firms, and furniture manufacturers. We evaluated the heuristics, purpose, content, unique features, and calls to action of other sites, and created a mood board for inspiration.
Moodboard
A product designer and I pulled inspiration for different features of the web page: value proposition showcase, product showcase, workplace strategy, process, testimonials/credibility, and suite of services.
Wireframing & Prototyping
Visual Design
The final iteration of the design was completed by a graphic designer on the marketing team who developed a unique brand for the Geometry line that was a spin off the core Knotel brand. Giving Geometry a signature yellow color not used elsewhere in the Knotel brand differentiated it while incorporating Knotel brand elements such as the geometric shapes.
