1%

Helpjuice

I was the Design Lead, then Head of Product Design at Helpjuice — a knowledge base platform that helps teams create, manage, and scale documentation.

Product

Web

My Role

Head of Product Design — (April 2023 → Oct 2023)

Lead Product Designer — (May 2022 → March 2023)

Collaborators

Customer Success Department, Marketing Department, 2 Product Designers, 1 Product Manager, 5+ Developers

Timeline

Q2 2022 — Q1 2023

Scope

Product Strategy, AI Integration, Prototyping, Design System

Organization Size

Enterprise

What is Helpjuice?

Helpjuice helps companies save millions in customer support with their powerful knowledge base tool. Companies like Amazon, Indeed and Coastal are able to deliver instant support to their customers with Helpjuice's knowledge base.

Thanks to Helpjuice's knowledge base, customers are able to get an instant answer to their question without having to call or email support.

Some numbers for context

7M+

Active Users

8K+

Knowledge Bases

My Role

My main role was to apply principles of Human-Centered Design to solve complex systemic problems and create delightful user experiences. I was involved in every aspect of the product development process, from brainstorming innovative product ideas to fine-tuning details just before launch.





I was involved in the design of several projects in the company. I lead the design and development for the following Epics:

Key Responsibilities

The Redesign for Helpjuice’s Editor and it’s features (Discussed Here)

The design and implementation of AI Features

The Redesign for Helpjuice’s Landing Page (Coming Soon)

The design and implementation of Helpjuice’s Design System

Skills

Workshop Facilitation, Design Thinking, User Interviews, User Journey Mapping, User Stories, Wireframing, Rapid Prototyping, Usability Testing, Visual Design.

Results

If you’re short on time, here’s a quick overview of the main milestones, which are detailed further in the UX case. You can also click the link below to dive straight into the solutions and results for each milestone.

Impact

Designed and scaled product experiences used by 7M+ users across 8,000+ businesses worldwide.

Built and evolved a design system with 4,000+ components, reducing design and prototyping cycles by ~35%.

Led usability improvements that contributed to a ~99.5% customer satisfaction score.

Redesigned core workflows that reduced task completion time by up to ~50% across key editor interactions.

Client Testimonial

"Ryan is a great designer. Had a pleasure working w/ him and wish him. He understands UI/UX well & needs little guidance around it."

Emil Hajric — Founder & CEO, Helpjuice

Milestone #1

— Editor Redesign

— Editor Redesign

Editor Redesign

Overview

The editor had not had a refresh in almost 4 years. The main objectives for the redesign were to enhance usability by improving current features, resolving pending bugs and UI inconsistencies and introducing new features such as AI, Request Review, and Compare Versions.

Project Goal

Recognizing the editor’s usability gaps and technical debt, and set out to redesign it into a modern, reliable, and future-ready experience.

Main OKRs

Increase knowledge base self-service adoption to reduce customer support tickets and improve time-to-resolution.

Improve editor usability and efficiency, reducing task completion time across core authoring and management workflows.

Drive consistency and scalability across the product by establishing a unified, production-ready design system.

Maintain high customer satisfaction while shipping major platform improvements, contributing to a ~99.5% CSAT score.

Enable faster feature delivery by aligning design, engineering, and product through shared systems and clearer workflows.

Challenge

The editor had not had a refresh in almost 4 years. The main objectives for the redesign were to enhance usability by improving current features, resolving pending bugs and UI inconsistencies and introducing new features such as AI, Request Review, and Compare Versions.

User Challenges

Outdated User Interface and Experience

User feedback indicated the product felt outdated and lacked the polish and usability standards. This negatively impacted the overall experience and made workflows less efficient.

Unresolved Bugs and UI inconsistencies

Persistent bugs and UI inconsistencies reduced the editor’s reliability. User recordings revealed spikes in rage clicks and U-turns via Hotjar and Google Analytics, frustrating users and lowering productivity and confidence in the tool. During the redesign, the engineering team was running a focused bug-fix sprint.

Lack of Advanced Features for Modern AI Workflows

The editor lacked key capabilities such as AI integrations, a streamlined Request Review flow, and effective version comparison. We saw an opportunity to introduce these features as part of a broader editor overhaul.

