ROXO is a tool for electric guitar players to save the settings for a specific song or sound on their amplifier and share that with others.
The problem:
A lack of common and dedicated platform for people to look for and add amp settings for different songs and/or styles.
The goal:
Design an app and a website that would facilitate the process of saving a setting of your own and looking for one that has already been shared.
Role:
UX designer, designing the app from conception to delivery.
Responsabilities:
Conduct user research, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies and iterating on design.
Understanding the user
User research: summary
I conducted researches with user bios, to better understand the users I am designing to, their pain points and their needs. To majos groups were identified: the users who are newbies to the guitar/bass world and don't know their way around an amplifier yet and the ones that already know their way around and just want to save some time.
The research made clear that both groups would greatly benefit from having a dedicated website and an app and that would make the overall user experience easier. One point that there is not one (well-implemented) centralized tool for amplifier settings, there are a lot of dedicated small ones for specific brans or some very website-based blog style information that you have to really dig in to find.
User research: pain points
1
There isn’t one centralized tool that gathers amp settings. There are a lot of small ones, but not one to rule them all.
2
Many people don't have the time to stop and listen a song over and over to nail the amp settings
3
A lot of newbies don't their ears trained yet to be able to figure out amp settings on their own.
Persona 1: Meg
Meg is new to the electric guitar world and is feeling overwhelmed with all the amplifier settings
Persona 2: Jack
Jack is a guitar teacher who would be able to get the correct tone out of his amplifier, but with no time on his hands to spend tweaking knobs on the amplifier.
After that, I did the user stories for each one of them:
User journey map
Starting the design
Paper wireframes
​Taking time to create different iterations of the home screen on paper ensured that the elements that made it to the digital frame would be well-suited to address the users’ pain points
Digital wireframes
As the initial design phase continued, I started constructing the wireframes of the pages of the app.
Homepage
The cards represent different genres of music
.png)
Search bar where you can type in what you are looking fot
Bottom bar with easy shortcuts
Amp setting page
Title of the song or genre
Name of the amp in which the setting was based on
.png)
This circular shape resembles the physical knob of the amp
Add setting page
Here you add in numerical number the setting of that specifc knob
Easy Submit button to submit new setting
.png)
Adds the name of the song and amp in which it was based
Low-fidelity prototype
The low fidelity prototype connected all the screens of the user flow so the prototype could be used in usability studies.
Usability study
I conducted a moderated face to face usability study using the prototype and these were the main findings:
​
​
1
The home screen should be modified so that there are not only genres on it
2
The “add” page needs to have a way to indicate if you are adding a song or a genre
3
There should exist a way to modify an existing setting and make it your own version of it
4
A filter by amplifier could be introduced
5
Top songs of the genre should be added when you click on the genre
Redefining the design
1 & 4
Based on the feedback that the home screen should be modified so that there are not only genres on it, I added a Recents and a search by Amp in the home screen.
.png)
.png)
2
Also with the feedback that the “add” page needs to have a way to indicate if you are adding a song or a genre, I modified the “add” page to make that more clear.
.png)
.png)
3
With the insight that there should be a way to modify an existing song and make your own version of it, I added an edit button:
.png)
.png)
With the insight that top songs should be shown when you click on the genre, I add a new page after the genre is clicked, with top songs of that genre.
5
High-fidelity prototype
After iterating the design with the feedback from the usability study, I moved into the high fidelity prototype .
First, I created the sticker sheet to be used on the high fidelity design, with all the color codes and typographies to be used.
Usability study
After, the hi-fi prototype was ready for testing, I conducted another round of usability studies. This second study used the high-fidelity prototype and revealed what aspects of the design needed further refining.
1
There should be an indication on the “zero” on the knob's indication
2
The naming of your new version of the song shouldn't be the same as the original
3
Have indication on which page/tab you are
4
You could use the app just for your own use to remember which settings you used
5
There is no filter so the users can filter by amp, genre, etc
Redifining the design
1
After the usability study was done and the things that needed adjustment were clear, I set out and re-did some of the designs. First of, adding a visual indication on the “zero” of the knob.
.png)
2
After that, I added an extension to the name of your new version of a song, to make it clear that you are not overwriting the original.
.png)
3 & 5
Then, to have an indication on which page/tab you are, I filled up the icons that represented the page you are with a different color. Also, a filter was added on the right side of the search bar.
.png)
.png)
.png)
4
Also, one of the coolest and most useful suggestions I got in the usability study was to add a “library” feature where you have all your own created settings, just for your own personal "diary"
.png)
And this is what became the final version on the app!
Website
Once I was satisfied with the app, I jumped into the website part of this tool.
First off, I started by doing the sitemap of what I visioned it would be:
![20 - Sitemap [Amp].png](https://static.wixstatic.com/media/bf5619_68007a454ffb4d3aab0003304abd293b~mv2.png/v1/fill/w_46,h_26,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/20%20-%20Sitemap%20%5BAmp%5D.png)
Crazy 8
After that, I did a Crazy 8 on the homepage to try out different approaches. As I already had the homepage of the app, consistency was the key here.
Digital wireframes
Then I built the wireframes based on what was already on the app, trying to keep it cohesive and familiar.
Home page
having the three most relevant topics in the homescreen for easy access
.png)
Keeping same structure of search bar in the top / center of the screen
Keeping consistency of "add new" in the bottom center of the screen
Amp setting page
Each of the knobs with the text underneath, as in the app
.png)
Space dedicated for adding to favorites and creating your own version
Amp description placholder
Add new setting page
The knobs are now all in the same row in the sake of space and cohesion
The key info to add stays at the top, as in the app
High Fidelity Mockup
After the wireframes were done, I jumped into the high fidelity prototypes.
For the color palette I kept it exactly the same as the app and for the typography I used the same typeface, just with different sizes and thicknesses.
Here is how the three main pages turned out:
Home page
.png)
.png)
Amp setting page
.png)
.png)
Add new setting page
.png)
Following that, I conected all the screens to make a functioning prototype and have some old user research.
Usability study
Then I did one more round of usability study and here are the user insights that were brought up during the study:
1
The “Genres”’ button is not solving a real purpose
3
When editing an existing song you lose the visual position of what you had on the dials before
2
The edited screen takes you out of the screen you were before
4
The "favorited" screen takes you out of the screen you were before
1
Removal of the genres button and addition of a filter instead, where people can filter by genre there.
.png)
2
Add a visual indication the song was edited just for a few seconds and then remove it.
.png)
3
Have the dials in the exact same position when the edit page comes up
.png)
4
Add a visual indication the song was favorited (by coloring the start for example) and remove the intermediate screen
.png)
And with that, I wrapped the Roxo tool feeling proud and happy with the results at the end.
Wrapping up
Impact
This tool was really special to develop as it was solving a personal issue of mine. So it felt good to see the powers laying on my fingertips to solve real-world problems.
What I learned
While designing the app I learned how all the steps of the UX process come together to bring out one final product at the end. Every single step has a reason to be and it felt good to be part of every single one of them.
Next Steps
Implement this into an actual Android/iOS app.
​
Contact musicians to see if they would like to be testing pilots on this platform.
Let's connect!
Thank you for taking the time to go through my usability study! I sent a chocolate bar to your mailbox (just kidding haha)
If you would like to get in touch: cattaneo.mariana@gmail.com