← Work

Solo

A social app for guitar tones, shipped on iOS and Android. Every pedal and amp is drawn, and the studio knob is rebuilt live on this page.

Year
2019
Track
design
Category
case-study

Solo was a social app for guitar tones other people made. I led its design at Deplike in 2019, from a proof of concept done in less than a week to the version that shipped on the App Store and Google Play. A player browses tones, hears one before plugging a guitar in, opens it to see the chain of processors it is made of, takes it into a studio and publishes their own. Two versions were built. The first went to players as a beta and never reached the stores. The second is the one that shipped, and it opens this page.

Try the knob

As it shipped

Explore, the home tab, on a dark ground. A wide banner reads The Sound of Metal in white over a red, scratched photograph. Under it a row of round avatars, the first marked Add Your Take, then Trevin Rudy, A. Benevide and Caleb Luca. From Subscriptions shows three tone cards over band photographs: Dream Theater, As I Am; Dire Straits, Sultans of Swing; Led Zeppelin, Stairway to Heaven. From Top Charts begins below. A mini player for Amazing Dream Theatre Preset by Trevor Benjamin sits above the tab bar.
Explore.
A tone open as a sheet over Explore: Amazing Dream Theatre Preset by Trevor Benjamin, his photograph above the title. Three round buttons sit over the cover, a filter, a pedal and a tuning fork. The cover is a teal photograph of a guitarist mid-song. Under it previous, a lit blue power button and next, then the song, As I Am by Dream Theatre, and along the foot share, a rock hand and a star.
A tone, opened.
Search, with a field for tones, genres, artists and users. Six coloured tiles: Red Hot Chili Peppers in blue and Metallica in orange over band photographs, the P5550 amp drawn in yellow, the Overdrive pedal drawn in red, and the genres Metal and Alternative. Under Because You Like #Rock, three tones: Avenged Sevenfold, Bat Country; AC/DC, Thunderstruck; Lamb of God, Laid to Rest. The mini player is still playing above the tab bar.
Search.
The studio. A toolbar across the top: Tools, Noise Gate, Play Tone, Record, Share and Close. Down the left, the chain as cards, each a drawn processor in its category's colour with a power switch: Compressor, Dynamics, in teal; Pitch Shifter, Pitch, in purple; Overdrive, Distortion, in red; SLO 100, Amplifier, in yellow and selected; Flanger, Modulation, dimmed; EQ, Equalizer, in violet. On the right the amp's six knobs with yellow arcs: Gain, Bass, Presence, Middle, Volume and Treble. Along the foot a plus to add a processor and the input and output levels.
The studio.

Tones other people made

Deplike already made software that put amps and pedals inside a phone, so a player did not have to spend money on the hardware or carry it around. Solo asked the next question. If the settings are the thing worth having, what happens when you can browse them, hear them, and publish your own? The bet was on guitarists socialising, and on ready-made tones being within reach.

The proof of concept came first: ten screens, done in less than a week, to set a vision for the product and try a brand new UI before anything was built.

  1. Ten screens of the proof of concept in two rows of five, in black and orange. Mobile Guitar Rig, over three photoreal pedals, with 15 amps and 21 pedals. Connection, a drawing of a guitar cabled to a phone, with USB and Jack. Editorial, four tiles of tones: The British Rock Tones, German Metal, Seattle Rock Tones and Hendrix Tones. The British Rock Tones opened, each tone a row of photoreal pedals and an amp. Choose Instrument, an electric guitar between two others. Put Some Tags, a keyboard under tags and an orange amp. Then three profiles: Garry Barrymore, a rhythm guitarist, and Lara Andersen, a solo guitarist, with a streak, a bass, a count of hours and a weekly target. Last, Statistics, bars for the days of a week and a timeline from 2018 to 2020.
    Ten screens in less than a week, to set a vision and try the new UI. The 15 amps and 21 pedals are the proof of concept's own count.

The personas came from segmentation studies that already existed rather than from anything invented for this. Two are beginners who want to try tones as quickly as they can. The third is an advanced player with a home studio full of hardware, the kind of player the content was expected to come from.

  • Matthew

    44 · Advanced creator

    Goal
    Create presets
    Guitar
    Fender Vintage Telecaster, Rickenbacker 4001 bass
    Phone
    High end iPhone
    Genre
    Hard rock, progressive rock

    He has many pedals and amps at his home studio, and still wants to experiment with digital effects.

  • Greg

    21 · Beginner consumer

    Goal
    Discover presets and follow
    Guitar
    Ibanez GRG120BDX
    Phone
    Mid-range Android phone
    Genre
    Progressive metal, death metal

    He wants to hear what's going on first, before he connects his guitar.

  • Justin

    16 · Beginner consumer

    Goal
    Try presets
    Guitar
    Epiphone Les Paul Standard
    Phone
    Older iPhone
    Genre
    Post grunge, pop rock

    He convinced his parents to buy an iRig, thinking it an easier way to learn than expensive pedals and amps.

