Notification Inbox
Notification Inbox is a central placement on browser where customers are able to access servicing related messaging for their account.I was the lead designer on this project to redesign the notification/Insight user experience for one of the largest retail banks in the world. To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Citi.   Notification inbox was initially released as Insights and rolled out to 10% of Citi’s customer base (Bank, Cards, MRC) with ~15% interaction rate and highly positive reviews.  The Challenge Our focus on this project was to ensure customers are not overwhelmed by the amount of insights listed on the screen and can easily find what they are looking for, while providing visual cues for any new updates on their account, while maintaining a consistent experience across browser and mobile. key measures for success Target interaction rate above 15% NPS increase Increase in call deflection My Role I led the CBOL (Citibank online) ) design experience for Notification Inbox between September 2019 and April 2020 and collaborated with an UX Architect for the initial wireframes concept.In addition, I worked alongside a Researcher, Copywriter, 2 Prototypers, Content Strategist and 3 Journey owners (Alerts and Container ).I stopped working on the project during the detailed visual design phase as the Product started to be built.Notification Inbox is scheduled to be launched globally in the second quarter of 2020. Start with the star Before I could jump into designing, it was important to understand the nature of each notification, the user path, most common action, rank and rate of success/interaction. I gather research on alerts and notifications previously done at Citi.I requested a list with all possible alerts from our alerts team. I also partnered with an UX Architect and together developed a strategy on how to group and categorize each notification, and setting up personas. For confidentiality reasons I have omitted the actual values for these metrics. Notification matrix and personas creation in collaboration with Manny Simmedey Initial Design Phase (Wireframes and first concepts) I started my design process with some simple whiteboard drawings that quickly became wireframes in sketch, the original insights were ambiguous and somewhat intimidating. Notifications was a new product for Citi but not for our users.I needed to bring some familiarity into the experience, so I focused on some very familiar patterns that our users may experience on a day to day basis. My initial approach was to have a glimpse of the notifications in the flyout tab, and a stand alone page for all notifications, however this was pushed back by the business so my design had to evolve. Another noticeable change was category and prioritization, the deeper I went into each user's path the more I realized how different each case could be, and prioritizing each notification based on the business needs would heavily impact the user experience. First Round of User Testing (New York) A week before our scheduled user testing, we had about 9 low-fi concepts,clearly 9 was overkill. I combined features between some of the concepts and drilled it down to 2 where I was confident would give us the best result, I wasn't looking for a clear winner but winning features. I build 2 invision studio prototipe and sent them over for the dry-run and testing. Method​:​ ​In-Lab Moderated User Testing Format​:​ ​45 Minute InterviewsDevice​:​ ​Desktop (2 Versions): Respondents​ 100% Citibank customers Mix of mobile and desktop preferred customers Mix of age, gender, and ethnicities Key Findings Customers wanted to review the inbox quickly and accurately. A few described it as something they felt reluctant about having to maintain yet another inbox on top of their other ones (e.g. personal email, work email, FaceBook messages).Because speed is valued, features that facilitate a quicker review process (e.g., card art, blue dot, bold font) were considered useful. Message < NotificationBold > Gray backgroundBlue Badge < Red Badge A deeper look into copy At this stage I was pretty clear on the UI direction. Backed by the testing results and with the support from the Journey Owners, Notification Inbox was now going to be just notifications and no longer serve insights or offers. After taking a deeper look at some of the insights and actual notifications, The length and ambiguity of some of the messages may have been one of our biggest problems and lack of interaction. I partnered with a Copywriter and together reduced the length of each notification for no more than 20 words, this was a huge win. Not all notifications are created equal Increasing call deflection was always in my mind, but not all notifications are created equal, some will expire, and have a completely different set of actions. When working with the copywriter it was also important that we looked into each notification as its own, for a clear layout on the user path after receiving each notification. For confidentiality reasons I have omitted the actual values for these metrics. Introducing what’s new In an effort to bring clarity and awareness for the new notification inbox a “what’s new” tutorial section was proposed as the user's first interaction. In addition to the 2 static versions, I also made a third animated for the last round of testing. I created the animation in after effects and used a plugin to exported as HTML 5 (Example above is a Gif and not the actual final animation) Second and final round of testing This time around we needed a more detailed prototype and as close to the final product as possible. Developing resources was limited so I had to split the work between 2 prototypers and come up with the animations for our third prototype on my own. Method​:​ ​In-Lab Moderated User Testing Format​:​ ​45 Minute InterviewsDevice​:​ ​Desktop (3 Versions):Respondents​ - All participants currently receive notifications from their bank and have a solid grasp of what they are - 100% must be primary financial decision maker - Mix of gender, ethnicity, and age Key Findings Again many respondents compared the experience to email and expected it to behave that way. Respondents also compared it to inboxes on other platforms (Facebook). Some felt that they knew how a particular element was going to behave because they had seen the element in other websites such as Facebook. They did not think illustrations or animation were necessary, and a few said it was even distracting or unfit for what the feature was. Final Designs
My 29th Birthday
And with this mind set I’ve now completed 29 years of the unknown, 10,592 days of intense learning and i now look forward to many more years of uncertainties, surprises of this beautiful unknown of life,
SEO Reseller
Awesome post! Keep up the great work! 🙂
AffiliateLabz
Great content! Super high-quality! Keep it up! 🙂
Lawanna
whoah this weblog is wonderful i love studying your posts.
Stay up the good work! You understand, a lot of individuals are hunting around for this information, you
could help them greatly.
Look into my blog post – cbd