✨ UX | Mobile Notifications UX improvements v3

[jernejk]

Cc: @adamcogan @zacharykeeping

Hi @sethdaily,

Pain

Suggested Solution

Original video: https://www.youtube.com/watch?v=qjW6yOQ37MM

I reviewed the video with Adam and he added the following feedback:

• Presentation - Zoom with 125%
• Presentation - Start with SSW Rewards page
• UX - Red text should not be on black
• Presentation - Start with a problem like what people needed and what it should do
• UX - We need to highlight scheduled date more (bigger font)
• UX - Change Archive to Delete
• UX - Change from "Send Notification" to "Create Notification"
• Presentation - Delete notification after we sent one
• UX - smokey white for active text input
• UX - larger font everywhere
• Presentation - End with something like "I hope you like this notification feature. This is JK and see you in the next one"
• UX - Dates, achievements and Roles dropdown should be always visible and disabled based on what is selected

Implement the feedback

Tasks

• UX - Red text should not be on black
• UX - We need to highlight scheduled date more (bigger font)
• UX - Change Archive to Delete
• UX - Change from "Send Notification" to "Create Notification"
• UX - smokey white for active text input
• UX - larger font everywhere
• UX - Dates, achievements and Roles dropdown should be always visible and disabled based on what is selected
• Generate a script for the video

Acceptance Criteria

• Meets Definition of Done - https://github.com/SSWConsulting/SSW.Rewards.Mobile/blob/main/_docs/Definition-of-Done.md
• ...

More Information

Screenshots

Figure: The fields should be always visible and disabled depending on the selection.

Thanks!

[jernejk]

Only a few issues were fixed, many need more time to be completed.

[jernejk]

Current draft script:

Hi, I’m JK from SSW.

If you’ve ever run a booth or conference, you know the pain: getting everyone back on time for a prize draw. The SSW Rewards Admin page lets you compose, schedule, send, and track mobile notifications—fast.

With Mobile Notification page in the Admin website, we can see all notifications like this "Northwind Conf - Prize draw in 30 minutes" scheduled for tomorrow. But I need a notification right now for a draw happening in 10 minutes.

Let’s click on Create Notification on top right. Under delivery, we have options "Now" and "Schedule". When we select "Schedule", we can specify date, time as well as timezone as some events might be in different timezone, handy when the event and the admin are in different timezones. Since we want to send this notification straightaway, I'll select Now option.

Next, for target, I’ll select "Requires Achievement" and find "Northwind Conf Prize Draw" achievement.

I'll then set Notification Title to “Northwind Conf - Prize draw in 10 minutes” and Notification Body “Prize draw will take place at the booth.”. Notification Image URL is optional, so I'll leave it empty.

Click Create Notification. We get a summary with an estimated recipient count.
A nicer mobile-style preview is coming soon.
Now click Send Notification.

Back on the list, we can see the new notification—and it’s just arrived on my phone.
Since the new “10 minutes” notice notification replaces the old one, I’ll delete the previously scheduled “Northwind Conf – Prize draw in 30 minutes.” by clicking "Delete" button.

I hope you like this notification feature.

This is JK, and see you in the next one.

Help for me, so I know how to flow the video.
• Problem & value (list view visible; quick zoom on “Scheduled”).
• Create flow (Now/Schedule toggle; timezone dropdown glance).
• Requires Achievement select; title/body entry; optional image field
• Create → summary dialog with estimated recipients → Send
• Return to list + phone screen cutaway
• Delete old scheduled item → confirm
• End card + sign-off