Skip to main content
← Blog

When the App Speaks — Conversational Guide Mode

VauDium ·

Building a guide mode that walks users through task creation like a conversation. The fecit icon asks questions, encourages, and wraps up.

When the App Speaks

Facing a Blank Screen

When you create a task in Fecit, there are many fields to fill: title, description, current situation, expectation, obstacles, tactics. Following the Minimal to Maximal philosophy, only the title appears at first — the rest unfolds when the user wants it.

But for new users, this structure itself can feel foreign. “Current situation? What am I supposed to write here?” Users need guidance on what each field is for and how to fill them in order.

A help page would be easy to build, but nobody reads those. The guidance needs to appear in context, right at the moment users are filling in each field.

The Guide Mode Idea

We added a small guide bar at the top of the task editing screen. It walks through five steps, asking one question at a time:

  1. What do you want to achieve? → Title
  2. Where are you now? → Target
  3. What outcome do you expect? → Expectation
  4. What obstacles must you overcome? → Obstacle
  5. How will you get there? → Tactics (Description)

Each step auto-focuses the corresponding field and scrolls to it. Users fill in content as if answering questions.

”Nice!”

Just asking questions feels like a survey. We wanted the feeling of something “speaking” to you.

Instead of jumping straight to the next question, an encouragement message appears first. “Nice!”, “Excellent!”, “That’s it!” — a short word of praise. It shows for one second before transitioning to the next question.

Ten messages appear randomly, never the same one twice in a row. A small detail, but it reduces the mechanical feel.

After the final step, a closing message — “All set! Let’s go!” — appears before the guide fades away.

The fecit Icon Speaks

Encouragement alone doesn’t tell you “who” is speaking. We pinned the fecit icon on the left side of the guide bar with a speech bubble next to it. The bubble’s tail points toward the icon.

The icon’s position mattered. If it moves with the content, it looks decorative. If placed where buttons go, it looks clickable. We fixed it on the left, separated from the close button, making the relationship clear: the icon is the “speaker,” the bubble is the “dialogue.”

Whether asking a question, encouraging, or wrapping up — the same icon speaks from the same spot. Consistent presence.

Wrestling with the Keyboard

The trickiest part of implementation was keyboard handling.

Focus transitions: Tapping “Next” on the guide bar blurs the current input field, dismissing the keyboard. Then focusing the next field brings it back up. This transition needs to feel smooth.

Auto-advance on keyboard dismiss: Beyond button taps, swiping down the keyboard also advances to the next step. We detect this via the keyboardDidHide event. However, calling Keyboard.dismiss() when the guide ends would re-trigger this listener, so we use a synchronous guideModeRef flag to guard against it.

Custom native modules: React Native’s Keyboard.dismiss() only targets standard TextInputs. Fecit uses custom Expo modules — ChipTextInput and RichDescriptionInput — so we needed a separate function that calls iOS’s UIApplication.sendAction(resignFirstResponder).

Getting the Scroll Right

When focus moves to each field, that field needs to be visible on screen. Since we use DraggableFlatList, scrollToOffset didn’t work — we had to call getNativeScrollRef().scrollTo() directly on the internal ScrollView.

Field positions are tracked via onLayout. Fields inside the analysis section (Target, Expectation, Obstacle) are nested within inner Views, so we sum the parent section’s offset with each field’s offset to get the correct content Y.

Timing between focus and scroll also matters. We focus first, then scroll after the keyboard has appeared. Since the keyboard changes the layout, we delay scrolling by about 400ms to ensure the scroll lands at the right position.

First Step

The current guide mode is a first step. It has the basic flow: ask, encourage, wrap up.

There’s plenty of room to grow. Reacting differently based on what users write, auto-showing the guide for first-time users, suggesting examples for each field. The goal is for the guide to be more than a tutorial — a conversation partner that helps you organize tasks better.

When the fecit icon speaks up, we hope the blank screen feels a little less daunting.