After completing the initial research and discovery phase, Phase 2 focused on translating research insights into actionable design artifacts. This phase was critical in shaping the skeletal structure and initial interactions of the FanStrike app. Based on user personas, pain points, and opportunities identified in Phase 1, I moved into crafting the Information Architecture (IA), wireframes, and low-fidelity prototypes, which laid the groundwork for a seamless and intuitive user experience.

The first step in Phase 2 was to define a clear and intuitive Information Architecture that mapped out how content and features would be organised within the app.

Goals of IA Design:

• Reduce cognitive load during navigation
• Prioritise the most important user tasks (team creation, contest entry, performance tracking)
• Create a predictable and learnable structure

Process:

• Card Sorting: Conducted open card sorting sessions with sample users to understand how they grouped and categorized key tasks such as player selection, contest joining, and results viewing.
• Task Flows: Created end-to-end task flows for primary user goals (e.g., “Create a team and join a contest”), ensuring each step was logical and streamlined.
• Navigation Structure: Defined a bottom navigation pattern with core sections:
  • Home (Live matches & contests)
  • Create Team
  • My Teams
  • My Contests
  • Leaderboard/Profile

The IA ensured users could quickly find what they needed, with minimal friction and fewer screens between intention and action.

With the IA in place, I translated the structural design into low-fidelity wireframes to explore how users would interact with each part of the app. This stage was not about visuals, but about layout, hierarchy, and interaction logic.

Approach:

• Mobile-first design, keeping in mind the primary use case for users on the go.
• Prioritised key flows: onboarding, player selection, team creation, contest entry, and live tracking.
• Designed with scalability in mind, allowing additional features (like chat, referral, etc.) to be added later without disrupting the core flow.

Key Wireframes Created:

• Onboarding walkthrough: Short, goal-driven steps with benefits and permission prompts.
• Team creation screen: Tabs for player roles (BAT, BOWL, ALL, WK), filters, and budget management tools.
• Contest list view: Highlighted entry fee, prize pool, contest rules, and time left.
• Live match dashboard: Visual performance indicators, player score updates, and team leaderboard.

Each wireframe focused on delivering clarity of function, ensuring users wouldn’t get lost or overwhelmed while completing core tasks.

Next, I linked the wireframes into interactive low-fidelity prototypes using tools like Figma. These were essential to simulate the app’s flow and behaviour before diving into high-fidelity visuals.

Goals of Low-Fi Prototyping:

• Validate core user flows with users and stakeholders early
• Uncover usability issues before investing in detailed visual design
• Communicate intent clearly for feedback and alignment

Core Flows Prototyped:

• Account setup and onboarding
• Creating and editing a team
• Joining contests with single or multiple teams
• Tracking team performance during a live match

The clickable prototypes allowed users and stakeholders to experience the app’s logic and pacing, making feedback more actionable and contextual.

Once the low-fi prototype was complete, I presented the flow and structure to key stakeholders, including product owners, developers, and marketing leads.

Presentation Highlights:

• Walked through the user journey from onboarding to contest entry
• Showed how design decisions were grounded in user research (from Phase 1)
• Illustrated the simplicity and speed of creating a team, one of our key differentiators

Key Feedback Received:

• Positive: Stakeholders appreciated the intuitive flow, clear categorisation of players, and how contest details were made transparent and easy to understand.
• Suggestions:
  • Add a visual budget tracker during team creation for better clarity.
  • Enable saving incomplete teams for users who want to return later.
  • Include quick contest filters (by entry fee, prize pool, type) to improve discoverability.

Taking the feedback into account, I iterated on the prototypes:

• Budget Tracking Enhancements: Integrated a live budget meter that visually updated as users added or removed players.
• Draft Save Functionality: Added the ability to save incomplete teams and return later, with autosave prompts.
• Contest Filtering UI: Designed filter chips and a bottom sheet to allow sorting and filtering of contests without navigating away from the main list.

These changes were lightweight yet highly impactful, enhancing clarity and flexibility without complicating the user experience.

By the end of Phase 2, we had a validated structural foundation and a user-approved interactive experience. The wireframes and low-fi prototypes served as a bridge between research and high-fidelity design, aligning all stakeholders on direction and priorities.

This phase ensured that we were not only designing a visually pleasing interface but also building a product that was deeply aligned with real user behaviours and business objectives.

