WireTap Riff Recorder

App Redesign — WireTap Riff Recorder

Client: Personal Project - Unsolicited ReDesign
Date: November 2020
My Role: UX Research and Design

01. Overview

As an avid guitarist and songwriter, I was very excited when I bought the WireTap Riff Recorder in 2019. This bluetooth-enabled guitar pedal works alongside a phone app, but I very quickly became frustrated with the functioning of the app.

As a UX Researcher and UI Designer, I felt that this would be the perfect opportunity for me to practice my skills and continue to develop my project management skills by redesigning an app that meant a lot to me personally.

First, it is necessary to understand how the entire setup works. The WireTap Riff Recorder product is marketed as a songwriter tool for easily capturing guitar riffs and ideas.
The pedal is a recording device that can store up to 8 hours of audio. Plugged between the guitar and the amp it starts recording what you play on the guitar as soon as you press the foot-switch. Buttons on the pedal facilitate playback of the last recorded track or skipping between tracks. Track audio is played through the amp.
The app is the companion to the bluetooth-enabled pedal. Once connected, the app and pedal synchronize and all of the pedal’s tracks are displayed on the phone screen. From there, you can download tracks to your phone to listen to later or send to friends. You can also remotely launch playback and recording on the pedal.
The app offers editing tools like naming, tagging and trimming, as well as functioning as a standalone recording device using the phone’s input microphone.

In summary, despite being a fan of the purpose and potential of the overall product, I felt strongly that in terms of global user experience there was room for improvement on the app. For this reason I decided to work on a redesign and see what solutions I could come up with to make the product more usable and the entire experience much more enjoyable.

Disclaimer: this is an unsolicited redesign.

The WireTap Riff Recorder App

02. User Research

a. Understanding & Specifying Context

As a UX Designer, I could tell from the moment I started using the app, that there were opportunities for ergonomic improvement. To minimize personal bias, however, I decided to set my expertise aside as much as possible and approach the redesign with a fresh mindset. This started with Secondary Research (indirect), as well as collecting online user reviews, ratings, comments and feedback to get a sense of how the product had been received.

User Feedback

The WireTap app’s scores from both the Apple App Store (2.1/5) and the Google Play Store (2.5/5) were average.

Interestingly, user comments showed that most people were far more satisfied with the pedal than with the app. This could potentially have skewed user ratings, with positive reviews more likely to be attributed to the pedal. This is supported by the fact that the pedal has excellent independent reviews from stores around the world, with a Google product rating (averaged from different sources) of 4.7/5. Clearly, to get a better understanding of user response to the app itself, online ratings would need to be moderated.

 

Benchmark of Similar Products

An important step in any redesign is to benchmark similar products on the market.

I focused my research on apps working in conjunction with physical devices (guitar pedals), specifically aimed at musicians who could benefit from using a phone app instead of a computer to communicate with their pedal.

I found that currently there are no other standout products offering similar capabilities: control of the device, change of sound presets, record and download tracks. On the other hand, there are a plethora of apps dedicated to playing, recording, and creating music.

From a user experience point of view, most of today’s mobile music apps are based on a fundamental error: they ask the user to adapt to the device instead of the other way around. For example, to record guitar on your phone with an amp simulation you will need an adapter to plug your guitar into your phone (and most likely you’ll need headphones too). This is very cumbersome when you’re already handling the guitar itself. Tc Electronic stands out as being innovative in that regard. The brand’s Tone Print products use the phone to change the settings of a pedal directly via information sent through the guitar pickups — a fantastic example of a product that serves the user-experience by fitting in and improving a pre-existing use case. In my opinion, the WireTap Product (pedal & app) carries that same innovative approach and, as such, has great potential from a user experience perspective.

b. Expert Evaluation of the app

Then I proceeded to do an Expert Review of the app based on ergonomic criteria, in order to list obvious problems and be specific as to what the issues were. The Expert Review gives a global appreciation of how the app works as a system.

I based my review on the Bastien & Scapin Evaluation Chart.

c. Usability Testing

After completing Secondary Research and an Expert Review, I thought that in order to better understand the product and its usability issues Primary Research and Direct Observation would be beneficial. So I set out to organize Usability Tests with real musicians. Usability Tests are a great way to observe users while they perform actions and to fully grasp how they go about accomplishing tasks.

