close
close

PureBlazor Slash Command Menu

The brief

I designed a slash command menu for PureBlazor to improve workflow efficiency. Through extensive usability testing and feedback, the menu was optimized to reduce navigation time and streamline key tasks, significantly enhancing the user experience for developers.

The client

PureBlazor, a .NET, AI-native CMS for developers who want to use C# as their single programming language to build anything.

general info
Timeframe
July, 2024
Role
UX/UI Designer, UX Researcher
Team

1 Lead Designer
1 Product Manager
1 Software Engineer

Tools

Figma

Qualtrics

Connect CloudResearch

Prolific

Introduction

The Power of Slash Command Menus for Productivity

Slash command menus (SCMs) have become essential tools for enhancing productivity and reducing workflow friction in modern platforms like Slack and Notion. These menus allow users to quickly execute commands and navigate tasks without leaving their workspace, cutting down on time spent switching between tools. Studies have shown that features like real-time messaging, workflow automation, and streamlined command interfaces can increase team efficiency by up to 30%, improving decision-making and reducing manual tasks​.

Enhancing Developer Productivity with PureBlazor's SCM

In developing the slash command menu for PureBlazor, I aimed to bring similar productivity benefits to developers. By creating an intuitive, accessible menu, we significantly reduced navigation time and improved overall workflow efficiency, aligning with the goal of enhancing user experience. This case study details the process of designing, testing, and refining the menu to meet user needs while streamlining key tasks.

Research

Competitive Audit

To begin my design for the slash command menu in PureBlazor, I conducted a competitive audit of existing platforms such as Slack, Notion, and Discord, which have well-established slash command systems. This audit helped me identify key features and best practices for an efficient and user-friendly command interface.

I structured my research around several key “How Might We” (HMW) questions to guide the design process:

  1. HOW MIGHT WE... make a “good” slash command menu?
    • Relevant and comprehensive commands: Users should access a broad range of functions without feeling overwhelmed.
    • Efficiency and speed: Commands should execute quickly with minimal effort.
    • Clear categories: Organized categories make navigation smoother.
    • Seamless integration: The interface should integrate effortlessly with the user’s typing flow.
    • Accessibility: Keyboard shortcuts are essential for efficiency.
  2. HOW MIGHT WE... make this interaction quick and thoughtful?
    • Icons: Visual recognition speeds up user interaction.
    • Hierarchy: Categorizing commands ensures easy navigation.
    • Prioritized commands: Frequently used commands should be immediately accessible.
    • Descriptions: Complex commands benefit from concise explanations.
    • Readable font: Ensures clarity and accessibility.
    • Keyboard navigation: Arrow key browsing and selecting with Enter enhance efficiency.

This research process helped me answer key design questions and lay the groundwork for an intuitive, efficient slash command menu tailored to developer needs.

Design Iterations

Iteration #1

With the competitive audit insights in hand, I transitioned to creating the initial wireframe to imagine the workflow and developed the first iteration of the prototype.

Wireframes

CSM Flow Iteration #1

CSM Iteration #1

The prototype was presented to the team for feedback, focusing on ease of use, functionality, and the clarity of the command categories. Some feedback / considerations with the design:

  • ⚠️ Accessibility: Aiming for at least AA rating
  • ⚠️ Closing SCM: How could we close the SCM? (ex. click outside, ESC key, dedicated close button?)
    • ✅ SOLUTION: Clicking outside the SCM and using the ESC button were the most commonly used - we decided to stick with common design trends and implement both to make it accessible.
  • ⚠️ Opening SCM: How could we open the SCM without using the slash (/)?
    • ✅ SOLUTION: We decided to go with either a long press or double click so it doesn't interfere with the copy and pasting menu.
  • ⚠️ Filtering blocks: How could we filter blocks while being able to close the menu in case the user is wanting to include a slash while typing? Or perhaps do we need to refine the trigger mechanism?
    • ✅ SOLUTION: We decided to opt for a forward slash ("\") instead of a backward slash ("/") based on secondary research
Users struggle with the SCM popping up unnecessarily when using "/"

  • ⚠️ Grid view: Would switching to grid view be helpful instead of scrolling?
  • ⚠️ Recently used: How many commands should we have in the "recently used"

Iteration #2

Based on the discussion with my team, I created prototype iteration #2 to explore how grid view might look:

CSM Iteration #2: List and Grid

User Research: List or Grid?

To gather insights about the remaining unanswered questions we had, I conducted a survey with 85 responses but 34 participants disqualified, leaving 51 responses.

Summarized findings:

  • 📊 76% (39 participants out of 51) preferred the list view over the grid view
    • Users tend to vote for list view because it was "familiar" and "flow" better.
    • One participant answered: “Visually, the List View is far easier to understand. The Grid View seems more 'messy' to me and visually complex.”
  • 📊 78% (40 participants out of 51) voted that both layouts should be implemented so users can switch back between both.
  • 📊 The total “recently used” commands to add: list view had an average of 6.2 and grid view had an average of 5.
    • General recommendation is to include 2-6 commands. We set it in the middle == 4.
    • ⚠️ One concern that I had was that the "recently used" commands might take up too much space and clutter the actual list of commands
      • 💡 It might be a good idea to blend grid and list view so the recently used commands are grids and the actual blocks are in list view
Iteration #3

Based on the survey results, I created various possibilities/versions of what the SCM might look like and conducted a follow-up survey with users:

Survey Results for CSM Options

Based on the survey results:

  • 📊 Choice 1 is the most popular option with 36 votes, followed by choice 3 with 33 votes.
    • Users said that choice 1 is “simple” and “minimal” but users who chose choice 3 mentioned that they like having more info

My team agreed with the results of the polling and we settled on Choice 1.

Final Prototype

Finale

Conclusion

I’m incredibly happy and grateful to have been a part of this project. It’s been such a rewarding experience to see the growth and evolution of the SCM, from initial brainstorming sessions to the final implementation. Working on this project has not only allowed me to refine my design skills but also to collaborate with an amazing team that values feedback and continuous improvement.

I especially want to thank Cody and Nick, the cofounders of PureBlazor, for their constant support, insightful feedback, and genuine receptiveness throughout the entire process. Their openness to new ideas and their commitment to creating a user-friendly and innovative product have made this journey a truly collaborative one. Their leadership and vision have inspired me to push the boundaries of what we could achieve with this project, and I’m excited to see where PureBlazor goes from here.

Reflection

  1. User-Centered Design: If there's one thing this project drilled into my head, it’s that the user is always right (even when they make questionable choices). Every design decision revolved around making sure the users didn’t rage quit after five minutes of confusion. From usability tests to gathering feedback, it was all about making their lives easier.
  2. Collaboration: Working with Cody and Nick was like joining a band - except instead of guitars, we jammed with design ideas and feedback sessions. Their openness to new ideas and constant support turned this project into a true team effort.
  3. Iterative Design: If I learned one thing, it’s that nothing is ever perfect the first time. Or the second. Or the third. But hey, who’s counting? Iterating on the Slash Command Menu was a constant cycle of trial, error, and “wait, let’s try this instead,” which ultimately led to something great. It’s like sculpting, but with less clay and more confused user testers.

This project not only sharpened my skills but gave me a chance to laugh, learn, and occasionally yell at my screen.

Let's w      rk 
together !
And make something big!