Having laid a strong foundation through user research, information architecture, and wireframes, Phase 3 focused on translating these functional blueprints into a visually engaging and interactive user experience. This phase also included building a scalable design system to ensure consistency across the app and conducting usability testing on high-fidelity prototypes to validate design decisions.

The transition from low-fidelity to high-fidelity design was more than just adding colours and fonts. It involved creating a visually cohesive interface that aligned with the app's goals: intuitive, exciting, and competitive, but also easy to navigate.

Design Objectives:

• Establish FanStrike's visual identity in a crowded fantasy app space.
• Use visual hierarchy and contrast to support quick decision-making.
• Ensure the interface works well under real-world conditions (e.g., low light, fast interactions during live matches).

Design Language:

• Colour Palette: A bold, energetic palette combining deep blues and dynamic accent colors (e.g., orange and lime green) to signal action, performance, and urgency.
• Typography: Clean, sans-serif fonts with varied weights for clarity and emphasis, helping users scan content quickly.
• Icons & Imagery: Custom iconography and player thumbnails were designed to enhance recognition and support quick actions.

Key UI Screens Designed:

• Onboarding: Illustrated walkthroughs showcasing key app benefits and a frictionless signup/login flow.
• Team Creation: Visually rich player cards with filters, roles, and real-time feedback on budget, credits, and team balance.
• Contest Lobby: Interactive cards with hover states, entry fees, rewards, and deadline timers.
• Live Match Dashboard: Score animations, player performance badges, and team comparison visuals to keep users engaged.
• User Dashboard: Clear summary of active contests, rankings, winnings, and match history.

Each screen was designed to maintain clarity under pressure, acknowledging that many users interact during live matches with limited time and attention.

To ensure long-term consistency and scalability, I developed a comprehensive design system that would serve both the design and development teams.

Key Components Included:

• Colour Tokens: Primary, secondary, tertiary, alert, and background colour variants with dark/light mode support.
• Typography Styles: Scalable text sizes with consistent spacing and line-height rules for headings, body text, labels, and UI elements.
• Grids and Layouts: Mobile-first responsive grid system and layout guidelines for modularity.
• UI Components: Buttons, tabs, cards, chips, dropdowns, modals, and loading states, with variants for size and state (e.g., default, hover, active, disabled).
• Interaction Patterns: Animation principles for transitions, microinteractions, and feedback (e.g., loading spinners, haptic-like cues for button presses).
• Icons: Custom icon pack aligned with FanStrike’s branding.

This design system not only improved development handoff efficiency but also ensured a consistent user experience as the product scaled and new features were introduced.

With the visual design complete, I developed clickable high-fidelity prototypes using Figma for key flows. This allowed us to conduct in-depth usability testing before development.

Core Flows Tested:

• Team creation from scratch
• Contest browsing and filtering
• Joining contests with multiple teams
• Viewing live scores and switching between teams
• Tracking player performance and contest rankings

User Testing Methodology:

• Remote testing with moderated sessions and screen recordings
• Task-based testing, e.g., “Create a team for today’s match and join a ₹100 contest”
• Participants from different user personas (newbies, casual gamers, frequent fantasy players)

Key Insights & Iterations:
Successes:

• Users found the app visually appealing and intuitive.
• The budget bar and player filters were frequently praised for clarity.
• Contest filters made it easier to locate preferred contests.

Opportunities for Improvement:

• Users wanted clearer status indicators in the dashboard → Solution: Introduced status tags like “LIVE,” “UPCOMING,” and “RESULTS.”
• Tapping on player stats needed better discoverability → Solution: Added subtle call-to-actions and tap animations.

Once final designs were approved and validated, I prepared detailed design documentation to support developers in implementing the UI with accuracy.

Assets & Specs Delivered:

• Figma components and screen flows linked to the design system
• Export-ready icons and images
• Interaction notes for transitions, microanimations, and loading behaviours
• Collaboration sessions with the dev team to clarify edge cases and responsive behaviour

The design-to-dev handoff was smooth and efficient, minimising back-and-forth and enabling faster build cycles.

By the end of Phase 3, FanStrike had a fully designed, visually branded, and user-tested experience ready for development. The high-fidelity designs, coupled with a robust design system and validated user flows, positioned the app for a successful launch.

Key Achievements:

• Delivered a scalable design system that improved speed and consistency across teams.
• Created a visually distinct UI that stood out from competitors in the fantasy gaming space.
• Achieved a 92% task success rate during usability testing with minimal onboarding friction.
• Reduced time-to-contest-entry significantly due to a clean, guided team creation flow.