Punchlist is a collaborative feedback and approval tool designed for creative projects. It allows teams to leave comments, provide critique, and manage approvals directly on visual assets like websites, ads, and videos...instead of drowning in a 50-thread email exchange critique.
A little context...
Following Punchlist's acquisition by Marketwake, I was tasked with assessing its current-state and identifying opportunities to improve user adoption and satisfaction. We would be relaunching our marketing website alongside our first paid search campaigns and my team was in charge of having the app demo-ready. This case study outlines how I approached these challenges to refine the user experience while supporting business goals.
User perspectives
To immerse myself in the product and its users, I started by reviewing interviews conducted right before Punchlist’s acquisition. To explore some of my own questions, I also conducted a few interviews during the transition.
These 11 users, a mix of small to medium-sized creative team members and leaders, represented our target audience and were active users of the platform. By exploring their workflows, challenges, and goals, I uncovered three recurring themes that shaped the focus of my work.
All of these users were struggling with:
- Unclear navigation & task visibility: Users found it difficult to move around the app and to track individual deliverables' progress.
- Inefficient workflows & naming: Complex processes, inconsistent naming conventions, and scattered features made it hard for teams to collaborate effectively with clear language.
- Feature Friction: Unnecessary features, such as project management tools and Figma/Webflow integrations (which users found redundant due to those platforms' native commenting capabilities), failed to meet user needs and distracted them from their core tasks.
"
"
Our dashboard is a free for all. No structure or organization but maybe we're just lazy?
"
"
Wait, are 'items' the same as 'comments'? Is 'feedback' something different?
"
"
We use Punchlist for live sites. Uploading designs from Figma is too tedious for us.
Defining the focus
With these user insights in mind, my PM and I worked together to prioritize areas where design improvements could have the greatest impact. Through hands-on exploration of the app—mapping a high-level sitemap and testing workflows—we identified three focus areas critical to improving user satisfaction and adoption:
- Project/file organization: The dashboard sets the tone for users' entire app experience. Improving its usability and utility was essential for retaining and attracting users, especially during demos with prospective clients.
- Project/file creation: Setting up new projects and files is part of our core workflow. Feedback indicated this process felt unintuitive and disjointed, creating friction for users and hindering adoption.
- Annotation pages: Where users spend most of their time—leaving feedback, managing files, and collaborating. Improving the usability of this high-traffic area promised immediate value for both new and existing users.
UI breakdown
Next I looked more closely relevant UI to identify specific areas of opportunity for upcoming design iterations.
Old dashboard & project creation modal
Old folder page
Old website-project page (annotation page)
Competitor analysis
Before starting sketches, I wanted to understand how some of our competitors approached similar challenges. I looked mostly at direct competitors like Markup, Pastel, and Marker. This research helped highlight industry standards and potential opportunities for us to serve Punchlist users better.
Key takeaways:
- Projects as an organizational layer:
- Often, "project" was used as a sort of parent folder for the actual files users would be interacting with.
- By adding this layer, there is a default organizational hierarchy instead of forcing users to rely solely on folder organization.
- Project/file cards:
- Placing key indicators on project/file cards helps make large collections of files more scannable.
- Almost all cards allowed drag and drop.
- Navigation:
- Competitor navigations tend to be simple, unobtrusive, and geared toward letting their file annotation feature shine.
- Some navs are hidden once you enter a file —saving space and cognitive load.
Design explorations
Next, I reworked the workflow, starting with open-ended visual ideation through "no bad ideas" sketches, followed by low-fidelity wireframes and finally, fully designed screens. Due to a shortened project timeline that emerged at this stage, we only had time for a single round of usability testing, which I conducted once we had a clickable prototype. Throughout the design process, I focused on dev feasibility, working closely with the team to ensure each change was technically achievable.
Fixing the flow
From user interviews, to ux/ui and competitive analysis, it was clear the current flow and naming around our dashboard were not serving users as well as they could.
The first change was simple...add a project page to make creating individual clients or projects feel more natural. An extra layer of organizational goodness.
What was previously called "Project" was renamed to "File" to better describe its role as individual assets
The term "Projects" was redefined to represent this new parent layer
Low-fidelity ideation
Next, I laid out rough sketches to get our two main flows down: project creation and file organization & creation.
On top of helping me ideate around this new flow, these sketches allowed constructive conversation between me, my PM, and our dev team without committing too much time. Confirming dev feasibility was important to me at this stage since it was my first time working with these engineers. With team feedback I was able to iterate with confidence that new features/functionality were viable.
I built wireframes to test with users I had previously interviewed as well as some new users.
Using a Figma prototype, participants were presented with tasks designed to test our solutions for key pain points (4 moderated/4 unmoderated). I organized the main insights and observations into an affinity map, revealing several main takeaways:
All users from initial interviews found the project page helpful and new file naming more intuitive
All participants tried to drag and drop files into folders —highlighting the need for this functionality
7 of 8 participants used the breadcrumb navigation to return to previous folders
5 of 8 participants found the comment/browse button intuitive but 4 felt it was hard to spot initially
4 of 8 participants expected the sidebar navigation to allow them to browse or save folders for quick access
6 of 8 participants said the ability to make projects private was important to their teams
Here are a few interface changes I made in response to user feedback.
Final designs
With the insights gathered from research and usability testing, the final design of Punchlist's key flows focused on improving navigation, file status visibility, and overall efficiency. While the goal was to create a more intuitive and modern interface, we also prioritized maintaining alignment with the app's existing design language. This ensured that the update would feel like a natural evolution, rather than a jarring departure from the rest of the product.
Key improvements
First, I want to isolate four key improvements that directly addressed our users' pain points.
Note: Github and other companies were used for placeholder content in prototypes.
Distinct file cards with visible statuses
Users can now easily distinguish between website, image, and video file types from their folder.
File status is also visible and editable directly from the file card, allowing status updates without opening the file.
Clear separation of projects and files
A more linear structure was added where a file free-for-all was failing.
The newly added project page provides a clear separation for teams managing multiple clients or those who prefer organizing their work into distinct project spaces.
Clear separation of projects and files
A more lineal structure was added where a file free-for-all was failing.
This added page allows for clear distinction for teams who have multiple clients or like separating efforts into individual project spaces.
Clear & consistent navigation
Breadcrumbs now appear on file pages, providing quick access to parent folders and improving navigation clarity. Additionally, a toggle-able folder explorer sidebar makes it easier to access deeply nested content.
Decluttered file pages and added clear browse & comment modes
Previously, clicking internal links while browsing a website automatically added URLs to your file, making misclicks frustrating. A new comment/browse toggle gives users control, adding URLs only when leaving the first comment on a new page.
URLs are also now housed in the right sidebar, keeping them contextually aligned with their comments.
Decluttered file pages and added clear browse & comment modes
Previously, clicking internal links while browsing a website automatically added URLs to your file, making misclicks frustrating. A new comment/browse toggle gives users control, adding URLs only when leaving the first comment on a new page.
URLs are also now housed in the right sidebar, keeping them contextually aligned with their comments.
Before and after
I was excited by how many user concerns we successfully addressed in a relatively short time span. These final screens mark the beginning of Punchlist’s new identity and a stronger, more user-friendly experience.
Next steps
While these changes have not yet been fully implemented, our research and user testing validated their potential impact. The improvements to navigation, file organization, and commenting workflows directly addressed user pain points, and usability testing showed strong adoption of the new structure. These insights provided a clear direction for development and set the foundation for future implementation.
To ensure a smooth rollout, I collaborated closely with the engineering team, focusing on feasibility and technical constraints early in the process. Additionally, I synced with the team working on pricing and onboarding to align our efforts, ensuring a seamless experience from the marketing site to in-app workflows.
With these validated design solutions and cross-team alignment in place, next steps involve phased implementation, continued iteration based on feedback, and onboarding content to help existing users transition smoothly. This work positioned Punchlist for a more enjoyable, scalable future, and I’m excited to see these improvements come to life. :)
.jpg)