Decreased Competitive Edge in the Market

With minimal updates, the editor lagged behind competitors offering more advanced, user-friendly workflows (e.g., Notion’s “/” commands), increasing the risk of user attrition and reduced market relevance.

Old design interface inventory below ↴

Research
Building empathy through data-driven insights and behavioral analysis.

Empathy is the cornerstone of user-centered design. It guided our every step and by engaging directly with users through user interviews, surveys, and feature requests. I gained invaluable insights into our user’s needs and challenges and addressed them in the redesign. To inform my decisions for the Editor redesign:

I conducted user interviews, gathered internal feedback, ran surveys, analyzed user recordings, heatmaps, and reviewed feature requests.

User Recordings

I conducted customer interviews to understand firsthand experiences with the existing editor and assess overall user sentiment. Through moderated user tests, I observed how users navigated key features, identified friction points, and gathered feedback on improvements and new functionality. These insights were cross-referenced with internal feedback to prioritize design decisions.

Surveys

We ran user surveys to collect feedback at scale. This helped establish our System Usability Score, understand user sentiment, surface recurring issues, and identify improvement opportunities, giving us clear direction on what mattered most to users.

Feature Requests

Using Canny, I reviewed existing user-submitted feature requests and upvote trends. Highly requested and high-impact features were prioritized and incorporated into the editor redesign.

“There were times where I would work as Customer Support which enabled me to have direct 1-1 conversations with our customers which allowed me to understand and analyze their pain-points first hand.

  • Observing Real User Behavior

    With Hotjar, we observed how users were using the old editor, took notes on rage clicks, U-turns, minor bugs, bad UX or spots where users seemed to be confused about a certain feature or element. This enabled us to pick up on some issues and bad UX patterns that were not otherwise mentioned to our customer support team.

  • Observing Real User Behavior

    With Hotjar, we observed how users were using the old editor, took notes on rage clicks, U-turns, minor bugs, bad UX or spots where users seemed to be confused about a certain feature or element. This enabled us to pick up on some issues and bad UX patterns that were not otherwise mentioned to our customer support team.

    “There were times where I would work as Customer Support which enabled me to have direct 1-1 conversations with our customers which allowed me to understand and analyze their pain-points first hand.

  • Observing Real User Behavior

    With Hotjar, we observed how users were using the old editor, took notes on rage clicks, U-turns, minor bugs, bad UX or spots where users seemed to be confused about a certain feature or element. This enabled us to pick up on some issues and bad UX patterns that were not otherwise mentioned to our customer support team.

  • Observing Real User Behavior

    With Hotjar, we observed how users were using the old editor, took notes on rage clicks, U-turns, minor bugs, bad UX or spots where users seemed to be confused about a certain feature or element. This enabled us to pick up on some issues and bad UX patterns that were not otherwise mentioned to our customer support team.

    “There were times where I would work as Customer Support which enabled me to have direct 1-1 conversations with our customers which allowed me to understand and analyze their pain-points first hand.

  • Observing Real User Behavior

    With Hotjar, we observed how users were using the old editor, took notes on rage clicks, U-turns, minor bugs, bad UX or spots where users seemed to be confused about a certain feature or element. This enabled us to pick up on some issues and bad UX patterns that were not otherwise mentioned to our customer support team.

  • Observing Real User Behavior

    With Hotjar, we observed how users were using the old editor, took notes on rage clicks, U-turns, minor bugs, bad UX or spots where users seemed to be confused about a certain feature or element. This enabled us to pick up on some issues and bad UX patterns that were not otherwise mentioned to our customer support team.

    “There were times where I would work as Customer Support which enabled me to have direct 1-1 conversations with our customers which allowed me to understand and analyze their pain-points first hand.

  • Observing Real User Behavior

    With Hotjar, we observed how users were using the old editor, took notes on rage clicks, U-turns, minor bugs, bad UX or spots where users seemed to be confused about a certain feature or element. This enabled us to pick up on some issues and bad UX patterns that were not otherwise mentioned to our customer support team.

  • Observing Real User Behavior

    With Hotjar, we observed how users were using the old editor, took notes on rage clicks, U-turns, minor bugs, bad UX or spots where users seemed to be confused about a certain feature or element. This enabled us to pick up on some issues and bad UX patterns that were not otherwise mentioned to our customer support team.

    “There were times where I would work as Customer Support which enabled me to have direct 1-1 conversations with our customers which allowed me to understand and analyze their pain-points first hand.

