Building Setto 2: The Magic's In The Details
What makes a good transition?
Howdy y’all. In this week’s article, I’ll be talking about how version 1.2 came into fruition.
Version 1.2 was a real turning point for the app. It got featured by the App Store in the U.S. and Canada on both iPad and iPhone stores. Debuting as #4 on the U.S. Best New Apps List and Canada’s Hot This Week before climbing up to #3 on the iPad stores and occasionally clawing its way into the Top 200 Music apps list every once in a while in the UK, Canada, and the US.
In general, whenever I make a new feature for the app, I ask myself. “Is it easy? Can my mom use this with no explaining? Can I use this without touching the app or seeing the screen?” If the answer isn’t a strong yes, then the feature isn’t done.
This is an artifact of working in Feature Definition & Prototyping. Users never use the app in ways you expect, and if your app doesn’t account for this then you’ve got bad UX/UI. For example, whenever I demo users the app, I always see them use the like and X buttons but never the swipe mechanic, which is fascinating as the onboarding literally requires you to swipe a card.
What is Version 1.2?
Version 1.2 introduced Sets. The ability to have multiple taste profiles that are isolated from each other but somehow have seamless transitions.
On paper, it sounds simple. Just have multiple instances of the app. However, that’s the challenge. How do you make an app designed to be a single screen into multiple user curated instances? It’s a back end nightmare.
The Data
First thing I had to figure out was storage. How do we even keep instances apart and have data initialization be easy and fast? Since everything’s on device, I store all the app data as a JSON, so I had to grandfather in older users into this new multi set JSON structure. Each set gets its own isolated block. Its own seeds, its own bandit state, its own genre weights, its own listening events. No bleed between them.
The Transitions
I also had to figure out how to make a set transition seamless and show the user which set they’re in. Since the top bar was already being used for the Recap button, my initial idea was to make the title a dropdown menu with the current set name. This worked, but I quickly realised that this location was fine for rare actions like seeing your swipe history, but power users who change sets a lot wouldn’t like having to stretch to the top of the screen. Accessibility would also be an issue because with only one set present, the top bar doesn’t really look like a button. VoiceOver would read it out, but you wouldn’t know the title is a button if it’s too pretty.
Thus, I ripped out both buttons from the top and moved them to the bottom, next to the settings gear. This worked because we still maintained the visual hierarchy of the UI and it kind of felt like an iPod or retro music player by having all our buttons clustered around the play button.
On the topic of transitions. How do we make rapid set switches feel alive? Since Setto’s entire thing is making music recommendations quickly and in real time, we had to make it buttery. I chose to store the last played song and timestamp if the user had listened to more than 5 seconds. This means when you switch sets, it continues right where you left off. But I do allow the DJ to overrule this continuation rule under special taste circumstances that I won’t get into.
Moreover, does having multiple sets impact how many listening events we store so the user can see their swipe recap? If so, how do we scale it? The answer was a ring buffer. Each set has its own allocation, and they never compete for memory.
How Do I Make A Set?
Whilst I listen to music a lot and I’m very thoughtful about it, making sets after a long week and burnout is not for the weak, let alone a playlist. Hence the solution for how to make set crafting easy was Auto Sets.
It’s kind of like a Spotify Daylist but on device, on demand, and you get 4 instead of 1. Whenever you want. The idea was that instead of Setto having to work hard to figure out what your music taste is, we can just analyse your Apple Music library and mine your playlists for data and lore. The pipeline works like this: we scan your library artists and swipe history, weight them by engagement, build feature vectors, then run clustering to automatically find taste clusters.
For the actual design, and problems I should avoid, I studied Pandora as it was the closest comparison since it has the stations feature. Based on their experience, I concluded that allowing users to have infinite sets or auto sets would be the worst thing I could do. Sure, it’s fine when you just start using the app, but over time if you have 100 sets and then 1,000 and then 100,000, the app and the users just can’t handle that much. You end up with unnecessary data and noise everywhere.
Thus my decision to hard limit Sets to 5 and Auto Sets to 4. This is because on average most people can only keep 4 things actively in their mind. So with Sets, you create 1 on onboarding and I give you an allowance of 4 extra. And if you need help, you have 4 Auto Sets based on your Apple Music patterns.
Customization
Now that users can practically have 5 versions of the app installed, how do we make customization a thing? What settings are scoped to the current set versus the entire app?
First thing I did was figure out how to name the Sets. By default, creating a new set is a lot like the onboarding flow. You just pick artists and start swiping. The set name comes from which artist you pick first and a random phrase for the second half. So think “Drake & The Crew,” which is really cool because once in a while it can be really on theme. For example, having a British artist and getting “mates” as the second half would yield something like “Central Cee & Mates,” which feels appropriate for the audience. You can also rename sets whenever you want and see which artists are in it at a glance to help with memory tracking.
For scoping settings, I decided that if it involves the music, it’s a set scoped setting, and if it involves the app, it’s app wide. So aesthetics are app wide. And exploration mode and memory are set scoped.
What’s Next
In the next issue, I might talk about how I approach design, launch a new app or whatever the people demand (please leave comments).
It’s been really fun designing and giving Setto and its features a personality and I think it’d be cool to share how I get inspired.
If you have questions about Sets, Auto Sets, or the design decisions in v1.2, I’d love to hear from you. My information is at carlosmbe.com.
Setto on the App Store: Free, no ads, no accounts, no data collection. Just needs Apple Music.
Also, if you don’t have an Apple Music subscription but want to try Setto, I’m working on a new feature. Setto Previews. It’s a short form discovery experience using free song highlights and a brand new algorithm.
In case I don’t see you again, good afternoon, good evening, and good night.
Here’s a cool song I’ve been listening to: