My role
This project involves a team comprised of myself, another designer (Catherine Mo), a developer, and the Community Manager who is serving the role of a product manager. My role was, and still is, that of a facilitator—often guiding discussions amongst the team, and fighting for the interests of the users. This also involved helping Catherine become better acquainted with user experience design, and the methods associated.
I conducted content audits on the existing HubSpot Community to identify points of improvement, created task flows to map out the happy paths for the users, and structured the information architecture to better align with the users’ intended goals. I also handled much of the upfront visual design and prototyping due to my relative familiarity with the SpaceSword design language, and previous experience with Sketch and Invision.
That being said, this project would be in a very different place without Catherine. She has been an incredible asset during the entire process, and has provided much needed input and perspective towards tackling this challenging redesign.
The users
It was very important to keep the users’ goals in mind during this entire process, as the majority are free HubSpot users who do not have access to HubSpot Support. For many of these individuals, the Community forums can make or break their experience with HubSpot. In its previous state, however, the HubSpot Community was not delivering the delightful experience to which our users have grown accustomed from HubSpot.
The problem
Free HubSpot users need help discovering answers to their questions on the HubSpot Community. The current version of the site encourages the duplication of content due to a poor search and discovery experience, and fragmented information architecture.
The hypothesis
We believed that by restructuring the information architecture, decluttering the visual design, and increasing the emphasis on search, we would decrease the volume of duplicate posts and drive user engagement on the HubSpot Community.
Discovery phase
The discovery phase of this project was devoted to researching our users and the current version of the HubSpot Community itself. Much of the upfront research was conducted on my own, and included using Lithium analytics data to ascertain user behavior, and running a content inventory and audit to determine the essential components of the site. Due to time constraints and pressure from stakeholders, the decision was made to forego initial user interviews in favor of relying on anecdotal data from the past. With this in mind, this research helped us create the problem and hypothesis statements found above.
Content inventory & audit
I found it necessary to conduct a content inventory and audit to determine what content existed on the current HubSpot Community and evaluate its usefulness. This allowed me to see the full breadth of the site, and determine whether or not it was necessary to keep all the existing links. Much of the existing content applied to users visiting HubSpot's marketing site, so we made the decision to remove many of the links to simplify the Information Architecture, and to keep users focused on their goals.
Ideation phase
The ideation phase for the HubSpot Community involved using the findings from the previous phase to brainstorm possible solutions to the users' goals. Once we had a good sense of the problem we were trying to tackle, we moved on to creating task flows, building an initial sitemap based on our assumptions, and I created an open card sort to validate our thoughts on the initial information architecture of the project, but have not run it as of yet. By the end of this phase, we identified a clear direction in which to head when moving into the visual design portion of the process.
Task flows
I found it essential to map out the various different paths users can take through the Community to achieve their unique goals. These started with drawing out the flows during whiteboard sessions. Once these were finalized, I went back and digitized them to make them easier to follow.
The task flow depicted here is one we created to map out the flow for creating a new post in the "Ideas Forum".
Initial Sitemap
The initial sitemap and structure for the HubSpot Community can be found to the left. Due to the time constraint, and decision to forgoing initial user interviews, this structure was determined by myself and Catherine. Ideally, I would like to run the open card sort that I created with some of our users to validate our assumptions, but this will need to come at a later date.
Design phase
After deciding on a general approach for the structure of the HubSpot Community using paper prototypes, we steadily began increasing the fidelity of our designs. We created low-fidelity wireframes and then high-fidelity mockups in Sketch, and moved on to prototyping the flow in Invision to create a realistic experience to test on real users.
Paper wireframes
In order to conceptualize the layout of the primary pages of the Community, we created low-fidelity wireframes to get a feel for where the content should go. After weighing the pros and cons of a few different wireframes, we decided on the sketches seen in the screenshot to the leftfor the overall layout. This aligned well with the goals of the users and the stakeholders as it attempted to switch the emphasis from creating new posts to searching first.
Low-fidelity wireframes
After deciding on the overall layout for the main pages using paper wireframes, I moved to digitizing the designs using Sketch. I intentionally chose to keep the wireframes at a lower fidelity in order to remove distractions when presenting to stakeholders. This way, they could focus on what was important at this stage in the process: the layout.
Hi-fidelity mockups
When we obtained buy-in from our stakeholders based on our low-fi wireframes, we began the process of iterating on the designs to achieve a higher level of fidelity, keeping in mind the intended uses for all of the SpaceSword components. After several rounds of updates with feedback from the stakeholders, we landed on the level of detail seen in the mockup to the left. Once this level of fidelity was achieved, we were reach to begin prototyping.
Prototyping
Using Invision, we started to link many of the primary screens together into a clickable prototype to get a feeling for the overall flow of the design. This enabled us to click through the different screens to validate the task flows we created in the ideation phase, and allowed us to prepare for the next step of the process: usability testing. We wanted to make sure we could replicate a realistic experience so that users would feel like they were using actual software during our tests.
Click here for Invision prototype.
Usability testing
To validate the many design decisions we made during this phase, we decided it was necessary to run usability tests on our prototypes. While we did face some pushback from the stakeholders, we made sure to emphasize the benefit of testing early and often, and framed it in a way that appealed to the business: user testing will save us from wasted hours of design and development time if our assumptions proved to be invalid.
We're currently in the process of conducting usability tests, having run three so far. The beginnings of a rainbow chart to be used for synthesizing the results of our tests can be seen to the left. Once these user tests are concluded, we can use the data to iterate on our designs.