Research
Expert Interviews with Helpjuice Employees.

We conducted internal reviews with Helpjuice’s staff to brainstorm new ideas. Internal interviews were crucial for generating innovative solutions at Helpjuice. 





It also enabled us gather fresh and new ideas on what the team thought would be good features/ideas that we could implement to improve the platform.

Research
Empathy Building through Research Insights

With more than 200 insights from a 4-week research, my team organized data, ideas and issues using an affinity mapping technique to discover patterns, to break habits and to see the big picture, which led to customer journey maps, personas and foundation of the design process.

Research
Competitive Analysis

Our analysis revealed that while knowledge base tools often fell short in usability and user satisfaction, many non/cross-industry (e.g Notion) digital products excelled in delivering comprehensive, user-centered solutions.





These findings inspired us to explore opportunities beyond traditional knowledge base standards, focusing on modernizing and enhancing the editor to better address user needs.





The following images, come from our brain storming sessions with my team.

  • Document 360
  • HeyGen
  • HeyGen
  • HeyGen
  • Document 360
  • HeyGen
  • HeyGen
  • HeyGen
Prioritization
Jobs To Be Done

I wanted to understand our customer needs through Jobs To Be Done framework.

Looking at value creation this way shifts focus from individuals’ psycho-demographic aspects to their goals and motivation. It is not about the user but about usage. Jobs to be done are ultimately about the underlying need and desired outcomes.

Jobs are rarely about the functional aspect alone. They have important emotional aspects too, that consist of personal and social dimensions which can be even more powerful than functional ones.

Functional is mostly about cold rational utility or completing a task, which also makes it vulnerable to competition since the customer won’t think twice before switching to another tool which can do the same task faster or cheaper.

Emotional on the other hand, is about feelings, hence hard to quantify, but often irrational. It is about how using a product or service makes you feel and the perception it creates.

Rather than focusing on a list of features for a product, the JTBD framework forces us as designers to think about outcomes: will users be able to (happily and easily) complete the job they “hired” the product for? Does this solution provide a better outcome than the existing ones?

Subsequently, we used all the created UX deliverables to evangelize UX research findings and their output for all members of the development team.

I conducted user interviews, gathered internal feedback, ran surveys, analyzed user recordings, heatmaps, and reviewed feature requests.
Prioritization
Feature Prioritization using the RICE model.

The RICE framework helps prioritize design features by assessing the importance and impact of the job users are hiring the product for within a specific context. By evaluating Reach and Impact, it aligns feature prioritization with the criticality of the job and the issues users experience in their workflow.

Old design interface inventory below ↴

Final Design

The redesigned Helpjuice editor focused on reducing friction, restoring trust, and enabling teams to create and manage knowledge faster. By addressing long-standing usability issues, modernizing the interface, and introducing smarter workflows, the editor evolved into a more intuitive, reliable, and scalable tool that supports both everyday contributors and power users.

What Changed...

Refreshed the visual design to align with modern UI standards while improving clarity and hierarchy

Reorganized navigation and tool placement to surface frequently used actions and reduce cognitive load

Introduced AI-assisted features to speed up content creation and reviews

Added version comparison and review workflows to support collaboration and quality control

Improved layout efficiency, reducing time to first interaction and making writing the primary focus

Resolved long-standing UI inconsistencies and bugs that disrupted user workflows

Final Design
Design Improvement Workshop

Several generations of concepts with a new design were carried out. In the process of this work, there were considered designs that were both conservative and most similar to the current brand, as well as completely new and provocative.

As a result, several concepts appeared that needed to be validated within the team. Some experiments with the Desktop Main Page Design you can find next:

  • Version 1
  • Version 2
  • Version 3
  • Final Design
  • Version 1
  • Version 2
  • Version 3
  • Final Design
Final Design
Design Improvement Workshop

After every iteration I led a workshop with the production team, customer support, marketing and legal to validate the idea and benchmark successful/unsuccessful solutions.

Final Design

Final Design

