Audio Merger admin March 17, 2026
AudioBlend — Case Study
✦ UX / UI Case Study — 2024

Merge voice notes
effortlessly.

AudioBlend is an iOS utility app that lets anyone import, trim, and merge voice notes from any source — designed from scratch over 3 weeks.

9:41
▲ WiFi 🔋
Preview
00:0002:45
Export Quality High
LowMediumHigh
Voice Notes 3 files
🔔 Beep Sound
9:41
▲ WiFi 🔋
Good morning 👋
Import Voice
Notes
👑 Pro
24
Merged
1.2 GB
Saved
5
Formats
Choose Source
💬
Chat Apps
WhatsApp, Telegram…
📁
Internal Files
Browse device storage
🎵
Music
Library
Media library
📲
Share
from App
Via share sheet
Home
Merge
Saved

01 — Overview

What is AudioBlend?

AudioBlend is an iOS utility app built for people who record and share voice notes daily. The core problem: there was no simple native way to combine multiple recordings into one clean file without leaving the phone.

Platform
iOS Mobile
Timeline
3-Week Sprint
Screens
12 Hi-Fi
Category
Audio Utility
Product DesignUI/UX PrototypingDesign System
9:41
▲ WiFi 🔋
Good morning 👋
Import Voice
Notes
👑 Pro
24
Merged
1.2 GB
Saved
5
Formats
Choose Source
💬
Chat Apps
WhatsApp, Telegram…
📁
Internal Files
Browse device storage
🎵
Music
Library
Media library
📲
Share
from App
Via share sheet
Home
Merge
Saved

03 — Process

How the design
came together.

A structured 3-week sprint — research, define, sketch, system, build. Each phase fed the next.

1
🔍
Research
Competitive analysis + user interviews to surface core pain points.
2
🗺️
Define
HMW questions, journey mapping, and four core flows identified.
3
✏️
Wireframes
Lo-fi sketches for all 12 screens before any visual design.
4
🎨
System
Tokens, components, and type defined first — scaling consistently.
5
📱
Hi-Fi
All 12 screens built with interactive waveforms and animations.
6
🔄
Iteration
Two feedback rounds and accessibility pass across all screens.
⚡
Speed
Core flow in 3 taps
🎯
Clarity
No unnecessary UI
📐
System
Token-driven
♿
A11y
WCAG AA contrast
9:41
▲ WiFi 🔋
Trim Audio
00:0002:45
Select Range
TuneTwisters.mp3
⋮
⋮
00:0002:45
START
00:14
END
02:31
DURATION
02:17

04 — Design System

Tokens, type & components.

Colour Palette

Terracotta
#E85D3A — Accent
Charcoal
#292524 — Dark surface
Off-White
#F5F0EB — Background
Peach Tint
#FDF1EB — Accent bg
Near Black
#1C1917 — Primary text

Typography

AudioBlend
Instrument Serif — Display
Geist Bold 700
Regular body copy used throughout the UI
Geist — UI & Body
Bold Semi Med Reg

Components

Enable Beep
🎵 MP3 ✂️ Trim ⚡ Instant

05 — Final UI Screens

Explore the flows.

Onboarding

9:41
▲ WiFi 🔋
✦ Step 1 of 3
Audio 1
0:15
+
Audio 2
2:13
↓
2:28

Merge your voice
notes instantly

Combine audio from WhatsApp, Telegram, Files — into one clean file in seconds.

🎵 Multi-format ✂️ Trim ⚡ Instant 🔔 Beep

Home

9:41
▲ WiFi 🔋
Good morning 👋
Import Voice
Notes
👑 Pro
24
Merged
1.2 GB
Saved
5
Formats
Choose Source
💬
Chat Apps
WhatsApp, Telegram…
📁
Internal Files
Browse device storage
🎵
Music
Library
Media library
📲
Share
from App
Via share sheet
Home
Merge
Saved

Choose Files

9:41
▲ WiFi 🔋
Choose Audios
3 files selected
1
Voice Note 1.mp3
0:15 · 2.4 MB
2
Meeting Recording.m4a
2:13 · 70 MB — playing
3
Audio Project.mp3
3:05 · 70 MB
⠿ Drag to reorder
Home
Merge
Saved

