UX writing for Notifications dashboard

2/2023 - 8/2023

Background:

Notifications is a product that Sendbird released in the spring of 2023. It’s an in-app notification channel that customers can integrate to send personalized notifications to their users. Customers can build a notification template and send a notification on the Sendbird Dashboard all without using code. Alternatively, customers with engineering background can also install UIKit, a set of prebuilt UI components, on their app to render notification channels on mobile devices and send a notification through API calls.

My tasks:

I was asked to join a team of back-end engineers, front-end engineers and designers to build and document this product within 4 weeks. It was a very timely project where we were all assigned to work as a task force and focus solely on this product for a month. There were two parts to this project: documentation and dashboard UI texts. Since the product was targeting both non-engineers and engineers, technical documentation as well as user-friendly UI texts were needed. On the dashboard side, I continued improving and adding more content to the first iteration up until August 2023 after the initial release in March. The following are the list of tasks that I completed on the UX writing side:

  • Quickstart onboarding steps

  • Send a notification guide

  • Templates and template editor guide

  • Notification logs page

  • Notification channels and create new channel guide

  • Tags

  • Theme customization page

  • Integrations page

  • Analytics page


Onboarding steps

When adding Notifications to the dashboard for the first time, the PM and I discussed adding a quickstart guide for first-time users. We simplified the testing process into three steps: Select a view type, Set up your app, and Send a notification. In the first step, users can choose between two notification channels, which are feed view and chat view. Then, depending on whether the user is a developer or not, they can either install the UIKit in their app by looking at the code snippets or scan a QR code to access the sample web application. This step is necessary to receive the notification. Lastly, before sending, you can choose one of the three sample templates and customize the variables. The purpose of the onboarding guide was to not only introduce the product but also show ease of use for both engineers and non-engineers.


Send

Starting from v1.1, users can send notifications directly from the dashboard without integrating external marketing tools. I worked on the UI texts for all four steps on how to compose and customize notifications and send them to the specified recipients. On the first page, users can select which recipients to send the notification to. Then, they can select which template to use and customize the title of the message. Once the template is chosen, they can set the template variables and the push notification settings. Finally, all of these settings and variables can be reviewed before sending the notification.


Templates

On this page, users can view a list of all templates, create a new template, and set variables using the template editor.

Template editor

When creating UI texts for the template editor, I worked closely with the UX designer to reference other photo and design tools. I tried to keep the texts as intuitive as possible by using similar language as other familiar editors.

Using tooltips, I explained how to use variables and set a value to each variable key in the template editor.


Logs

The purpose of this page was to show a list of all sent notifications. The UX designer and I decided to show three filters: channels, mode, and date range.


Channels

This page shows a list of all channels and the number of templates that have been used for each channel. I also worked on the texts for the category filter tooltip and the create new channel window.


Tags

This page was added after the initial release in July, which shows a list of tags used to categorize and sort notifications on the Analytics page. I wrote all the UI texts on this page including the create new tag dialog.


Theme

The theme editor allows users to customize the style of the notification template. I wrote all the UI texts for customizable theme options shown in the left column of the page.


Integrations

For the Integrations page, I wrote a step-by-step guide on how to configure settings for integrating two different marketing tools. I also explained how to install Sendbird Notification builder, which is a no-code Chrome extension that allows users to send customized notifications.



Analytics

Starting from the second iteration, my team and I added an analytics page for marketers to view the performance of their notifications. We decided to show three main data points: sent, opened, and clicked. We also added a secondary dimension to the analytics graph.

Previous
Previous

API & UIKit docs for Notifications

Next
Next

UIKit content reorg