Skip to main content

Yubo’s Voice Messages feature enhances user functionality

In the super-competitive social media marketplace, companies that integrate the latest technologies into their offerings have an edge. Toward that end, the live social discovery app Yubo has upgraded its chat feature to provide users with new voice message functionality. More easy-to-use features are planned for the near future.

How Yubo’s Voice Messages feature works

Once inside the Yubo app, each user can easily send a voice message to their friends. Each message has a one-minute maximum length, offering plenty of time for a user’s personality to shine through. If the message exceeds the one-minute mark, it will automatically be sent to the recipient.

If the message just doesn’t sound right, the user can swipe left to cancel it. They can record a different message or choose another communication medium.

How to access the Voice Messages feature

To access voice messages, users should update their app to the current version. The Yubo app is compatible with the iOS and Android platforms.

  • iOS Users: The app should feature version 4.11.68 or later.
  • Android Users: The app should feature version 4.72.0 or later.

Upcoming app enhancements

Yubo’s Voice Messages feature is the company’s current priority, with the addition of GIFs and stickers projected for the near future. Users will also benefit from improved photo and image upload interfaces plus editing and deletion functions.

Voice note recording improvements

Streamlining the voice note recording process will help fine-tune the app’s functionality. These technical advancements will also enable Yubo to keep pace with its global competitors’ offerings.

New chat bar layout

The chat’s internal chat bar has a revised layout. Now, the chat bar’s left side features the pixel and camera. The microphone is now on the right side.

New chat bar layout

Microphone’s replacement with the “Send” icon

As soon as the user presses any keyboard button, the microphone icon should disappear. The “Send” icon should replace the microphone icon.

Addition of a tooltip during the “Record” function

When the user single-taps the “Record” button (not a long press), a small tooltip should appear. The tooltip should say “Hold to Record.” If the user does not complete the “Record” function, or they tap any other key on the screen, the tooltip should disappear.

Full recording flow

The user should be able to send voice messages up to one minute long. To begin, the user presses the “Press to Record” button. While pressing this button, the audio icon should become larger and appear inside a yellow pill. The chat bar should be replaced with the “Time Recorded” and the “Swipe to Cancel” indicator.

Audio pill growing animation

Currently, the animation grows from the center. This is incorrect. The animation should grow from the bottom right corner.

Chat bar during “Record” function

While the user is recording, the small arrows should display an idle animation, which users can slide to cancel.

Blah blah bubble particles

Every time the operating system receives a sound input, a text bubble-shaped particle should appear.

Each particle should have an average power superior to -130 dBFS (Min: -160 / Max: 0). The minimum delay between two particles should be 100ms (it should be randomizing between the three different assets). In addition, an extra semi-transparent animated stroke should appear when the user is talking.

Release to send

When the user stops recording, they should release the “Record” button to send the voice note.

Note: If the user reaches the maximum one-minute recording length, the message should automatically be sent even if they do not release the “Record” button.

Swipe left to cancel

When the Yubo user swipes left to record their voice, the chat bar should display the “Release to Cancel” state.

Chat bar during recording:

Chat bar during recording

Swipe right to continue

Assume the “Record” function is in “Cancel” mode. If the user swipes right, the system should return to the regular “Record” function.

Note: If the user instead releases the button, the voice note will be sent (and not canceled).

Swipe up to lock

Currently, the user swipes up to record their voice. The prompt should change to “Release to Lock Mode” (also called the “Hands-Free Mode”). Now, the user can keep recording without touching their phone.

Swipe down to cancel

Assume the user is in “Release to Lock” mode. If they swipe down, the system should return to the regular “Record” function.

Release to lock

Assume the user is in “Release to Lock” mode. If they release their finger, the system should revert to “Lock” mode (also called the “Hands-Free” mode).

Send voice note via button tap

Assume the “Record” function is in “Lock” mode. If the user taps the button again, the voice note should be sent.

If the user reaches the maximum one-minute recording length, the message should automatically be sent even if they do not tap the “Send” button.

Cancel the voice note

Assume the “Record” button is in “Lock” mode. If the user taps the “Cancel” button on the right side, the voice note should be canceled.

Voice note reading behaviors

These instructions will inform the voice notes’ visual representation. The instructions also provide each function’s operational details.

Voice note bubble visual

The audio voice bubble’s color depends on whether the user (or their friend) sent the bubble. The voice bubble’s size should always be the same regardless of the message length.

Voice note bubble visual

Audio waveform

The audio waveform should always be represented by 20 bars. Each bar has a different height depending on the same segment’s average input power. For reference, the more likely the segment has a big dBFS, the higher the bar will appear.

Playing a voice note

