About

Click it Audio is a business-to-business (B2B) web app that enables clients to upload or use text-to-speech to generate audio, and then encoded in QR code for their business. This app helps clients promote products through audio format along with accessibility enhancement.

I was responsible to redesign and rebrand the product aiming increasing client engagement. Additionally, the existing clients are looking for more features, such as customization options for QR codes and the ability to track scan frequency. As a result, we need to revisit and adjust our product strategy.

My role

I collaborated with three teams on redesign and rebranding, i.e., Design, Developer, and Product teams. My responsibilities included product opportunities exploration, experience and interface design, and front-end development.

Voice of clients

We’ve received many queries from our clients, those queries can be summarized into two insights:

• Clients want more control over the presentation of QR codes and audio.
• Clients want to gather feedback on the provided audio content.

How might we...

…enable clients to easily generate audio and QR code to their needs and meanwhile provide more insight into the engagement of generated QR code and audio?

Proposal

I proposed multiple features for Click It Audio, which can be bifurcated into (1) customization and generation of audio and QR code and (2) providing insightful analytical data to the client, and the team together brainstormed to prioritize features based on the impact and feasibility.

How to create audio embeds

I was responsible for 'Customize Audio' and 'Customize QR Code' components which are within the process of generating new embeds.

Solutions

Merge audio sample generation and QR code customization

I consolidated the 'Audio Sample Generation' and 'QR Code Customization' features into a single page. This is because both features are part of creating audio embed: 'Audio Sample Generation' deals with the audio content, while 'QR Code Customization' addresses the visual presentation. When clients decide on the visual presentation, they not only want it to match the product branding but also align with the audio content. By designing it this way, clients can easily review the audio content while customizing their QR code.

Simplified audio generation with simultaneous audio sample play

I grouped audio related traits, i.e., ‘Gender’, ‘Speed’, and ‘Language’ into the same tab for easier navigation. I also repositioned the 'Audio Sample Generation' side-by-side with audio generation panel, allowing clients to assess the audio sample without needing to scroll up and down.

The flow of QR code customization

For QR code generation, clients have many customizable settings, including QR code format, embedded logo, eye style, frame presence, text placement, and color. Based on clients’ feedback, I ordered those settings based on their volatility during QR code generation flow.

1. QR code format: It’s the fundamental to the QR code and least likely subject to change once it is determined, and therefore it is on top of the list.
2. Embedded logo: Client’s Logos are unlikely to change and can influence other minor settings, and hence it is ranked second.
3. QR code eye style: It is customizable for aesthetics.
4. Frame: This setting helps QR codes more noticeable due to background contrast. ‘Frame’ setting is positioned after QR code eye style, because Frame will not impact core part of QR code. Also, since Text is part of the Frame, the Text option is only available when clients start customizing 'Frame’.
5. Color: It is the setting that is most likely to change frequently, and hence it is ranked as the last setting.

Impact

The product has positive feedback after the launching new features and design.

• Client satisfaction with the product has doubled
• Sales of the standard plan increased by 3% within 4 months.