Bonjoro App Redesign 2023

Programs used

Overview

Project date/duration - 4 months, Jun 2023-Oct 2023

Bonjoro is a customer loyalty building platform using videos. Bonjoro’s two main products - Bonjoro Video messaging (since 2017) and Bonjoro Testimonials (since 2022) both use video to effectively create delightful and personalised experiences for every customers, then harvest that customer loyalty through testimonials to complete user journey. Bonjoro app is a companion app that allows users to send personal video messages from their mobile devices. This app is available on both Apple Appstore and Google Play store. This case study explores my process in redesigning Bonjoro companion app.

My role

As the Head of design, I was a part of the product team and responsible for the experience, strategy and design of all across Bonjoro. I was to lead the UX and produce UI elements. I worked alongside CTO, Tech lead, CMO, CEO(the product owner) and the Product manager.

The challenge

Bonjoro App was first designed and published in 2019. Since then, other than a few bug fixes and small improvements, the app has never been updated with new features or new designs. There are features such as template set up and integrations that are left out of the app, but this is intended as the app never intended to become a replacement for the platform. This app is meant to be a companion app that helps users to be able to record quickly and connect with their customers from anywhere after they have finished all their set up on the platform. But there are few necessary features still missing from this app. Firstly, the full platform has 3 main menus for Video messaging - Send videos, Replies and Results. Send videos is where you send personal video messages to new customers. Results is a collection of all sent video messages and the reactions such as likes or replies. Replies is a collection of all sent video messages that received a written or video replies back. Although replies tab may feel like a filtered page of results, many of our Video messaging users use this tab quite regularly and have told us that they prefer to keep a separate Replies tab to get back to customers who have taken time and effort to respond back. This is a crucial part of Bonjoro service where users communicate and build good strong relationships with their own customers after sending a personal video message. However, Replies tab does not currently exist on Bonjoro’s companion app, and therefore, users must scroll around to find replied messages amongst all other personal messages they have sent. Bonjoro companion app also lacks push notifications feature for replies. It does send general notifications such as new tasks being available but does not send immediate push notifications when customers respond back. This, once again, is a serious UX problem for overall Bonjoro experience. Better push notifications and naturally its control page was absolutely necessary. Some users were churning because of the app’s limitations so we had to address these issues as soon as possible. Moreover, because the web platform recently went through a complete reskin, the app now looked completely outdated and functionally behind.

The goals

Update Bonjoro companion app with latest branding
Clean up Ui and UX overall
Add Replies tab
Add notification controls
Add Results stats page Improve empty states/match with platform
Design with Testimonials becoming available on the app in the future

The process

Tab/navigation

The current app has only two tabs - Tasklist (now called Send videos on platform) and Results. Tasklist is where users go to send their personal videos to list of contacts pulled from their own CRM through integrations. Users can choose to manually add new contacts if they know email address also. Results is where all sent messages and its reactions including any text or video responses are. To see any replies, users have to either filter out each time (resets when app restarts) or scroll around until they see replied messages. This was one of the main pain points from our customers and a few customers churned solely due to this inconvenience. A lot of our power users also have voiced out the difficulties in checking replied messages so adding replies tab here was a must.

There’s also a very important tab missing from this app - notifications. To control any notifications settings, users have to visit the platform on desktop and even then, the notification controls are not very detailed. Once again, this was a serious UX issue for me that users cannot control the app’s own push notifications settings on the app itself.

Notifications page on Bonjoro platform

So I have redesigned mobile app tab as below, reusing same icons and main top navigation colour.

The header navigation also needed to be updated. Döner (Three lines) icon next to the search icon opens up ‘Filters’ and Kebab (three dots) menu opens up options to bulk select or to open up settings menu. (Bulk select is only necessary for users who are looking to send video messages to a group of users instead of sending individually. This is not a frequently used feature but does get used every now and then.) While it is true a Döner icon is used for filters, it’s not used as commonly and often gets mistaken for a Hamburger menu. Kebab menus are generally used for secondary actions. Bulk selection is indeed a secondary action to take, however, I could not accept the link to settings page is a secondary action here.

