LingoWatch Design (AI-Assisted)

The Idea

I like to practice my German during my daily walks. But I don't like taking my phone with me, and even if I do, I don't like to be constantly looking at its screen. So, it got me thinking: what's the other device that I always have with me, has a screen at which I can quickly take a glance but doesn't distract me, and could be a fun challenge to design an app for? My Apple Watch, of course!

The second piece of the idea is actually the key part. I want this app to simulate a real-life sentence-making during a conversation. You know what's crucially different in that from typical flashcards? TIME! When talking to someone, you have mere seconds or less to build your sentence. That's what I'm aiming here.

List of Decks

Let's start from the simple. The Decks screen is a simple list. Each item has a title, a color (user-selected) and its number of cards.

Question Screen (v.1)

As the content and the interactions are the star of the show, I want the question screen to be as minimal as possible. Nothing distracting, everything instantly readable.

As the first version of this screen, I only put the pieces of the sentence (the main content), below it the countdown bar, as time is the critical element of the practice. Of course, a menu icon is also needed to navigate to list of the decks.

But it seems that one item is missing: card number (e.g., 13/24). This required some thinking... Do users really need to see the number of the card? On one hand, it is an important progress indicator. Like, I would like to see how many cards I've practiced, and how many is left. On the other hand, minimalism!

I decided the progress is more important to ignore. So, where to put the card number?

My first thought was in the top navigation bar. The top right is not possible, as the time there is non-negotiable. I need the top left menu, obviously. That leaves me with the center. It is possible, but it goes against watchOS Human Interface Guidelines (HIG). So, what other option do I have? The bottom part. Cool, but then where do I put the time bar?! (I find this a fun challenge! The limited screen space makes you carefully think about every element).

Obviously, I can't have both the wide countdown bar and card number in the bottom part. So, I need to reshape the countdown. Circular progress indicator is a great alternative. It has a small footprint, while clearly counting down the time. I might even be able to put the time inside. Bonus!

AI tip: Animating this circular countdown is next to impossible in Figma Smart Animate. Even with everything perfectly set, Figma doesn't understand the circular transition to properly animate it. The animation you see is done using Claude (free, non-Design). It amazingly animated it by just a short description and gave me the SVG for the animation. The great thing about it was that the animation was embedded right into the SVG, so I could drop the SVG into Figma and it played it perfectly well in its preview (inside an Apple Watch frame)!

Btw, the color of the countdown circle and card number is the same as the deck color (duh!).

Version 3 – Another idea came to my mind (inspired by the printing screen I saw in a photobooth): Let's make the countdown part of the screen, not an element. What I mean by that:

I think this is the countdown I'll go with. Though, maybe I tone down the color to make it less distracting.

To Next Question (v.1)

Transition to the next question is another key part of the app. There are two results for the current question, hence two transitions to the next: "I've learned it" (PASS) or "I need to practice it more" (PRACTICE).

To design this interaction, my first idea is swiping. Given the limited screen space, swiping anywhere in the question screen. The question is though: To which direction?

If we consider a deck of cards, to put a card back somewhere in the deck, we typically move it UP. So, it makes sense to me that PRACTICE transition would be triggered by Swipe Up. Obviously, the reverse, PASS, would be Swipe Down. Good, but what meaning can I associate to swiping down for having a card learned?... How about "I've got it in my pocket!"? :)

Here is the interaction (designed by me, implemented by Claude) – you can try out the swiping:

Question Card (v.2)

Since the beginning of the project, I've had this dilemma: use a card visual vs. keep it minimal by having the content directly over the background. After the prototype with a card layout, I think this is the better design. It keeps the question/answer in focus, while providing a good space behind it for the countdown. Win-win!

To Next Question (v.2)

Now that we have the question card, we can set the same swiping interaction for the cards. Here is the implementation (by Claude). Swipe up/down and see :)