This would allow me to pin-point critical steps in a given use case and see how users find solutions to complete tasks, how they feel and react, and what they think of how the product fits into their activity.

I would observe participants during the discovery of the product, and have them follow a specific scenario that covers the critical points identified in the Expert Review.

The test scenario was as follows: play and record guitar with the pedal and then use the app to share the recorded part to a friend.

Preparing for the User Tests

Once I had planned dedicated days to meet the users and have them go through the test, the next step was to recruit participants, and prepare the equipment I would need to make sure the tests followed the same protocole.

 Recruit Users

I posted an invitation on a Facebook group page for musicians in my area. The profile I was looking for was: electric guitarists or bassists who play, write and record music, alone or in a band.

Controlled Test Environment

The equipment was the same for each test session:

– A camera to record the smartphone screen
– The WireTap pedal in its box, with its Quick Start Guide
– An android or iOS Phone
– An electric guitar with guitar amp, headset and cables

Who Were the Participants?

It was only a week between my post to find users and the days I had marked for the test. My goal was to have at least 5 users. In total 6 musicians participated. They were men between 25 and 35 years old and as musicians they’d been playing for over 10 years. Also two common habits came out of the interviews: they all use desktop tools to create & produce music, and they all use their phone’s dictaphone and camera to record ideas on the fly.

The Tests

All the participants were given the same scenario: play and record guitar with the pedal and then use the app to share the recorded part to a friend.

They each used their own phone and dowloaded the app. So they all started from a clean app.

For each test session I interviewed the participants after the test, to collect their thoughts and feelings and learn more about their musical habits, the tools they use and their creative process.

Here are the five main steps they needed to go through:

Users Verbatim

``Where is the stuff I just recorded?!``

``Has somebody played with the pedal before me? There are songs that are named already!?``

d. Analysis

User Journey – First connection

All the information collected was summarized into a User Journey Map that indicates 3 moments of friction. Hidden action buttons (Signifiers) and lack of feedback clearly had a negative impact on each of the participant’s experience.

Identifying the Problem

Now that moments causing frustration were pinned down, it was easier to define the problem I was set out to solve.

« How might we improve the navigation and lessen the user’s motor and cognitive load so that actions are easy and the experience pleasing? »

03. ReDesigning the App

a. Current Information Architecture & Features

To have a better understanding of the current app I drew its Screen Flow chart.

As we can see, it is a very simple app. To facilitate my work I added the list of actions the user can take from a screen, and I also added a colored button to indicate the gesture needed to access other pages/sets of actions.

b. Inspirational Benchmark of Features

To start the creative process I benchmarked other apps to get inspiration for features that I wanted to add. One important element I thought was clearly missing from the WireTap app is a music player. The user today can only play one track at a time from the track play button. It prevents the user from doing anything else while the music is playing and also each play button on each track takes up a lot of real estate on the page.

From the apps I benchmarked:

I really liked Qobuz, Bandcamp and Apple Music and Podcast for their music players. I thought they were legible. I liked the folding player that shows more information if needed, and also the fact that the players did not prevent navigation while listening.
Also, I was particularly interested in finding a way to display 2 devices (pedal & phone) with their own sets of songs and so I found Spotify very inspiring with their clear and legible sections navigation display.

Having 2 devices displayed at the same time was a challenge. I looked for ways to clearly indicate which device’s track was playing and where. I also wanted to make sure that the recording and listening process were not confused.

So I looked into dictaphone and recording apps and I liked the legibility of Apple’s Dictaphone, and the tools of the app Twisted Wave.

c. Paper Prototyping

After finding inspiration I started quickly iterating ideas and redesign suggestions on paper phone screens. My main concern was to clarify the navigation between the 2 devices — Pedal and Phone — and the 2 processes — Listening and Recording — on the Home page.

Paper Prototyping is great because it allows quick iteration and test of ideas. These little paper screens are easy to carry around and it’s easy to have someone test them in what UX Designer call « Guerilla Tests ». Have many users perform a few sets of actions and based on their reactions, quickly make changes and see what works best. 

