Highspot SmartPages™
May - August 2019
Objective
At the time of this project, building SmartPages to provide content guidance was on the rise. People wanted to build more pages quicker, but the feature was in beta and SmartPages were hard to build unless you were comfortable using HTML/CSS. Thus, the goal was to understand what people were building with SmartPages and how can we make it easy to use for the average user.
My Approach
This project required multiple parts and studies in order to bring this feature out of beta.
Interviewing Existing Users - Understanding how current customers use SmartPages
Competitive Analysis - Understanding how other WYSIWYGs are built
Cafe Study - Naming our block library
Task-Based Usability Testing - Testing the usability of our new version of SmartPages
Methodologies
Method: Customer Interviews
Purpose: I wanted to get an understanding of what was currently working well and what pain points they were experiencing.
Structure: 30 minute interviews with 4 existing customers testing our beta
Method: Competitive Analysis
Purpose: SmartPages is very similar to other WYSIWYGs, so I evaluated other similar tools such as Wordpress, Squarespace, Wix, & Webflow to understand how their page editors functioned, how they named different blocks, etc.
Method: Cafe Study
Purpose: To name the different blocks (left pane), I decided to do a cafe study because the terms we use should be universal and easily understood by anyone who uses our product since these page builder functionalities do not relate to sales/marketing (our target market) jargon.
Structure: Went to a Starbucks, pulled 8 people aside individually, had them play with the different blocks and tell me what they would name the block based on its’ functionality. Afterwards, I also let them choose from a list of words and compared it to the name they suggested.
Above is v2 of SmartPages before we landed on v3 of SmartPages (the image at the top of the post).
*All designs shown were created by our senior product designer
Method: Tasked-Based Usability Testing
Purpose: When we were at our final stages of designing SmartPages, we wanted to test the ease of building a page, so I created a task-based usability test and had participants try to recreate a page from scratch.
Structure: Utilized UserTesting and gave participants all the assets they needed to emulate the sample page
Sample SmartPage users had to recreate
Examples of SmartPages that were created by participants
Synthesis & Deliverables
Throughout each stage of the research process, I would review my notes, calls, etc. and utilize affinity mapping to view patterns. Since some studies were larger than others, the level of affinity mapping varied (i.e. the naming cafe study showed clear patterns that affinity mapping was a lighter-weight compared to the feedback given when recreating a page). Once the information was synthesized, I created a findings deck and made recommendations to the SmartPages team, which consisted of our VP of Product, Product Designer, and a few engineers.
Impact
We were able to take SmartPages from Beta to GA 🎉
SmartPage creation 2x within 3 months of our launch to GA
Takeaway
Throughout this whole process, my biggest takeaway is to utilize and experiment with different research methods. When working on a feature, I learned about the importance of combining different methods to answer the various questions. To do so, I had to push myself out of my comfort zone and think creatively about how I wanted to approach all the questions that appeared throughout the creation of SmartPages. Prior to this study, I have not ran a cafe study or done a usability test similar to the one described above. Though, with time pressures, I had to be scrappy and experiment with research methods, which ultimately contributed to the success of this project.