Halp

Halp's orginal web app content editor lacked the complex functionality needed to support a conversational UX consistent with that of Slack. I provided Halp a new, improved editor inline with three major goals:

• Support three essential features: Newlines, emojis, and mentions
• Emulate the Slack message editor as closely as possible to improve consistency
• Make the editor as extensible as possible to allow easy integration across the web app

Development turned out to be more complicated than anticipated. Midway, I outlined a spec sheet comparing Slack's editor with Halp's and rewrote parts of the code to support more of the detailed edge cases. To optimize for time constraints, I approached the new project with the mindset: How could I make the greatest improvement to the editor using the least amount of complexity and least amount of time? Unfortunately, though simple in implementation, the first version of the new editor failed to support Slack mentions. Despite the significant time commitment, I ultimately decided to rebuild the editor using a different web "technology" (switching from a textarea input field to a contenteditable div). The change was based on serveral considerations:

• Ability to support mentions
• Potential for future improvements to emoji support - including custom emojis

At this point in time, the editor and parser sanitized and parsed content strings server-side using regex. After another engineer expressed concern over the way content was being injected into the UI, I proceeded to rebuild the editor and parser using a client-side abstract syntax tree. The finished product is a flexible editor that implements (or imitates) some of the Slack editor's most integral features:

• An emoji picker with categories and emoji shortcode autocomplete
• Newline and Slack markdown formatting
• Mention suggestions and autocomplete

As someone used to designing at scale, the web editor project made me reconsider many of the more subtle nuances of UI design including:

• Handling the different content formats displayed in the editor, displayed in other parts of the web app, and stored in the database
• Locating and positioning the cursor
• Correctly inserting items into the editor

Building such a small but intricate UI element reminded me that sometimes, the smallest design components can be the most important and most complicated to build.

Answers is a Halp product that simplifies the process of responding to support tickets by "suggesting" pre-written answers based on relevant key terms.

While users were able to create and select answers right within Slack, there was no way for them to edit or delete said answers.

Using existing Halp interfaces as a reference, I planned various answer management views, aiming for inutitive use and consistency with the rest of the Halp web app.

Based on the mockup designs, I created several basic components that could be reused across views as needed including:

• Answer editing form (contains content editor for updating answer text)
• Popup modal that appears when answer is being edited from all answers view

I was able to deliver several web UIs that enable users to view all their answers and edit or delete individuals. While helping improve one of Halp's premium features, I acquired experience working with technologies like GraphQl and a real commercial codebase/code review process.

Halp wanted to validate demand for a potential Microsoft Teams version of the product. To accomplish this, we followed a prepared "demo script" that outlined the essental features our demo needed to showcase. At the same time, we were able to explore and research the capabilities of the MS Teams platform.

The Halp-Teams demo product could:

• Open the integration web app inside Teams itself (via a "tab")
• Create and delete tickets within Teams (via messaging the Halp bot or through message action)
• Sync replies to a ticket between Teams and the web app

One of the most valuable takeaways from the Halp-Teams experiment was recognizing the value of a minimum viable product. Limiting the scope of our work to the basics allowed us to use our resources more efficiently and to greater effect.

To help introduce Halp to the Microsoft Teams market, Halp built a free Teams integration for popular project management tool Jira.Through the project, I was able to gain exposure to TypeORM, Postgresql, and gain more familiarity with API work.