If you’re short on time, here’s a quick overview of the main milestones, which are detailed further in the UX case. You can also click the link below to dive straight into the solutions.

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Final Design

Final Design

If you’re short on time, here’s a quick overview of the main milestones, which are detailed further in the UX case. You can also click the link below to dive straight into the solutions.

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Final Design

Final Design

If you’re short on time, here’s a quick overview of the main milestones, which are detailed further in the UX case. You can also click the link below to dive straight into the solutions.

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Final Design

Final Design

If you’re short on time, here’s a quick overview of the main milestones, which are detailed further in the UX case. You can also click the link below to dive straight into the solutions.

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Impact
A delightful way to Explore

The editor redesign significantly improved usability, performance, and user confidence across the platform. By reducing friction in core workflows and introducing modern, scalable patterns, teams were able to create, manage, and maintain knowledge faster with fewer errors and less reliance on support.

Reduced task completion time for core editing workflows by simplifying navigation and layout hierarchy

Improved content quality and review efficiency through AI-assisted creation and version comparison

Increased editor adoption and daily usage by making writing and editing the primary focus

Lowered support requests related to editor usability and long-standing UI issues

Rebuilt user trust and satisfaction in a critical product surface that had not been updated in years

Summary

7M+

Active Users

8K+

Businesses using Staticflow

Impact
Mastering complex redesigns grounded in real user needs.

Redesigning the editor was an ambitious project driven by user feedback, competitive analysis, and a vision for an enhanced content creation experience. This process taught us invaluable lessons about balancing innovation with user needs, managing complexity, and fostering collaboration.

Prioritize User-Centered Insights

Observing real user behavior through interviews, heatmaps, and surveys helped uncover pain points that weren’t always voiced. Grounding decisions in actual usage patterns consistently led to more effective solutions.

Iterate Rapidly and Test Early

Fast iteration and early prototype testing reduced risk and prevented costly missteps. This approach allowed us to validate ideas early and refine features before committing to development.

Collaboration is Key

Close collaboration with engineers, stakeholders, and researchers ensured alignment throughout the process. Clear communication and feedback loops helped balance user needs, technical constraints, and business goals.

Simplify without Sacrificing Functionality

Streamlining feature placement and reducing visual clutter made the editor easier to use without compromising its depth. Focusing on clarity and user logic improved usability for both new and experienced users.

Align Design with Business Strategy

The redesign went beyond aesthetics, aligning product improvements with broader business objectives like competitiveness, scalability, and long-term adoption.

Benchmark Against Competitors

Benchmarking against tools like Notion and Slite highlighted gaps and opportunities. Understanding industry standards helped us push the editor forward rather than simply match expectations.

Milestone #2

— More Work

— More Work

More Work

Overview

The editor had not had a refresh in almost 4 years. The main objectives for the redesign were to enhance usability by improving current features, resolving pending bugs and UI inconsistencies and introducing new features such as AI, Request Review, and Compare Versions.

I also did:

1. The design of Helpjuice’s Design System

2. File Manager Redesign

3. Translations Feature Redesign

4. Landing Page Redesign

5. About us Page Redesign

6. Dashboard Page Redesign

01/06

Q2’ 2023

Final Design

If you’re short on time, here’s a quick overview of the main milestones, which are detailed further in the UX case. You can also click the link below to dive straight into the solutions.

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

02/06

Q2’ 2023

Final Design

If you’re short on time, here’s a quick overview of the main milestones, which are detailed further in the UX case. You can also click the link below to dive straight into the solutions.

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

03/06

Q2’ 2023

Final Design

If you’re short on time, here’s a quick overview of the main milestones, which are detailed further in the UX case. You can also click the link below to dive straight into the solutions.

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

04/06

Q2’ 2023

Final Design

If you’re short on time, here’s a quick overview of the main milestones, which are detailed further in the UX case. You can also click the link below to dive straight into the solutions.

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

05/06

Q2’ 2023

Final Design

If you’re short on time, here’s a quick overview of the main milestones, which are detailed further in the UX case. You can also click the link below to dive straight into the solutions.

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

06/06

Q2’ 2023

Final Design

If you’re short on time, here’s a quick overview of the main milestones, which are detailed further in the UX case. You can also click the link below to dive straight into the solutions.

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads

logo footer