Skoove

Tools

• Figma
• Claude Design

In March 2022 Skoove set me a design task. Its iPad dashboard, the brief said, looked scattered, and it asked what I would change and for a rough first draft of the first page. This is my answer: a first page that opens on the course you are in, with Courses and Songs each in a room of its own, your level at the top where you can see it and change it, and one line that says how far you are. Nothing shipped. The screens on this page are that first page as a working iPad prototype, made in a Claude Design canvas. I directed it and Claude built it.

Open the iPad prototype

Prototype. The courses, the progress and the songs are sample data: twenty real songs by title and artist, with generated covers.

It runs. See it running, at the foot of this page, opens the prototype at its own size in a new tab.

The brief

Skoove's brief described the dashboard as it was. The main navigation sat behind a menu icon, your level in a dropdown, and a button led to the songs for that level. Under those came the lesson you were in, featured songs and a list of all courses. Then one sentence of verdict: "Currently, the UI solution of the Dashboard looks scattered." And one question: "What UI optimizations would you consider?" They wanted the answer explained, and a rough first draft of the first page viewport in Sketch or Figma. My captures of the app's dashboard are dated 6 March.

The wall

Four days later I had a wall. Thirty-nine notes, dated 10 March, under five headings: Layouts, What to Do, Progress, Encourage and Navigation. Layouts was seven pen sketches of the page with no words on them, so it is not on the board below; the three I followed are further down. Everything with words on it is here as I wrote it. My presentation summed the wall up in three words, Navigate, Encourage and Progress, and most of the notes fall under the first. Two went straight into the sketches: the levels split into Beginner 1, 2 and 3 and so on, which is where the nine steps of the level picker come from, and progress rings in the style of the Apple Watch. The wall asked for more than the first page took. A reminder, a streak, more than one profile, a button to purchase: those are still notes. What the page kept from Encourage is one line above the courses, worked out from where you are.

Before sketching I went through seven apps for their layouts: Netflix, Amazon Prime, Apple TV, MUBI, Uberchord, Simply Piano and Flowkey. I kept screenshots and no notes, so I am not going to claim what each one taught me.

Two ways to learn

The brief's word was about the look of the page, and I read it as a symptom. Skoove teaches piano two ways, through courses and through songs, and both lived on the dashboard at once. Some learners go through them in step: a course, then a song, then the next course. That is the regular path. Others do two courses, then three songs, then two courses again, and come back to a song whenever they want to. That is the irregular path, and it is the one I designed for. The dashboard as it was gave both kinds of learner the current lesson, featured songs, every song and every course on one screen, and left them to find their place in it.

Two rooms

So the proposal was an information architecture before it was a layout. As it was, seven things hung off the home screen: the menu, the level selector, all songs, current songs, current courses, featured songs and all courses, and current courses and current songs pointed at each other. In mine, the home screen leads to two rooms, Courses and Songs, with settings, support and your profile beside them. Courses holds all courses and the ones you are in. Songs holds recently played, your repertoire, genres, trending and featured. Both rooms lead to the same level selector.

Sketches

Then pen. A rail on the left with Courses and Songs, the level at the top as a pill with its three dots, and the course cards in a row, a ring on the one you are in. The second sketch put one course in focus in the middle, bigger, the finished one to its left and the rest running off both edges. The third was the Songs room, cards in rows. The first page took the second.

Courses and Songs

Courses opens on Continue learning. The course you are in sits in focus, and the line above it says what is left: three lessons to finish Rhythm & Timing. A finished course gets a check and Review anytime. One you have not started shows its first lesson. Play opens the lesson in Skoove's player, which is outside this page, so here it is a toast. The level pill opens a picker with nine steps, three each for Beginner, Intermediate and Advanced, and changing it changes the row. See all courses is the catalogue, by level and then by topic.

Courses

01/ 08

The course you are in, in focus. The line above it is worked out from your progress.

A finished course: a check, and Review anytime.

A course you have not started shows its first lesson.

Play hands off to Skoove's player. Here it is a toast.

Nine steps, three to a level. The split is the wall's.

Beginner 2. The row changes with the level.

See all courses, by level.

And by topic.

Prototype. The courses, the progress and the songs are sample data: twenty real songs by title and artist, with generated covers.

Songs is its own room: recently played with how far you got, your repertoire, genres, trending and featured, and a search that covers the whole library and not only your level. Playing a song hands off the same way.

Songs

01/ 05

Recently played, with how far you got, then your repertoire.

Genres, each name at 40 pt on its own colour.

Trending and Featured, every song with its level.

Search, with a live count.

No results says what to try, and that search is not limited to your level.

Prototype. The courses, the progress and the songs are sample data: twenty real songs by title and artist, with generated covers.

The walkthrough is silent: thirty-eight seconds through the carousel, a level switch, the catalogue, the Songs chips and a search. See it running opens the prototype itself, at its own size, in a new tab. It is made for an iPad held sideways, so on a phone it is small but whole. Everything past the first page, the lesson and the song, is Skoove's, and the prototype hands it off with a toast rather than pretending to play.

Prototype. The courses, the progress and the songs are sample data: twenty real songs by title and artist, with generated covers.

This is concept work from a design task. It is not Skoove's app, and it is not affiliated with or endorsed by Skoove.

The parts

The prototype runs on a small token set made for this concept, not Skoove's design system: a pine green, a paper ground, a lime aura behind the page, and a colour for each genre. Bricolage Grotesque for display, Figtree for text. The ratios below are worked out from the hex values, not typed in. Every pair clears AA but one: tertiary text on the aura at its strongest measures under 4.5:1, and it is shown as it measures.

The components, from the same board: the rail, the level pill and its picker, a course card in its three states, the play control, a catalogue card, the section chips, a song card, a genre card, and the buttons and the toast.

Prototype. The courses, the progress and the songs are sample data: twenty real songs by title and artist, with generated covers.