When the user taps the bubble’s “Play” button, four things should happen:

  • The “Play” button should be replaced by a “Pause” button.
  • All bars should become transparent.
  • During the “Play” function, all bars should appear white.
  • During the “Play” function, the timestamp should be updated. Increments should begin at “0” and end at the message length.

Pausing a voice note

When the user taps the “Pause” button, four things should happen:

  • The “Pause” button should be replaced by the “Play” button.
  • The “Playback” function should stop.
  • The bar's progression should remain at its stopping point.
  • The timestamp should remain at its stopping point.

Seeking voice note playback

When swiping over the waveform, four things should happen:

  • The button should remain in the “Play” or “Pause” state.
  • Playback should continue (if the audio continues to play).
  • The bar's progression and finger position should be updated.
  • When the user releases their finger, the playback should begin at the last finger position.

Saving voice note progress position during “Pause”

The user may begin to play a voice note. Then, they decide to pause it and play a different voice note. The first voice note’s playback should remain at the timestamp at which the user paused the voice note.

Auto-playing two voice notes in sequence

The user may receive two voice notes in sequence. The second message should be auto-played right after the first message stops.

However, the two messages may not be queued in sequence. There may be an unrelated text message between the two messages. In this case, the auto-play function should not be enabled.

Scrolling while playing a voice note

Assume the user scrolls the chat while they play a voice note. There should be a small button for the voice progress. There should also be a “Pause” button at the same position as the “Scroll to Bottom” button.

If the user taps on this button, the voice message and visual progress should both be paused. The “Pause” icon should be replaced with a “Play” button.

If the user again taps on the same button, the playback should continue from the “Pause” position.

Hiding the “Playback” button

The user may pause the message without again tapping on the “Playback” button. After five seconds, the “Playback” button should disappear.

If the last message does not appear in the scroll, the “Scroll to Bottom” button should appear. If the last message does appear in the scroll, there is no need for the “Scroll to Bottom” button.

Playback speed progression

When the user taps the “Playback Speed” button, the voice playback should be updated to reflect the actual speed.

Each time the user taps the “Playback Speed” button, the recording should play at the next speed. The playback speed should be saved after each session.

Playback speed progression: x1 ➡︎ x1.5 ➡︎ x2 ➡︎ x1 ➡︎ etc…

Receiving a message visual clue

Similar to text messages, when the sender records a voice note, they should see a notification that an audio message is being recorded.

Safety rules

Three key safety rules will help maintain Yubo’s system design integrity. The rules should also establish parameters for user operation.

No voice note transmission before message receipt

If the user attempts to send a voice note before receiving a message, a pop-up should block the voice note feature. This rule is similar to the one in place for photo transmission.

Photo pop-up design update

The photo upload pop-up blocker should be updated. The pop-up blocker is currently a native OS pop-up.

Release strategy (A/B Test)

An A/B Test is not necessary. Because this feature is primarily an addition rather than a change for iOS, 100% of the changes should be released at the beginning.

On the Android OS, the release of the voice note receiving and playback functions should be prioritized. This is due to the fact that the Android version will take more time than the iOS version.

The app’s empty state feature

These changes only affect the iOS Empty State and Navigation Bar. Although not related to the voice notes, the chat empty state also benefits from an upgrade.

New empty state

The “Say Hello” message should be removed.

When the chat scroll is at the top of the screen, the user’s name should not appear in the navigation bar.

New empty state

Tags scrolling

All user tags should appear inside the header.

When the empty state (up to the user name) is visible, the navigation’s user information should now be hidden.

Once the user scrolls the empty state under the navigation bar, the user name and status should be displayed in the bar.

User bio (only applies to iOS)

The user bio should not be displayed on a single line. A longer bio should include some “…” at the end of the line.

The loading state

The empty state appears at the top of the screen. The loading state should be centered in the navigation bar.

User status inside the empty state

The system overview should indicate the user status using the following logic:

  • Green Dot: The user is currently online
  • Green Timestamp: The user was online within the past 24 hours
  • Gray Timestamp: The user was online more than 24 hours ago

Opening the user profile

To open the user multi-profile, the user should tap the picture or the text below it. Tapping the tags should open the “Add by Tag” view.

The “Scroll to Bottom” button

Many chat apps display the “Scroll to Bottom” button, which makes it faster to read a chat’s most recent message. Now, Yubo has added this popular user feature.

Assuming the user has not reached the end of their chat, the “Scroll to Bottom” button should appear at the chat’s bottom right corner. Once the user presses the button, the chat should quickly scroll down to the most recent message. Once that occurs, the button should disappear.

Emphasis on a work in progress

Yubo continues to revamp its user functionality, utilizing current technology that enables a smoother user interface. Taken together, these updates help promote a more seamless user experience.


Was this article helpful? Please, rate this.

There are no comments yet.
Authentication required

You must log in to post a comment.

Log in