The information architecture started from the basic relationships and was worked through to the release candidate, and it was never followed strictly. It was useful for deciding what belonged next to what.

  1. Onboarding

    What's what How to connect Starter's pack Login

    User identification Genre Instrument Level Favourite artists

    A beginner starts on the top charts for their genre, an advanced player in the studio.

  2. Home

    Your last chain Your feed Last liked preset Notifications and activity Top charts Editorial Search

    Suggestions Location based Genre based

  3. Preset

    Preset details User profile

    Preset actions Activate Virtual guitarist Like Comment Add to library Follow user Message user Share on other social media

    Every feed, the search and every profile lead here.

  4. Studio

    Performance Backstage Perform and create How to connect

    Saving preset Share Save

    Library Shared presets Private presets Collected presets Playlists

    Recordings Live mode

    Auxiliary functions Metronome Backing track Tuner Guitar tabs I/O settings Virtual guitarist Clear all processors

  5. Profile

    Social functions Followers Following Direct messaging Other media Shared presets

    Usage statistics Badges Streak

    Settings Account About

The information architecture as it was drawn up after the first sketch.

A tone you can read

The first studio put the face of a real amp on the screen, with a row of photoreal pedals for the chain. It was thrown out. A monochrome revision took most of the colour away so the screens would cohere, and for the first time line art stood in for the hardware. That version was tested with players. Then the line art was pushed further: a colour for each kind of processor, a symbol for each kind, and a drawing of each processor, so that every one reads as its own thing on a phone. Once that held, the long search for the studio itself began.

  1. An early studio drawn as the face of an amp: a tan panel with six black pointer knobs, Normal Vol, Middle, Bright Vol, Treble, Bass Vol and Presence, labelled Bassboy Amp. Round tool buttons run down the right. Along the foot the chain is a row of photoreal pedals and an amp head.

    The first studio, the face of a real amp, with photoreal pedals for the chain.

  2. The same Bassboy Amp studio in greys, with the same six pointer knobs. Along the foot the chain is now line art, each processor under an On or Off switch.

    The monochrome revision: less colour so the screens cohere, and line art in place of the photoreal hardware, tested with players.

  3. The Bassboy Amp studio on black, its six knobs drawn as cream arcs. Along the foot the chain is line art in colour, one colour a kind: Octave Shifter in purple, Bassboy in cream, Overdrive OD3 in red, Stereo Reverb in orange and Sustainer in teal, then a green plus.

    A colour and a symbol for each kind of processor, and the search for the studio's knobs begun.

  4. The first version's studio. A toolbar across the top: Tools, Noise Gate, Play Tone, Record, Share and Close. Down the left, the chain as cards: Overdrive in red, the P5550 amp in yellow and selected, and Flangum X dimmed. On the right the amp's seven knobs with yellow arcs: Pre-Gain, Post-Gain, Low, Resonance, Mid, Presence and High.

    The first version. Tested by players in beta: the four areas, the chain as cards down the left.

  5. The studio. A toolbar across the top: Tools, Noise Gate, Play Tone, Record, Share and Close. Down the left, the chain as cards, each a drawn processor in its category's colour with a power switch: Compressor, Dynamics, in teal; Pitch Shifter, Pitch, in purple; Overdrive, Distortion, in red; SLO 100, Amplifier, in yellow and selected; Flanger, Modulation, dimmed; EQ, Equalizer, in violet. On the right the amp's six knobs with yellow arcs: Gain, Bass, Presence, Middle, Volume and Treble. Along the foot a plus to add a processor and the input and output levels.

    The version that shipped. The same studio, with a handle on every card.