So I decided to update both of the icons, and to also give the app a proper slide out navigation. Then I switched the position for search and filter to add smoother interaction animation for the search bar.

Then to replace bulk select option, I added swipe action for select. Bonjoro app never had any swipe interactions but this is becoming more common and users in 2023 somewhat expect these general behaviours to work on most apps. Basic iOS apps and Android apps all contain swipe motions as well. So following the trend, I decided to move bulk select action to swipe motion along with reassign and dismiss, similar to how most email apps operate.

Recording and sending

Recording is definitely the most important feature of this app. After selecting a task (contact) to send a video message to, users get an info screen to see the contact’s name, email address, signup source and other custom information that is pulled in from their integration (ie. if the user has an Intercom integration then they can choose what information they would like to receive from Intercom for each ‘task’. This information is used to personalise the video message by referencing their last purchase or their city etc. The UI once again needed a bit of polishing as custom fields looked very messy overall, and review screen was rather confusing. Unless the users went through a bit of trial and error, there was not much help in figuring out which components related to what.

Contact info screen

Recording screen

After recording review screen

Previewing video (plays in the small square)

Starting from the info page before recording, I reorganised general information panel and placed record button at the bottom. This button is to remain fixed in that location so users do not have to scroll back up to find record button even after reading through customer context fields. Customer context information was also updated to look like the platform. I have added a header on top of each field for review screen with icons that are used on the platform so anyone who has already done their setup on the platform can somewhat recognise where these options came from. I also improved video preview screen. Instead of forcing users to view their recorded videos in tiny thumbnail sized view, I made it so that the video plays in a full page popup with a legible button for thumbnail change. To change the thumbnail of the video before, users had to know to click on small square that was on the video preview to change thumbnails (I did not know this until someone told me in the office). I also moved main CTAs to the bottom of the screen so scroll in any situation did not affect the next action for the users.

New contact info screen

New recording screen

New after recording review screen

New video preview

Replies tab

One of the main goal of this project was to create a replies tab. There was not much UI work to do since this tab could look like new results tab. But the replies chat system looked very old and outdated so I redesigned this part. Following the trend with most messaging apps, I moved all conversations and videos into chat bubbles, aligned right for ‘My’ messages and aligned left for received message from my contact. The text field was redesigned as well, with more noticeable button design for ‘Reply by video’ feature. Previously this was just an icon that sat in front of the text field which was not very noticeable unless users already knew what it was.

Old Results tab

Old Replies chat

New Replies tab

New Replies chat

Results snapshot

Results snapshot is a statistical data available on the platform. This gives users insight to all video messages they have sent and also for their team members. This information was never available on the app, so I decided to include this in this new version. First, I created tabs on top of tabs to switch between the Results list and Results snapshot. Then reorganised table information that fits better for mobile screens.

Results snapshot from platform

Results snapshot

Notification controls and settings page

Although the Bonjoro companion app sends push notifications for new tasks, there was no page available for users to revisit old notifications within the app. So if the users missed or deleted the push notification banner from their phone, there was no way to retrieve the recent activities at all. To improve this situation, I’ve added notifications menu in the bottom tab. Currently, Bonjoro only sends notifications when there are new tasks available, but from what I gathered through user interviews, many users wanted more detailed notifications on the reactions. Naturally the most important reaction was a reply, but some users valued likes or click throughs just as important. So with replies added to notifications list, I expanded the range to other reactions - watched, liked and clicked. Then referencing social media apps like Facebook, LinkedIn and Instagram, I gave each notification types options to delete or turn off.

Old settings page was very clustered and acted more like a profile edit page with help information mixed in. So I updated the page to be just menus first, then moved profiles and notification controls to new page.

Old settings page

New settings page

New profile

Notification controls

Outcome

This project is yet to be included on build roadmap as different projects and bug fixes took priority, however, through extensive internal testing and user testing, overall feedback was very positive. Many users asked ETA on the build and some were very eager to find out if there will be any additional cost involved in using the app. All new functions and UI components were pre-checked with Tech lead to ensure all design could be translated to actual build. This will be updated further once the app goes live.

Made in Plasmic