Gabor Patch

A mobile app concept that turns a research-style visual training task into a flow first-time users can follow.

Role

UI Design · Interaction Flow · Frontend Prototype

Impact

Designed the path from tutorial to task to records, so users know how to start, finish, and review a session.

Tools

Figma · Material Design 3 · Nuxt 4 · Vue 3 · Tailwind CSS · Canvas API

Design Highlights

Task Flow: mapped the full path from daily goal and tutorial through the task grid to completion and records
Interaction States: defined progress, correct and incorrect feedback, streak, and achievement states for repeated practice
Design System: built color, spacing, and touch rules on Material Design 3 tokens, including dark mode

Positioning

Turning a research-style visual task into an approachable app

Gabor patch recognition feels technical when it is shown like a raw experiment. I designed it as a simple app flow instead: learn the task, get ready, complete the grid, then check the result. I planned the flow, designed the mobile screens in Figma, and built a working Nuxt 4 prototype — the focus is whether the training experience is clear and usable, not proving clinical results.

Problem & Goal

Keep the task precise while making the flow easy to follow

The task asks users to notice small angle differences, but the real UX problem is more basic: users may not know what to look at, how many questions are left, or what their score means. My goal was to keep the task accurate while making the app easy to follow — the screen should not distract from the symbols, feedback should be clear but not noisy, and records should still make sense the next time users come back.

Key Decisions

Design around the training loop, not only the task screen

Added tutorial and result steps before and after the task grid, so users are not dropped straight into a confusing screen.
Kept only the question, progress, symbols, and feedback on the task screen, reducing visual noise around the stimulus.
Kept rewards, sound, and completion feedback light, so the screen never becomes game-like enough to pull attention away.

Key Screens

A focused task grid for subtle visual discrimination

These screens show how the app explains the task, keeps the training screen focused, and lets users review progress afterwards.

Gabor Patch tutorial screen explaining the principle and how to observe the symbols. — Tutorial: explains what to look for before the first question.

Desktop Gabor Patch task grid mid-session: the progress bar is filled past halfway and the symbol the user just picked is ringed, its stripes tilted differently from the rest. — Mid-session: a correct pick is confirmed by a ring on that symbol alone, while the progress bar above tracks how much of the round is left.

Desktop records screen showing streak days, a calendar, and training statistics. — Records: streaks, calendar, and basic stats for reviewing past sessions.

Mobile App Case

A flow designed for short daily sessions

Users start from a daily goal, enter the task, finish the session, then check records if they want to review progress.

A simple progress model shows how much of the current session remains.
Settings and audio controls let the experience adapt to different practice environments.

Mobile Gabor Patch task grid mid-session: a filled progress bar, the question at the top, twelve symbols in a three-column grid, and a ring on the one just picked. — Mobile task: three columns keep every symbol a comfortable thumb target, and the same ring confirms the pick.

Mobile records screen with streak days, monthly calendar, and training statistics. — Mobile records: calendar and stats stack so progress stays easy to scan.

Profile: level, XP, and badges act as small rewards for repeated practice.

Frontend Prototype Case

Prototyping the whole session, not just static screens

I built a working prototype so I could test the full session — progress, scoring, feedback, saved records, and the rest timer — instead of only designing screens in isolation.

Canvas rendering keeps symbol generation controllable and the task screen responsive.
Building the flow revealed state gaps that static mockups had hidden.

Desktop rest timer screen with countdown text and layered blue wave animation. — Rest timer: gives a calmer ending after a focused session.

Outcome & Checks

This project does not claim clinical results. I checked the prototype from a product experience angle: whether users can understand the task, read their progress, finish a session, and keep their records after moving between screens.

8 screens: Connected into one training flow
60 FPS: Task animation smoothness target
Mobile-first: Checked text legibility and touch targets

Reflection

Next iteration should make training progress more explainable

The prototype already covers the main task flow. The next step is the records page, so users understand what their score, streak, and difficulty changes actually mean.

Explain accuracy, streak, and difficulty changes more clearly in the records view.
Check whether the task still feels comfortable across different screen brightness and dark mode settings.