The colours were used the same way everywhere: on a tone, in the studio, and in backstage, where every processor lives until it is added to a chain. Every processor was drawn in a plain style that still had to be recognised at a glance. Twenty pedals and fifteen amps shipped, all free to use, each drawn twice: as drawn, and selected.

  • Dynamics
    • Compressor
    • Sustainer
  • Pitch
    • Octave Shifter
    • Pitch Shifter
  • Distortion
    • OD 808
    • Dr. Muff
    • Overdrive
    • Metal Head
    • Full Blast
  • Amplifiers
    • SVT Bass
    • P5550
    • JCM 800
    • Stock Amp
    • Recto
    • Fox AC30
    • JTM 45
    • Bassboy
    • Acoustic
    • SLO 100
    • Tangerine
    • Crafter
    • DST
    • ANRG
    • Wapi
  • Modulation
    • Flangum X
    • Phase Shifter
    • Chorus
    • Auto Wah
    • Dizzy Lobster
  • Delay
    • Delay
    • Tape Delay
  • Reverb
    • Reverb
    • Stereo Reverb
  • EQ
    • EQ
  • Looper
    • Looper

That is what makes a tone readable. On a profile, every tone a player shared shows as its chain.

A player's profile in the first version: Trevor Benjamin of New York City, a hard rock and metal solo guitarist, with Shared and Featured tabs. His shared tone is a card showing its chain as eight drawn processors in their colours, with the amp in yellow in the middle, over the words Great rock tone of Jimi Hendrix as he plays Little Wing and its hashtags.
The first version. A profile, where every shared tone shows as its chain.

A studio under your finger

The studio settled into four areas. A top bar for tools, the chain of processors down the left, the parameters of whatever is selected on the right, and input and output levels along the bottom. Processors are dragged to reorder them and dragged out of the chain to remove them. The diagram below went to the developers early, with what every area does and how a processor is held and dragged, down to the press time and the haptic tap when a drag starts.

  1. An early studio drawn in grey, three knobs labelled Text, with callouts around it. Studio Tab: Studio tab active. Library Tab: Goes to user library. Saved and liked presets also unpublished by the user will be found here. Recordings Tab: Goes to user recordings library. In the future those will be able to be published as well. At first it would be offline storage. Probably will not release at v.1.0. Record Action, on the close button: Closes the studio modal screen returns user to the home screen. Record Action: Counts in and starts recording (The upper limit will be discussed). Save Action: Brings user to the preset save/share screen. Tuner Action: Brings user to the tuner screen. Backing Track Action: Brings user to the backing track screen. Metronome Action: Brings user to the metronome screen. Knob Interaction Area: There are types of different knobs for different processors. Please see sample canvases. Ideally both turning the knob or swiping up/down affects the levels. Enable/Disable Processor Switch: On position indicates that the particular processor is active in the chain. User taps it to change to 'off' position, that disables the certain processor and drops opacity level to 50% (see Stereo Reverb). Chain / Processors Interaction Area: All processors are displayed here. If pressed on the icons, it changes the appearance as displayed below. If there are more items in the chain that can be displayed on device width, horizontal scrolling enables users to see others. Press and hold on to a processor then drag it to the knob interaction area to remove the processor or change its position within the chain. Send Taptic Engine alert when the drag is active. Press wait time is 0.2s. Add Processor: Brings user to backstage where user browses all processors. It'd be another modal screen on top of the studio. The last added item is placed on the end line of the chain. Audio I/O, twice: Opens up input output levels sliders. Noise Gate: Opens up noise gate slider. Empty Chain: Removes all items added to the chain and starts fresh. The chain drawn is EQ, Dr. Muff, P5550, Flanger and Stereo Reverb, the last switched off. Under it a legend shows one red pedal three ways: Selected, Active & Not Selected, and Inactive. The board's line under it reads: Diagram to communicate with developers and other stakeholders of an early stage of the studio.
    The studio as drawn for the developers early on: what every area does, and how a processor is held and dragged.

Many knobs were tried over the whole development, each after the knobs on the pedals and amps that guitarists already know and love.

  1. Twelve knob studies on a grey ground. The top row is six round dials: orange and red arcs around a value of 67 marked Effect, a dark blue gauge reading 68 for Distortion, a plain disc with an orange rim, and a thin outlined dial. The bottom row is six square tiles: a blue ring marked Mix, a red-arced knob marked Parameter, a yellow-arced Pre Gain at 65, a purple ring marked Dry, a black knob among tick marks marked Bright, and two yellow sliders for Pre Gain and Low.
    Knob studies from across the whole development, each after the knobs on the pedals and amps guitarists know.

The knob is the detail I would still defend. You can slide up and down or left and right, and while you drag, the left column fades and shows the level of the parameter you are changing, because your finger is covering the control. It is rebuilt below from the first version's three knob screens, with every label and scale as they were printed. Choose a processor and turn a knob.

