Designing Avantree's New Interactive User Guide (IUG)

A mobile-first, scalable solution that reduced customer complaints by 41% by replacing outdated printed manuals with an interactive digital guide tailored for seniors.

Year:

2024

Company:

Avantree Corporation

My Role:

Art Director, Product Designer

Output:

Social Media

Motion

Art Direction

UX/UI

Tools Used:

Figma

Adobe Photoshop

Adobe Illustrator

Adobe Premiere Pro

Adobe After Effects

Adobe Lightroom

3D Software (Blender, Cinema 4D)

Project Overview

As Avantree introduced advanced audio products featuring frequent chipset upgrades and new protocols like Auracast™, we faced a recurring challenge: printed manuals couldn’t keep up. Each generation brought interface changes and updated procedures, leaving users, especially seniors, confused.

As Avantree introduced advanced audio products featuring frequent chipset upgrades and new protocols like Auracast™, we faced a recurring challenge: printed manuals couldn’t keep up. Each generation brought interface changes and updated procedures, leaving users, especially seniors, confused.

Goals

> Deliver always-up-to-date setup instructions.
> Create a reusable guide system across product lines.
> Reduce support load and return rates.
> Improve first-time setup success rates among senior users.

> Deliver always-up-to-date setup instructions.
> Create a reusable guide system across product lines.
> Reduce support load and return rates.
> Improve first-time setup success rates among senior users.

Design Process

Research

We reviewed 2,000+ support tickets, 1,100 reviews, and conducted interviews with 10 senior users. Insights revealed that most users accessed support through smartphones, preferred visual over text-heavy content, and struggled with small, outdated printed manuals.

We reviewed 2,000+ support tickets, 1,100 reviews, and conducted interviews with 10 senior users. Insights revealed that most users accessed support through smartphones, preferred visual over text-heavy content, and struggled with small, outdated printed manuals.

2,000+

Support Tickets

1,100+

Reviews

10 Senior Users

User Flow & Logic

Mapped out the user flows in Figma, defining which actions would lead to which information or step. Created a flowchart to establish the logical structure before moving into design.

Design System

Developed a modular content architecture that allowed quick updates by feature or version, ensuring scalability and maintainability.

Visual Design & Prototype

Designed wireframes and mockups with step-by-step visuals, animations, and videos, ensuring clarity and accessibility for senior users.

Test

Conducted usability tests with senior participants, refining readability, navigation, and visual hierarchy based on feedback.

Deliver

Integrated QR codes into packaging and launched the guide across three major product lines in six languages. Additionally, created an instructive video and added it to the product listing page to clearly communicate that the QR codes lead to the new interactive user guide.

Integrated QR codes into packaging and launched the guide across three major product lines in six languages. Additionally, created an instructive video and added it to the product listing page to clearly communicate that the QR codes lead to the new interactive user guide.

Outcomes

41%

Complaints

26%

Return Rate

82%

Setup Success

Takeaway

The IUG bridged the gap between fast product evolution and customer onboarding, empowering seniors to confidently and independently use their devices.

“Firat led the design of our Interactive User Guide (IUG) app, which made product setup significantly easier for our senior customers and resulted in fewer support inquiries and returns.”

Phoebe Yi, CEO at Avantree

FIRAT SAKA

hello@firatsaka.com

Networking

Designing Avantree's New Interactive User Guide (IUG)