Attachments
Attachments
After years on the shelf, attachments have received a fresh reboot, simplifying how users manage and access them directly from their record pages.
After years on the shelf, attachments have received a fresh reboot, simplifying how users manage and access them directly from their record pages.
ROLE
ROLE
Lead product designer
Lead product designer
DESIGN DURATION
DESIGN DURATION
6 weeks
6 weeks
READ TIME
READ TIME
5 minutes
5 minutes
CHAPTER 1
Houston, we have a problem
Houston, we have a problem
PROBLEM
PROBLEM
Today, we offer an attachment section that allows for users to add, remove, and share files associated with records. However, the user experience managing these files is very poor.
Users are unable to view complete file names, view associated metadata and are overwhelmed with the current organization structure.
Today, we offer an attachment section that allows for users to add, remove, and share files associated with records. However, the user experience managing these files is very poor.
Users are unable to view complete file names, view associated metadata and are overwhelmed with the current organization structure.
IMPACT
IMPACT
Hubspot has over 17,000+ daily users uploading attachments to their record pages. Over 1200 customers have voiced their frustrations about the current experience using attachments.
Difficulty viewing the full name of the attachment at first glance
Difficulty viewing the full name of the attachment at first glance
Users have to continuously click
“show more” to look for their attachments. We found that users on average have 15+ attachments, but our enterprise customers could have over 30+
Users have to continuously click
“show more” to look for their attachments. We found that users on average have 15+ attachments, but our enterprise customers could have over 30+
Unable to see additional metadata
Unable to see additional metadata
Inability to bulk manage like delete, rename, download
Inability to bulk manage like delete, rename, download
CUSTOMER QUOTE
CUSTOMER QUOTE
“The attachments section on all pages (deals, companies) isn't enough to help any scaled organization. Our finance and ops team need an organized system within this attachment section.”
“The attachments section on all pages (deals, companies) isn't enough to help any scaled organization. Our finance and ops team need an organized system within this attachment section.”
GOAL
GOAL
By making it easier for users to upload and manage attachments, we hope to increase usage and ultimately motivate customers to run more of their business in Hubspot.
By making it easier for users to upload and manage attachments, we hope to increase usage and ultimately motivate customers to run more of their business in Hubspot.
A few final screens
A few final screens
CHAPTER 2
Data said, “problem solved!”
Data said, “problem solved!”
RESULTS
RESULTS
10% increase in usage
10% increase in usage
Positive CSAT
Positive CSAT
Internal and external excitement
Internal and external excitement
CHAPTER 3
What was the solution?
What was the solution?
Along with the current feedback customers provided on Hubspot’s community forum, a competitor analysis and an audit was performed on the existing attachment experience.
Since the pain points were incredibly clear, we were able to quickly identify the major features we wanted to deliver. Product and Design then worked with BE and FE Engineering to determine the technical requirements list for V1.
Along with the current feedback customers provided on Hubspot’s community forum, a competitor analysis and an audit was performed on the existing attachment experience.
Since the pain points were incredibly clear, we were able to quickly identify the major features we wanted to deliver. Product and Design then worked with BE and FE Engineering to determine the technical requirements list for V1.
Snippet of the design scope
Snippet of the design scope
Audit of existing experience
Audit of existing
experience
Competitor analysis
Competitor analysis
Variation of lo-fi mocks were created with the support of FE engineering to ensure potential solutions were possible. From a gallery style manager to a table, new concepts were brainstormed.
One of the biggest challenges was trying identifying the container for attachments. Whether that may be in a side panel, in the middle column of the record page, or in a modal. Heavy understanding of Hubspot’s current patters and paradigms were crucial in order to understand the best placement for the experience. With the low-fi mocks, we headed into research to see if we could answer any open questions and validate one of the concepts.
Variation of lo-fi mocks were created with the support of FE engineering to ensure potential solutions were possible. From a gallery style manager to a table, new concepts were brainstormed.
One of the biggest challenges was trying identifying the container for attachments. Whether that may be in a side panel, in the middle column of the record page, or in a modal. Heavy understanding of Hubspot’s current patters and paradigms were crucial in order to understand the best placement for the experience. With the low-fi mocks, we headed into research to see if we could answer any open questions and validate one of the concepts.
CHAPTER 4
Is research always this easy?
Is research always this easy?
The research aims to explore user goals, validate task flows, and gather insights on attachment interactions through interviews and cognitive walkthroughs. Deliverables include user pain points, feedback on design iterations, and sentiment on future features. Surprisingly, trends formed and there was a majority of customers who enjoyed the panel container over the others.
The research aims to explore user goals, validate task flows, and gather insights on attachment interactions through interviews and cognitive walkthroughs. Deliverables include user pain points, feedback on design iterations, and sentiment on future features. Surprisingly, trends formed and there was a majority of customers who enjoyed the panel container over the others.
Here was the design feedback:
Here was the design feedback:
Customers loved the new expanded table view to be able to identify and mange attachments
Customers loved the new expanded table view to be able to identify and mange attachments
Adding a metadata like source (pdf, jpeg, etc) was seen as very valuable identifier
Users wanted more organization resources, but the research was inconclusive on what was needed more between folders vs tags as they served different purposes
Users wanted more organization resources, but the research was inconclusive on what was needed more between folders vs tags as they served different purposes
INCREASING FIDELITY
INCREASING FIDELITY
For handoff to engineering, I staggered certain flows so the team didn’t have to wait for everything to be fully completed.
I also created different statuses—"In Progress," "Complete" (if all comments were resolved), and "On Deck"—to set clear expectations and keep teams unblocked.
For handoff to engineering, I staggered certain flows so the team didn’t have to wait for everything to be fully completed.
I also created different statuses—"In Progress," "Complete" (if all comments were resolved), and "On Deck"—to set clear expectations and keep teams unblocked.
CHAPTER 5
Let’s get this baby launched
Let’s get this baby launched
Final end to end
Final end to end
CHAPTER 6
UH OH, PLOT TWIST
UH OH, PLOT TWIST
We launched the beta with a new attachments experience but identified that users still struggled with long file names due to the small chiclet size. To address this, we expanded the vertical height and stacked dates under the title, resulting in improved CSAT scores.
We launched the beta with a new attachments experience but identified that users still struggled with long file names due to the small chiclet size. To address this, we expanded the vertical height and stacked dates under the title, resulting in improved CSAT scores.
CHAPTER 6
This was my favorite project <3
This was my favorite project <3
At the end of the day, we successfully delivered a much-needed solution for our customers. Initially, we had ambitious plans to include several bonus features, and it was disappointing to realize that we couldn’t implement all of them due to technical and resource limitations. However, the project taught us the importance of adaptability.
By pivoting and collaborating as a team, we brainstormed a realistic solution that still addressed key customer pain points.
I'm really happy with how the project turned out, not only because we delivered a valuable feature, but also because we stayed true to our group mission—to make HubSpot more accessible and useful to more people.
This project reinforced the importance of prioritizing customer needs, staying flexible, and working together to find creative solutions when challenges arise.
At the end of the day, we successfully delivered a much-needed solution for our customers. Initially, we had ambitious plans to include several bonus features, and it was disappointing to realize that we couldn’t implement all of them due to technical and resource limitations. However, the project taught us the importance of adaptability.
By pivoting and collaborating as a team, we brainstormed a realistic solution that still addressed key customer pain points.
I'm really happy with how the project turned out, not only because we delivered a valuable feature, but also because we stayed true to our group mission—to make HubSpot more accessible and useful to more people.
This project reinforced the importance of prioritizing customer needs, staying flexible, and working together to find creative solutions when challenges arise.