Chain
Mix
Pitch
Threshold
Ratio
Attack
Release
Drive
Tone
Level
Pre Gain
Post Gain
Low
Resonance
Mid
Presence
High
80Hz
240Hz
720Hz
2.2KHz
6.6KHz
Level

The first version’s studio, rebuilt from its three knob screens. Choose a processor, then drag a knob up, down or sideways, or use the arrow keys. Play the riff and turn a knob while it sounds. The sound is a sketch of the chain written for this page, not the app’s own engine, and the compressor and Metal Head, which no screen gave knobs, carry the usual ones.
Three phone screens of the studio, each mid-gesture. In every one the left column of the chain has dimmed almost to black and a bright vertical meter has appeared in it, printing the parameter being changed and its range: Post Gain from 100 percent to 0, Pitch from plus twelve to minus twelve, and an EQ band at 240 hertz from plus twelve to minus twelve decibels. The knobs and sliders on the right are lit in yellow, purple and violet.
The first version. The three knob screens the studio is rebuilt from.

The rest of the studio's moves, as the 2019 prototype of the first version recorded them: a processor lifted out of the chain, the chain cleared to begin from scratch, the knob, and the looper.

The first version. A processor held, lifted out of the chain and dropped to remove it.
The first version. The chain cleared, to begin from scratch.
The first version. The knob: while it is dragged, the column beside it shows the level.
The first version. The looper: count in, record, play, delete.

What home should show

One of the first things to settle was what to deliver on the home screen, and from whom. A hybrid feed was tried first, mixing the top charts, the player's own tones and tones from other players, with a recommendation engine if one could be had. Then a finding changed the question: many guitarists stay with certain tones for a very long time. So a limited number of tones a day, pushed as cards, was tried, to give those players something to look at and a reason to come back.

  1. Three early home screens in black and orange, each with round tabs for For You, Activity and Top Charts. Activity lists what other players did: one started to follow another, one liked a preset, each tone a row of photoreal pedals and an amp with an Activate button. For You shows tones from followed players, filtered by Metal, Last Week and Followed. Top Charts ranks Top Rock from one to four, weekly.
    Tried first, a hybrid feed: the top charts, your own tones and other players' tones, mixed.
  2. Three white Explore screens built around one card at a time, each counting the cards left today: 6, 10 and 8. In the middle a card for As I Am by Dream Theatre, marked Progressive, Solo 1 and 28 minutes. On the left a card for Dire Straits is swiped aside toward a yellow star, Favorited; on the right another toward a red heart, Liked.
    Tried next, reveal cards: a limited number of tones a day, for players who stay with certain tones for a very long time.

The shipped answer is the Explore tab at the top of this page: a banner, a row of players, tones from your subscriptions, then the top charts.

Plugging in

The blocking problem was never the software. You cannot play through a phone without buying something first, a cable or a small interface, and one of the three personas was a sixteen year old who had to talk his parents into it. So the onboarding offers a starter pack of the parts you need, and a separate flow measures what your setup can actually do before you plug a guitar into it.

Onboarding was a crucial point for this product, because connecting a guitar to a phone has to be learned. The same line art was used to explain how, and if a part was missing, the screen pointed at where to buy it.

The first version: how to connect

How to Use, drawn in line art on a dark ground: a guitar at the foot, cabled through a green USB Connector and a yellow OTG adapter to a phone, with headphones marked Audio Output. A Jack switch at the top right, an i beside each part, and OK I Got it! at the foot.
USB Guitar Connector: A USB Guitar Connector will let you connect your guitar and play it with no latency. A photograph of a white Behringer Guitar Link UCG102, Ultimate Guitar-to-USB Audio Interface, with Purchase From Amazon above its name and Recommended Gear at the foot.
USB OTG: You need a USB OTG (on the go) converter in order to plug your USB Guitar Connector into your phone. Two photographed cables, each with Purchase From Amazon: a UGREEN Micro USB 2.0 OTG Cable, Male Micro USB to Female USB, and an AmazonBasics USB Type-C to USB 3.1 Gen1 Female Adapter Cable.
How to Use again, with the switch now reading USB: the guitar cabled through an orange Analog Connector into the headphone socket of an older phone, the headphones marked Audio Output.
The same analog drawing for a newer phone with no headphone socket, the connector's cable running into its charging port.
Analog Guitar Connector: A Analog Guitar Connector will let you connect your guitar to your phone. But depending on your device, analog connection may work with some latency as the technology behind analog connection dictates. A photograph of a Smartrig II XLR, Microphone & 6.3mm Guitar Adapter, with Purchase From Amazon, and at the foot, beside a green warning sign, USB connection is recommended.
Audio Output: headphones or speakers are needed to hear what you play, and some need jack convertors. A photograph of a black Cambridge Soundworks OontZ Angle 3 Ultra speaker, with Purchase From Amazon and Recommended Gear.

