Figma Screens Expansion & UX

Current Screens & General Expectations

Some screens in the current app deviate from the original designs due to technical limitations and user feedback (e.g. ranking list, subset steps, set creation flow).

Design Alignment
• The existing Figma documentation must be reviewed, merged, and fully synchronized with the live application design.

Micro-Interactions & Animations
• Users report that the app feels too static.
• Subtle animations should be introduced to improve perceived quality and engagement.
• Examples:
• Light bounce or feedback effects on buttons
• Animated progress bars in the weekly summary section on the Profile screen

⸻

Core Objective: Aggressive Onboarding
• The initial user journey must be redesigned to be more persuasive.
• Key focus areas:
• Clear value proposition
• Habit formation
• Premium conversion
• The mindset should shift from:
• “Unlock this with Premium”
• to “This is what you are missing without Premium”

⸻

Color Palette

Primary Green
• The current brand green looks dull, especially in Dark Mode.
• We want to switch to a more vibrant green, similar to the tone used by chess.com.

Extended Color Palette
• A predefined palette for Red, Yellow, and Blue is required to maintain visual consistency.
• Currently, ad-hoc color selection causes visual fragmentation.
• Examples:
• Orange tones for “Streaks”
• Blue tones for the “Premium” screens
• Brand-approved hex codes are required for all colors.

⸻

Reading Text (Subset Reading)
• The audio playback screen for reading texts currently uses very basic play/pause controls.
• This screen requires a more polished and modern design.

Interactive Vocabulary
• All vocabulary words included in the subset must be displayed in bold within the text.
• Tapping a word should open a tooltip showing its Turkish translation.

Playback Speed Control
• A UI is required to allow users to choose between Slow, Normal, and Fast narration speeds.

⸻

Premium Incentives

Inspired by the chess.com mobile app.

Non-Intrusive Banners
• Instead of relying only on a dedicated Premium page, implement dismissible dashboard banners.

Engagement Popups
• Design a scrollable popup that highlights Premium benefits in a clear and engaging way.

Membership Visibility
• A Premium badge exists on the Profile screen.
• However, the Home screen does not indicate membership status.
• Users should be able to see their Premium status without navigating to their profile.

⸻

Pricing & Monetization Models
• We do not offer a “Day X Free Trial.” This must be clearly reflected in the design.

Lifetime Premium
• A one-time purchase “Lifetime Premium” option is being introduced.
• Placeholder price: 1100₺

Paywall Optimization
• The modal shown when a user taps a Premium-only subset must be redesigned to be more persuasive and easier to understand.

⸻

Widgets

We plan to implement widgets similar to those used in Duolingo.

Social Proof Widget
• Example: “Earn X more points to overtake Y users.”

Retention Widget
• Display the current Streak count to encourage daily engagement.

⸻

Premium Success Screen
• Users can upgrade using coupon codes.
• A “Redeem Coupon” tab has been added to the Settings screen.
• The success screen shown after a successful redemption requires a professional redesign.

⸻

Dashboard Banners
• A swipeable banner area has been added to the Dashboard for promotions and announcements.
• We need design feedback and layout suggestions regarding placement and visual hierarchy.

⸻

Social Media Integration
• The Settings screen should include a dedicated section encouraging users to follow us on:
• Instagram
• Facebook
• YouTube
• LinkedIn

⸻

Ranking & Gamification

Incentive Popups
• Trigger motivational modals such as:
• “Earn just X more points to surpass Y users. Spend 5 minutes now to climb the leaderboard.”
• These popups do not need to be limited to the Ranking screen.

Streak Progress Screen
• The screen shown after the first daily session (weekly progress + flame animations) needs a complete visual and UX overhaul.

⸻

Set Sharing (New Features)

User Search
• Users should be able to search for other users and view their profiles.

Public Sets
• If a user chooses to share a set they created, it should be visible to others on their Profile.

Library Reorganization
• “My Sets” and “Studied Sets” are currently mixed, causing navigation issues.
• A tab-based system or a clear visual separation is required.

Sharing Flow
• A clear “How to share your set” guide or flow should be added to the Set Detail screen.

Creator Analytics (Premium Only)
• Set creators should be able to see a list of users studying their sets.
• Tapping a user should reveal:
• Completion percentage
• Time spent
• Word repetition counts
• Detailed analytics should be accessible only to Premium creators.

⸻

UI Improvements
• Ability to pin 1–2 sets to the top of the list.
• Subset list structure:
• First 2 question types: Learning
• Next 2: Improving
• Remaining types hidden under a collapsible section to create a faster sense of achievement.

⸻

Vocabulary Study Screen

Peek Answer
• Users want to see the correct answer without being forced to select an incorrect option.
• A “Show Answer” mechanic is required.

Reset Progress
• Users should be able to reset progress:
• Per set
• Or across all sets

Session Guidance
• Clearly communicate approximate session duration.
• Allow users to exit without losing points.

Repetition Management
• We use Spaced Repetition (SRS), but some users find it repetitive.
• The UI/UX should better explain why certain words reappear.

Focus Modals
• Completion modals shown at 50%, 75%, and 100% must feel more rewarding and less repetitive.

Spell-Check (Letter Placement)
• The current layout is inefficient for long words or phrases.
• We have pivoted to a Memrise-inspired design and need an expert review for layout and color consistency.

Post-Study Action
• After a session, prompt users to view the Reading Text via:
• A modal, or
• A button on the stats screen.

⸻

Set Detail & Subset Modals
• When a subset is selected, a modal opens to choose a question type (Multiple Choice, Fill in the Blanks, Spelling).

Progress Indicators
• Each question type should display its progress percentage.

Status Chips
• Learning, Improving, and Mastering chips need refined placement and color coding.

⸻

App Rating Flow

To improve App Store and Play Store ratings, we need a custom feedback flow:
1. Initial question: “Do you like the app?”
2. If Yes:
• Trigger the native iOS / Android rating modal
3. If No:
• Open a multi-line feedback input
4. Closing:
• Display a “Thank you for your feedback” message

This entire flow requires a professional UI redesign.

⸻

New Question Type: Word Matching
• Users match 4 English words with 4 Turkish translations.
• Integrated into the study flow to increase pace.
• Reward: 4 points for a full match.

⸻

Loading Animations

Splash Screen
• A custom startup animation incorporating the Puruva logo/text.
• Plays until initial services respond.

Global Loader
• Replace the current generic loading animation with a more modern alternative.

⸻

New User Onboarding (Welcome Screen)

Current State
• A Login button exists in the top-right corner.
• Selecting a set triggers a Login or Demo prompt.

New Approach
• Remove the top-right Login button.
• Use a clean, semi-transparent overlay with three clear options:
• Login
• Sign Up
• View Study Demo

Flow
• If Demo is selected, the user enters the Demo Set immediately.
• Once the session ends, the flow should naturally guide the user back to the Sign Up / Login screen.