The issues I was solving were basic navigation issues that I thought any novice musician should be able to perform, so my scope of users for the Guerilla Tests was quite large. I struggled quite a bit on creating a legible navigation with 2 lists of songs. The Paper Prototypes proved to be extremely useful in that respect. I was able to explore every idea I had and quickly sketch a new idea and test it to get instant feedback. It is only once I had a clearer idea of the lists with folding menus that I switched to High-Resolution Prototype, in order to properly design the idea and bring in Interaction.

d. New Information Architecture Suggestion & Features

Paper Prototyping allowed me to set the foundations of the new app structure, based on a new actions hierarchy. Firstly, based on my first use case test scenario. Secondly, I imagined other use cases to help clearly identify actions and flow.

I must mention here that the iterative part where I sketched on paper, defined the new architecture and started creating High-Resolution Prototypes all happened in a non-linear way. New ideas and feedback were constantly being integrated in the prototype so I adapted my screen flow as I was working on finalizing the High-Resolution Prototype.

e. High-Resolution Prototypes

I kept tc electronic WireTap Graphic Chart to create the High-Resolution Prototype.

This process itself was as iterative as the sketching. I had to make sure that the user interface (UI) reinforced the experience (UX) and that the interaction between elements was solving the main problem I had defined. Was navigation improved? Was the cognitive load lessened? Were actions more easily performed? Was the overall experience more pleasing?

With the help of the Adobe XD app on my phone, I could conduct Guerilla User Tests of the High-Resolution prototype and confirm that critical problems were solved and that the app offered a much nicer experience.

Here are the current app screens and my redesign suggestions:

Current – Home Page

WireTap Home Page

Suggestion – Home Page + music player

Home Page Player

Current – Home Page – Pedal and Phone song lists

WireTap Pedal and Phone song lists

Suggestion – Home Page – Pedal and Phone song lists

Home Page song lists

Current – Search bar and Filter tags — Current – Search bar and Filter tags — Current –

WireTap Search bar and Filter tags

Suggestion – Search bar and filters & Pedal connection secondary button (expert user access)

Filters and tags menu

Current – Synchronizing songs from pedal to phone (hidden action, no signifier, needs swipe gesture)

WireTap Synchronizing

Suggestion – Downloading songs from pedal to phone (visible action menu, explicit controls)

Downloading from Pedal to Phone redesign

Current – Tap on track to open Track page and access actions (rename, share, trim)

WireTap Tap on track to access track page

Suggestion – Select action directly from track

Single Track Edit Redesign

Current – Track page – renaming, sharing and trimming actions

WireTap Track Page

Suggestion – Track page replaced by Trimming page with explicit actions

WireTap Redesign -Trimming Page

Current – Trimming action – trim, rename and save

WireTap Trimming

Suggestion – Trimming Page – rename, trim and save

Rename Trim and Save redesign

Current – Recording display – (no explicit stop button, wheel button turning is actual hidden stop button)

WireTap Recording

Suggestion – Explicit recording, discarding and saving buttons — Suggestion – Explicit recording button

record and save redesign

04. In Retrospect

I have loved working on this project even though it was a solo project — I much prefer working in teams — and in spite of the fact that it was quite challenging at times. Since it was an unsolicited project, I did not have access to information that typically would impact such projects (marketing, business, development,  etc.) so I found it more difficult to be guessing. For example, I would have liked knowing where the current app was coming from, the ideas behind, the development process, the constraints the team was facing, what they wanted to achieve. I would have loved being able to exchange with the teams at tc electronic.

On a personal note I am happy with the learning process I went through working on this project from beginning to end, and for the practice it gave me. All the User Research I did also had my creativity going and many ideas for future features for the app and for further improvements of the product and its UX emerged — all of which I’d love to see happen. Some of these features include creating playlists, integrating a looper (record multiple tracks on top of each other) and my own favorite: sending tracks from the phone to the pedal so you would for example download a backing track from youtube and from your phone send it to the pedal. Plug your guitar in and you’re ready to jam!

Extra Suggestions For Future Features

New Feature Suggestion –  Sending Track from Phone to Pedal — New Feature Suggestion

Phone Edit mode

New Feature Suggestion – Single Track Edit Mode – Sending Track From Phone to Pedal

Single track edition redesign