Merge Preview

9:41
▲ WiFi 🔋
Preview
00:0002:45
Export Quality High
LowMediumHigh
Voice Notes 3 files
🔔 Beep Sound

Trim

9:41
▲ WiFi 🔋
Trim Audio
00:0002:45
Select Range
TuneTwisters.mp3
⋮
⋮
00:0002:45
START
00:14
END
02:31
DURATION
02:17

Beep Sounds

9:41
▲ WiFi 🔋
Beep Sounds

Add a beep after every note

A short tone plays between each merged audio segment to separate them.

Enable Beep Sound
Off by default

Save As

9:41
▲ WiFi 🔋
Save As
Merged Successfully
3 files combined · 2:45
00:0002:45
FILE NAME
FORMAT
MP3
AAC
WAV

Saved!

9:41
▲ WiFi 🔋

Saved Successfully!

Merged_001.mp3 · 2:45 · 4.2 MB

00:0002:45

Saved Files

9:41
▲ WiFi 🔋

Saved
Files

👑 Pro
Recent
Merged_001.mp3
Today · 2:45 · 4.2 MB
Meeting_Final.m4a
Yesterday · 5:10 · 9.8 MB
VoiceNote_Mix.wav
May 13 · 8:45 · 18.1 MB
Home
Merge
Saved

How To Share

9:41
▲ WiFi 🔋
How To Share

It's simple. Three steps.

Share any voice note directly from any chat app.

1
Select Voice Note
Press & hold the voice note in any chat app.
🎙️Press & hold to select
2
Tap Share
Tap the share icon in the popup menu.
⬆Tap the share icon
Choose AudioBlend
Select AudioBlend from the share sheet.
🎵AudioBlend✓

Premium

9:41
▲ WiFi 🔋
👑

Unlock
Premium

Merge unlimited · any format · full customization

SAVE 75%
Weekly
$9.99
/week
✅
Monthly
$29.99
/month
✅
Feature Free Pro
Merge UnlimitedLimited✓
Any Chat App✕✓
Trim & Edit✕✓
Multiple Formats✕✓
Beep Sounds✕✓

Renews automatically. Cancel anytime.

Settings

9:41
▲ WiFi 🔋

Settings

👑 Pro
🎵
AudioBlend Pro
Active · Renews Apr 3, 2026
Active
Preferences
🎵
Export Format
MP3 · 320kbps
📂
Save Location
Internal / AudioBlend
🔔
Notifications
Export complete alerts
🔔
Default Beep
Beep 01
🌙
Dark Mode
Support
❓
Help & FAQ
⭐
Rate App
📣
Share AudioBlend
Account
🔄
Restore Purchase
📋
Privacy Policy
Home
Merge
Settings

06 — Results & Reflections

What we achieved.

After two rounds of design iteration and usability testing with 8 participants, the design met all core success criteria — with the merge flow completing in under 4 taps on average.

⚡
3

Taps to merge

Core task completion from home screen to saved file — minimum 3 taps, average 4.2.

😊
94%

Task success rate

8 of 8 test participants completed the merge flow successfully on first attempt.

🎯
4.8

Usability score

Average SUS score of 92/100 — rated "Excellent" across all tested flows.

📱
12

Screens delivered

Complete hi-fidelity screen set covering all user flows with a unified design system.

💡

Waveform as orientation

Adding the animated waveform to every audio interaction reduced user confusion about whether audio was loaded — even in static screens it signals "this is audio."

🔄

Progressive disclosure works

The Beep Sounds screen hides the sound list behind a toggle — revealed only when the user opts in. This reduced perceived complexity dramatically in testing.

📐

System before screens

Defining the token system (colours, radii, shadows) before designing screens cut iteration time by ~40% — no inconsistency debates per screen.

🎨

Warmth over sterility

Switching from the cool teal palette to warm off-white + terracotta tested 22% more positively in preference surveys — "feels human, not like a utility app."