Phones are not created equal, and some of them, with some interfaces, glitch. The team wanted a flow that told a player what to expect from the setup they had and how to do better. The result is a test that measures your latency and rates it, then shows the gear that would improve it.

  1. Three screens of the test on another setup. Testing, with a ring half drawn. A result of 36 ms average latency rated Good, in a yellow arc, with See My Options under it. Then USB Bundle, still rated Good, recommending a Behringer guitar-to-USB interface on its own or with a USB-C adapter cable, each with a price and a cart button.
    The first version. The test: a latency, a rating, then the gear that would do better.

Sharing a tone

Players' own tones were meant to be one of the main streams of content, so the share flow was studied to remove every hindrance it could while asking only for what was essential. The first version's flow follows Twitter's, to stay inside a mental model players already had: a short description, the instrument, the pickup and the genre, then the tone is pushed to the app with the option to share it on social media.

The first version: sharing a tone

Share Your Tone, with Cancel and Share at the top. A field reads Describe your tone beside the player's avatar. Below it three rows, Instrument, Pickup and Genre, with Pickup greyed. Then the tone's chain as six drawn processors in their colours, one of them the yellow amp, and a Save as Draft switch, off.
The description typed, Great rock tone of Jimi Hendrix as he plays Little Wing, with #jimihendrix #rock #tele in blue. The keyboard is up.
Choose Your Instrument: a line drawing of an electric guitar over an Electric Guitar button, one of four pages marked by dots, with Back and Done.
Back on Share Your Tone, the Instrument row now reads Electric Guitar in blue, and Pickup is no longer greyed.
Choosing the pickup: a switch of Bridge, Middle and Neck with Bridge chosen, over a line drawing of a humbucker and a Humbucker button.
Share Your Tone with two rows filled in blue, Electric Guitar and Humbucker - Bridge. Genre is next.
A list of genres, none chosen: Pop, Rock, Metal, Blues, Country, Jazz, Alternative, Experimental, Classical and Other.
The same list with Rock chosen, its row filled blue with a tick.
Share Your Tone complete: the description, then Electric Guitar, Humbucker - Bridge and Rock in blue, the chain, and Save as Draft off.
The screen dimmed under a card reading Preset Shared Successfully, around a green tick over the chain. Under it Instagram reads Successfully Shared with a tick, then buttons for Share on Twitter and Share on Facebook, and a close button.

One interview finding never got solved. The advanced player among the three personas did not especially want to publish anything and was content keeping his tones to himself. Sharing was the whole premise, so that needed a convincing mechanism and never got one.

In players' rooms

From the first beta on, a colleague who is also a great guitarist ran detailed user tests, in players' own rooms wherever possible, on their own phones. Every session was watched and watched again, then turned into notes for the next iteration. The stills below are from those recordings: hands, screens and guitars.

  1. A test on a desk. A hand on the strings of an electric guitar at the left, its cable running into a small white interface lit blue, and on from there to a phone lying on a sheet of notes, open on the studio with its knobs lit yellow. A speaker stands behind.
  2. A tablet on a dark table, plugged into a white guitar interface at the top left. A hand points at the chain in the studio's left column.
  3. A tablet flat on a wooden table, open on the studio, a hand reaching across it to pinch one of the knobs.
  4. A tablet held sideways in two hands, a finger on one of the studio's purple knobs.
  5. A phone in one hand over a laptop keyboard, open on the studio with the P5550 amp's yellow knobs, a finger of the other hand on one of them.
  6. A phone held sideways in two hands over a laptop, open on the home feed, a column of tone cards over band photographs.

The version that shipped

The studio kept its four areas and its cards, and each card gained a handle. Explore gained a row of players under the banner, and a tone's name moved off the photograph onto a strip beneath it. The shipped version was drawn for a taller phone. The icon came out of moodboards and a long run of explorations shared with stakeholders for feedback. The team chose one and tried it on several mediums.

  1. Twenty application icon explorations in two rows of ten, on a dark ground. They run from a green fretboard and a blue humbucker pickup to a wordmark reading Solo, a concentric orange target, a yellow record groove, a hand making a rock sign, and several treatments of an S drawn as a bracket around a circle.
    Twenty of the application icon explorations, shared with stakeholders for feedback.

It shipped on the App Store and Google Play.

More case studies

See all 27