UI Design - Let people know whats changing

[Kaineatthelab]

@pwei1018 reviewed and recommends we build out our notification system. waiting for update on time and cost.

Design something that can update our clients what has changed. Looks like RBC uses a plug in called go moxie, maybe there is a plug in we can pay for like hotjar?

RBC Sample 1

RBC Sample 2

[sienna-oldaccountdontuse]

Relates to #2396 and #4884

[yuisotozaki]

Some things we need to validate from #2396 and #4884.

• [x] Determine what user expectations we're trying to address.
• [x] Is this part of a multi-platform client engagement plan? E.g. Are we designing "new look" email out to registered users? → Not at this time - we want a very small design that addresses the immediate need to let users know of upcoming changes
• [x] Decide whether we are going to notify about "upcoming changes" vs "what has changed" → Upcoming Changes
• [x] Decide on the interaction scope we want to show the notification. E.g. Just the landing pages or all pages like a tutorial? → Not a tutorial → Just landing level pages
• [x] Decide on the depth to which we want to describe the changes. → Just the summary
• [x] Decide on how long to keep the notification up. → About a year
• [x] Determine a rough vision around future state of this type of user engagement. E.g. Will user feedback collection the main underlying UX we want to get to (from mentions of GoMoxie and Hotjar)? → We want client engagement team members to be able to update the content
• [ ] Link to user engagement epic if we have one.

Sep 22, 2021 BA/Design Discussion Minutes

• The header notification area is small.
• The notification should be visible on the page so that the notification is in-context.
• We would only need about a year's worth of visibility.
• Hotjar doesn't do bullet points.
• GoMoxie is something RBC uses; just an example for us.
• Determine who the ask is from. → Probably all.
• Determine the app scope → We want this across all apps.
• Next Step: Timeboxed investigation to some plug-in solutions; also speak with Trisha.

[Kaineatthelab]

This ticket is to do something we can implement quickly as it hasn't been able to be prioritized for a long time. Keep the design tight and only address the need to update our users on upcoming changes on our modernization apps.

[mstanton1]

Note to UX team - you may consider leveraging the existing Notifications menu.

[jdyck-fw]

Next steps, something simple similar to HotJar that allows for easy updates

[jdyck-fw]

Timeboxed to determine the best path forward. Come back to the team if this goes over estimate. Requirement that this be updatable by anybody.

[yuisotozaki]

Some options I've looked at in the order of smallest solution to large scale solution.

• IntroJS Fastest to implement
• Beamer Catered to user onboarding and notification
• GoMoxie Suite of solutions for long term client engagement vision

---

IntroJS

• An open source plugin for web app guide
• Commercial license is 29.99USD/lifetime
• Demo Video
• Code Example
• The content is HTML so it supports whatever format of user guide we want to add
• To enable non-dev team to update the content, we'll probably need a simple API for the front end and a set of instructions on how to edit the content
• This could be a quick solution for the short term
• Gives the business time to define client engagement service blueprint before investing in any enterprise solutions
• Custom themes

• Readily accessible documentation

  Beamer's Changelog

  

• Customer notification application
• 250USD/mth for unlimited visitors
• Product video
• Product description
• Supports complex content in the help
• Contextual content
• Custom themes

• Readily accessible documentation

  GoMoxie's Context Module in their Guide Product Suite

  

• Enterprise client engagement software
• Contact for solution consultation and pricing
• Context App Solution Description
• We know it can show what we want it to show from the example screenshot above
• "Implementation and content management are designed for business users"
• GoMoxie has additional apps for knowledgebase self-service, analytics, and reports
• Custom themes
• Must subscribe to see documentation

[yuisotozaki]

September 27, 2021 Design Team Review Minutes Yui, Janis, Scott

• Reviewed the 3 options (These are just three of about 12 options considered overall)
• IntroJS looks too simple and cheap - may need additional custom design and dev time to bring up to BC Registries design style
• Beamer seems to do what we want it to do
• GoMoxie will require engagement with their consultation team to land on a solution we want

Based on this, we're thinking Beamer is the best all around option for the immediate need.

Next Steps: Yui to draw up some options for where the call-to-action could look like and placed, taking into consideration that we want it to be visible enough to draw user attention but don't want to take the user's focus away from the main page content.

[Kaineatthelab]

Hey Yui, can you check the cost for beamer pls:)

[yuisotozaki]

@Kaineatthelab Source: https://www.getbeamer.com/pricing

The pricing varies by hits per month and some features useful to staff and developers.

If we are expecting less than 10,000 visitors per month, it's 99USD/mth (PRO)

• No SSO
• No Testing Env

For unlimited visitors per month, it's 249USD/mth (ENTERPRISE) with SSO and testing env.

• SSO Included
• Testing Env Included

Outstanding Questions:

• Is this per domain?

From Beamer's FAQ

Can I use a Beamer account on multiple websites? Yes, you can embed the same changelog in multiple accounts or manage multiple changelogs with a single users. The latter option means that you have a single user (email and password) linked to multiple accounts. Each of them will be billed separately and you may have different plans for each one of them. To learn how to create multiple accounts please read this quick tutorial.

[yuisotozaki]

Beamer implementation might look something like this. Actual design for where the trigger is and what the colour themes are will be determined later.

[Kaineatthelab]

@thorwolpert and @pwei1018 are going to look at the notifications and tell us the lift

[lmcclung]

Changed estimate to fib

[pwei1018]

@Kaineatthelab @thorwolpert I would suggest build our own notification component for UI projects. For the single project, we can use the tools like Beamer to set it up. However, it would be difficult if we want to show this component in different projects with different content. If this task is no rush, we can put it into Release Management story and work on it.

[Kaineatthelab]

@pwei1018 we are hoping in the next sprint or 2 max? What were you thinking in time it would take?

[pwei1018]

@Kaineatthelab I can try to get a simple version notification in the main page. Can someone help with the UX design?

[Kaineatthelab]

yes, @jyoti3286 does @rkim13103 already have designs around this? @forgeuxGH5 @tlebedovich @janisrogers fyi

[jyoti3286]

I don't think we did any design work on this piece. @Kaineatthelab

[rkim13103]

I didn't do the design work for our header notification and, I can't find any notification design work in the past as well @Kaineatthelab @jyoti3286

[rkim13103]

Never mind, I actually found the notification design work that was done by Jeremy. @Kaineatthelab @jyoti3286 https://preview.uxpin.com/bad8ca0a10d9577b48c2fa3cf6443e9649e29689#/pages/133134361

[Kaineatthelab]

that is a start:) who has capacity to review update the notifications an interactions? The working assumption is it should focus on system updates/roadmap coming soon pieces....but also work for work updates depending on services the user has subscribed to ie: a registration you are a secured party for has been changed and a verification statement is available on your personal property registry dashboard

[jdyck-fw]

@rkim13103 - Do you have your own ticket on the go for this?

[yuisotozaki]

@Kaineatthelab @lmcclung @jdyck-fw Recommend we close this ticket as the continuation of the design effort is now being tracked by Relationship team via #9505.

[lmcclung]

Closing.