Experience

My responsabilities

  • User Research
  • Competitor Analysis
  • Wireframe / Prototype
  • Collect / Refine Feedback
  • Design Solution / Strategy

Deliverables

  • Android app design
  • Instructions / how to use
  • Styleguide for front-end devs
  • Presentations & Videos
  • UI Design hight fidelity

Important aspects

  • Deadline:- Dec, 15th - Sep, 1st
  • Look: Usable, fun, easy to use
  • User-level: Non-tech savvy
  • First release: MVP
banner

The objective

Concentrate the largest number of fans linked to sport and turn their participation into an important source of business for sports entities. To bring the user closer to their favourite club with a totally new experience. Our target market is segmented into 3 main groups. Active club members, stadium subscribers and finally, social media followers. During the regular season, we will create an internal competition / contest for fans, which will take place at every home (home) stage. The aim will be to score as many points as possible and climb the Powerfans (Club) Ranking. To score individual and group points, users will be able to participate in paid, subsidised and/or free events organised by the Club and its sponsors. The main event is the stadium interaction on match day, where fans can show their love for the club and support their players by playing ambient sound, songs and sound effects individually or in groups "peñas". on the pitch. To access the stadium interaction and paid content, users will need to purchase a virtual ticket, with a price ranging from €1 to €3 per match, depending on whether tickets are purchased per match, season tickets and/or if discounts for active members and season ticket holders apply.

The problem area

  • Economic crisis in the sports clubs due to the covid and the lack of public attendance.
  • Distancing between fan and club.
  • Lack of sports fan engagement tools.
  • Low monetisation of Virtual Hobbies
  • Live TV broadcast with little audience appeal.
  • Players without fan accompaniment in closed matches.

The Challenge

  • Capitalise and monetise the virtual fan base through the sale of Virtual Tickets, Advertising and FanCoins.
  • Organise a virtual competition between real fans with important prizes.
  • Transform the spectators into the protagonists of the match.
  • Analyse and segment virtual fans according to consumption patterns and social behaviour.
  • Increase social recognition for fans with higher participation and investment rates.
  • Obtain a high return with a low investment, during the pandemic and the day after.
  • Increase the Club's sports marketing engagement and conversion rates.

Goals

  • PWF sounds (AMBIENTATION)
  • Mini-games ( Event, Sponsor, Club)
  • Fan engagement tool
  • Big data
  • Group chat (COMUNICATION MEMBERS)
  • Aesthetics and branding
  • Tikets entry (GAMIFICATION)

The design solution

You can see, the prototype made in Figma

View the prototype

When gathering insights it's important to put aside your own opinions and accept what you hear and see. Here, are my sources:

Sports clubs representative

Talk to experts in the field and note down their strong advice.

Psychologists

study user behavior to understand interactions and motivations, enhancing product design.

User interviews

Observe, listen, and engage with potential users to uncover insights.

Groups , Forums & Webinars

I browse football club forums for fan opinions and attend webinars on sports clubs using technology for fan engagement.

User persona

Personal data

User data info

Gender : Male

Age: 38

Your area : Valencia

Jobs : Car salesman

Raúl Engra Martínez

Young sportsman, he used to play every Friday afternoon in a neighbourhood league with his friends, he loves everything related to football, he is a big fan of his club Valencia, although since he got married he doesn't usually go to watch the games live for economic reasons, sometimes he still watches them with a friend but it is becoming increasingly difficult and when he can he watches them at home with a beer. He works as a freelancer selling cars and has been in that business for more than five years, he is a consumer of games like fifa and also follows the league on social networks and likes to give his opinion. Competitive character but with a good character to lose, an endearing and friendly guy.

Social media

which social networks do you use

Facebook

Twiter

Youtube

TWICH

Instagram

Goals

What would you like from powefans..

  • You need to reconnect with your club High
  • Competing with others Middle
  • Found a football allianceLow
  • Win a match onlineHigh
Needs

What is important ...

  • Closeness and new experiences Middle
  • ProtagonismMiddle
  • CompetitionHigh
  • Give your opinionHigh
Personal Motivation

Persona’s drivers. What gives them a passion to use a product?

  • Disconnect from the outside worldLow
  • Having fun with hobbies Middle
  • Have your own virtual avatar and communityHigh
  • Virtual and real rewards with the application High
Frustrations

What's not to like...

  • Game loading timesLow
  • Not being able to go to the stadium, because of the economy.Middle
  • reduced playing timeHigh
  • Lack of mini-games at eventsHigh
Technology Use

Device list

Smart TV

Android Phone

Tablet

Windows 11 PC

MacBook Pro

Internet use

what user do on internet

Education

Shopping

Sports content

Social media

Personal bank manage

Competitor analysis

Analised the top sports fan engagement apps on Google Play or AppStore to collect negative feedback from actual users and improve it.

User data info

Empresa 1

fanfestapp

Empresa 2

myapplause

Empresa 3

socios.com

  • Childish design not in keeping with reality
  • Sound only in the stadium
  • High cost of materials when making mechanics and sound
  • Sounds only on the mobile terminal
  • Video uploading
  • Allow advertisements
  • Statuses with emojis
  • Direct Interaction with Fans
  • Virtual Currency and Rewards
  • Tokenización y Blockchain
  • Serious and credible

Top Common problems people face

  • Connection problems with the team.
  • Lack of Excitement in Sporting Events.
  • Global Participation Limitations.
  • Communication Problems with Other Supporters.
  • Difficulty in Gaining Rewards and Recognition.
  • Lack of Incentives for Participation.
  • Financial Return Problems for Teams.
  • Facilitating a smooth transition between the virtual and physical experience.

Emphaty map

Says

  • They comment and share their views on events in the chat sections.
  • Quick access to up-to-date information on teams and matches.

Thinks

  • Exciting and participatory experience by following events in real time.
  • The game depending on the rivalry can be more boring, it is important to enter into an alliance.

Does

  • They buy tickets and participate in event-related activities.
  • Keep them excited thanks to the scores you generate during the week to get to the event with more points.

Feals

  • I feel immersed in the sporting event experience thanks to real-time updates, detailed scores and active participation.
  • They have delay problems for some live sounds or challenges.

POV - Point of View

Sports clubs lose more than 30% of their revenue from tickets, boxes and season tickets. And it is subject to physical limitations.
FanMaster23's PowerFans Journey

FanMaster23's PowerFans Journey:

  • Registration:

    FanMaster23 discovers PowerFans through Real Madrid's social media and decides to register. He completes his profile and selects sports preferences.

  • FansCoins Acquisition:

    After registration, FanMaster23 purchases FansCoins to enhance his experience. He plans to customize his avatar, buy virtual tickets, and participate in challenges.

  • Avatar Customization:

    Using FansCoins, FanMaster23 customizes his avatar with Real Madrid kit and accessories, expressing his unique support during matches.

  • Virtual Tickets:

    Unable to attend a physical match, FanMaster23 buys a virtual ticket for an upcoming Real Madrid game, accessing exclusive virtual areas and contributing to the match atmosphere.

  • Active Participation:

    During matches, he actively engages through the app, voting, cheering, and participating in challenges, earning PowerFans Points and climbing the PWF Ranking.

  • Competition Among Fans:

    FanMaster23 joins virtual fanbase competitions, ensuring Real Madrid's fanbase is the most passionate. Winning provides virtual recognition and exclusive prizes.

  • Benefits and Prizes:

    Consistent participation boosts FanMaster23's PWF Ranking, granting access to behind-the-scenes content, store discounts, and exclusive virtual events with players.

  • Communication with Fans:

    PowerFans offers a chat and forum platform, allowing FanMaster23 to interact with global Real Madrid fans, sharing experiences, strategies, and discussing the team's performance.

  • Return to the Stadium:

    After virtual experiences, FanMaster23 attends a physical Real Madrid match, bringing the energy accumulated on PowerFans, knowing his virtual support extends beyond the physical stands.

Qualitative research

In-depth Interviews with Powerfans: Exploring Experiences and Motivations

  • QUESTION

    To start, can you tell us how you initially got involved with the platform?

  • QUESTION

    Interesting. Can you describe a specific experience you've had on Powerfans that you found particularly impactful?

  • QUESTION

    Fascinating. In terms of the user interface, is there any aspect that you found particularly helpful or frustrating?

  • QUESTION

    Can you elaborate on why you find the navigation complicated?

  • QUESTION

    Understood. Now, let's talk about the community on Powerfans. Have you had meaningful interactions in the chat or in activities related to events?

  • QUESTION

    Why do you find the chat important, and how does it contribute to your experience?

  • QUESTION

    Excellent. To wrap up, can you share what motivates you to continue using Powerfans and if there's an area you think they could improve?

  • ANSWER

    Certainly, I discovered Powerfans through club social media ads, announcing a trial with a maximum of 500 users. What really caught my attention was the promise of active participation during sports events and the sound playing in the stadium.

  • ANSWER

    Yes, I remember a game where I could predict the outcome of certain events within the match, like who would score the first goal. Getting it right earned me points and a real-time ranking. It was thrilling.

  • ANSWER

    I like how they present real-time statistics and live moments, but sometimes, I find the navigation to access certain features a bit complicated.

  • ANSWER

    I think there are too many steps to get to some functions. For example, to access challenges, I sometimes have to go through several screens. I would prefer key functions to be more accessible from the main screen.

  • ANSWER

    Definitely. In the chat, we discuss strategies, share emotions during games, and sometimes even organize small contests among ourselves.

  • ANSWER

    The chat is great because you can discuss strategies, share emotions during games, and feel part of a community. It's like being in the stadium but virtually, connecting with other fans.

  • ANSWER

    The interactivity during events is what keeps me hooked. But I think they could simplify navigation and maybe add more variety to participative activities to keep things fresh.

Key Insight Derived

Variety in Participatory Activities:

  • Finding: The need to add more variety to participatory activities highlights the importance of keeping the experience engaging and diversified.

  • Insight: Introducing new participatory activities can increase user retention and overall excitement.

Simplifying Navigation:

  • Finding: Complicated navigation is a critical issue.

  • Insight: Simplifying navigation is essential to improve the user experience and retain users by removing unnecessary obstacles.

Continuous Emphasis on Active Participation:

  • Finding: Active participation during sporting events is key to retaining users.

  • Insight: Maintaining and improving features that encourage active participation ensures a positive and sustainable experience.

Solutions

Solutions

Variety in Participatory Activities:
  • Issue: Lack of diversity in participatory activities.

  • Solution:Introduction of new challenge types, such as interactive polls during games or more specific predictions. Incorporation of themed events or surprises to maintain excitement.

Navigation Simplification:
  • Issue: Complicated navigation with too many steps.

  • Solution: Interface reorganization to place key functions directly on the main screen. Implementation of an intuitive and accessible navigation menu.

Continuous Emphasis on Active Participation:
  • Issue: Need to keep active participation as a central aspect.

  • Solution: Highlighting and promoting participatory activities on the main interface. Integration of more interactive and exciting challenges during sporting events.

Technical Implementation:

Development of New Challenges:
  • Collaboration with designers and developers to create and launch new types of interactive challenges.

  • Integration of more specific surveys and predictions to boost engagement.

UI Redesign:
  • Reevaluation of element layout in the interface to simplify navigation.

  • Creation of an intuitive and user-friendly navigation menu.

Showcasing Participatory Activities:
  • Implementation of promotional banners on the main screen to highlight participatory activities.

  • Improved visibility of themed events or surprises to encourage participation.

Expected outcomes:

  • Increased diversity in participatory activities.

  • Significant improvement in navigation ease.

  • Higher active participation during events, enhancing user retention and satisfaction.

  • This deliverable presents professional solutions to address identified areas of improvement, focusing on enhancing the overall user experience on Powerfans. The proposed implementations aim to elevate user engagement and satisfaction, fostering a more dynamic and enjoyable platform.

Live game

You can play inside to see the behaviour

Fan thermometer

Dynamic element, allowing users to gauge the enthusiasm or engagement

Navigation menu tabs

Easy and intuitive navigation to track stats and standings and return to the game

Chat menu

Provide instant and direct communication, general & alliance

Feedback

Notifies alliance and individual actions, shows the time played

Sound buttons scrollable navigation

Good sized buttons for quick selection for easy and accessible scoring and scrollable section.

Score points & info

Allows the user to view the score, the result of the game in real time, and allows you to leave the game

Home & Navigation menu

You can play inside to see the behaviour

Main section

Contains data info, and the most relevant part of engagement and its scrollable.

Top bars

Fixed on the screen, it contains notifications and breadcrumbs.

Menu

Notifies alliance and individual actions, shows the time played

Sketching ideas & solutions

Created the first sketches to produce some ideas. To identify issues, user-flows and try to come up with solutions.

Old version

old-image

Event game screen:

  • Streamlined Live Match Closure: The menu has been reconfigured to facilitate the closure of live matches, enhancing user control and efficiency during gameplay.
  • Enhanced Interactivity Feedback: The transition from slide to scroll bar for interaction sounds introduces a more intuitive and user-friendly experience, ensuring that users receive clear feedback during their interactions.
  • Revamped Top Header: The removal of icons from the top header in favor of displaying match results and accumulated points, alongside a browser for ranking and statistics, centralizes crucial information and simplifies navigation for users.
  • Visual Status Indicators for Bots: Bots are now visually represented within interaction cards, improving user understanding and interaction with automated elements in a more intuitive manner.
  • Refined Footer for Focus: The footer has been redesigned to eliminate unnecessary options that could distract from the primary focus – the game. Integration of the chat feature and key actions, such as feedback scores and partner interactions, ensures a more streamlined and purposeful user interface.
  • Real-time User Interaction Measurement: The addition of a thermometer to each device provides a novel approach to measuring user interactions in real-time, offering valuable insights into user engagement and system performance.
  • In summary, the strength of this section lies in its thoughtful enhancements, which not only streamline the user interface but also introduce intuitive elements, ultimately contributing to a more engaging and focused user experience.

Wireframes

Imagen 2

Final design

Imagen 3

Old version

old-image

Event statistics screen:

  • In the Powerfans Dashboard statistics update, significant changes have been implemented to optimize the user experience. General score views for the club and championship have been removed, consolidating them into the user's score page for a more focused experience.
  • Within the match score field, the display has been streamlined by replacing percentage bars with numeric values for clearer and more intuitive comprehension. Additionally, the alliance match score view has been introduced for users associated with an alliance, enhancing accessibility to this information.
  • The voting system is now exclusively visible during gameplay and can be accessed through the top navigation, while the footer has been replaced with a chat feature. This adjustment aims to facilitate more immediate and contextually relevant communication for users. These interface refinements seek to simplify the user experience, concentrating on pertinent information and enhancing usability within the gaming experience.

Wireframes

Imagen 2

Final design

Imagen 3

Old version

old-image

Home Powerfans:

  • In this UI redesign, key modifications have been made to enhance user accessibility and comfort. The main menu has been relocated to the center bottom for improved accessibility and consistensy like it is the live moment, while the inclusion of a welcome or navigation title ensures clarity. Consistency is maintained through the integration of outline iconography. C cleaner interface.
  • Score results are accompanied by a comprehensive review and ranking, offering users a more insightful overview.
  • Upcoming events are prominently displayed, accompanied by direct access with cards by alliance bookmarcs and next events list .
  • Removed option to enter code, now added from selected event
  • The section browser menu has beendeleted and changed on menu options. Instead, we have added the active challenges pending as being able to access them quickly or view the list is a functionality that was needed to create more engagement and improve usability.
  • A news section has been added with vertical scroll and direct access to the list.

Wireframes

Imagen 2

Final design

Imagen 3

Old version

old-image

Menu Powerfans:

  • Team Selection or Creation:I introduced the option to select my preferred team or create a new one for a more personalized experience. I incorporated clear and visually appealing team logos/icons for easy recognition. The process of creating a new team was designed with an intuitive flow, ensuring a seamless user experience.
  • Event Reminder with Date: I added a reminder for pending or live events to keep myself informed and engaged.
  • Base Navigation: I included navigation to different sections in the base area to streamline access to various features.
  • Reminder Interaction: I enhanced the event reminder's visibility and interaction to ensure users stayed engaged with upcoming events.
  • Accessible Navigation in the Base Area: I made navigation to different app sections easily accessible, simplifying user journeys.
  • By implementing these UI/UX improvements, the dropdown menu became a user-friendly and visually engaging component that enhanced personalization, event awareness, and navigation within the application.

Wireframes

Imagen 2

Final design

Imagen 3

UX Approach

Conduct usability testing to gather feedback on the navigation design. Iterate based on user insights, optimizing the navigation flow for enhanced user satisfaction.

Login to powerfans..

Streamlining - optimising the user experience for security and convenience, ensuring that the authentication process is as efficient and clear as possible

  • In the login system refinement, a Google login option has been incorporated, accessible through a dedicated link or button. To enhance security and streamline the login process, a designated field for entering the PIN code has been introduced, accompanied by a numeric keypad for user convenience.
  • Additionally, a "Forgot your PIN?" link has been included to facilitate the PIN reset process for users who may encounter issues. The system now offers instant visual feedback to communicate the validity of the entered PIN, contributing to a more user-friendly and responsive login experience.
login-carga login-carga login-carga login-carga login-carga login-carga login-carga

Navigation and home page dashboard

RELEVANCY - Prioritizing essential elements, our revamped interface provides a streamlined and user-centered experience with improved navigation.

  • The user interface has been revamped to provide an easy and intuitive navigation experience, prioritizing essential pages for user engagement. The home page now prominently features key elements such as rankings, scores, news, and upcoming events, challenges and news ensuring users can quickly access the most engaging content.
  • For enhanced user convenience, a direct play option has been integrated, allowing users who have previously purchased a match to initiate gameplay directly from the home page. These changes aim to streamline user interaction, placing emphasis on important features and facilitating seamless navigation for a more user-centric experience.
  • Add the possibility to play directly if the user has previously bought the match.
login-carga login-carga

Streamlined Live Match Closure

gamification - funny and colaborative game

  • Setting Game: The introduction of a setting game enhances user immersion, providing an engaging environment and contributing to an enriched overall gaming experience.
  • Fan Thermometer: The incorporation of a fan thermometer adds a dynamic element, allowing users to gauge the enthusiasm or engagement of the fan base in real-time, fostering a sense of community.
  • Points Display: The clear visualization of points ensures users can easily track their progress, contributing to a more transparent and motivating gameplay experience.
  • General, Personal, and Group Statistics Mode: The inclusion of comprehensive statistical modes for general, personal, and group performance provides users with valuable insights, fostering competition, and collaboration within the gaming community.
  • Dynamic Event Ranking: The dynamic event ranking system introduces a real-time and evolving competitive aspect, encouraging ongoing participation and creating a sense of excitement and achievement.
login-carga login-carga login-carga login-carga login-carga login-carga login-carga login-carga login-carga login-carga

Event Ticket Purchase

EVENT CALENDAR - VIRTUAL TIKETS

  • Accessing the Event Calendar, Users begin by navigating to the Powerfans app , where they find the "Event" section.
  • Users can scroll through the event calendar to view details of each event, such as date, time, location, and a brief description.
  • Users can see the status of the event, if it has started, if it is bought, how much time is left etc..
  • The user can mark the event as a favourite, a pre-notification will arrive before the day of the event as a reminder and it will be marked in the list.
  • Upon finding an event of interest, users click or tap to access a dedicated event page with comprehensive details.
  • Including event highlights, guest information, and any special promotions.
  • A prominent "Checkout" button guides users to the next step.
  • Users receive a confirmation message upon successful payment.
  • Users receive digital tickets via email .
  • Users confirm the code in the aplication and will be redirect to this event.
login-carga login-carga login-carga login-carga login-carga login-carga login-carga login-carga

Event Ticket Purchase

EVENT CALENDAR - VIRTUAL TIKETS

  • Accessing the Event Calendar, Users begin by navigating to the Powerfans app , where they find the "Event" section.
  • Users can scroll through the event calendar to view details of each event, such as date, time, location, and a brief description.
  • Users can see the status of the event, if it has started, if it is bought, how much time is left etc..
  • The user can mark the event as a favourite, a pre-notification will arrive before the day of the event as a reminder and it will be marked in the list.
  • Upon finding an event of interest, users click or tap to access a dedicated event page with comprehensive details.
  • Including event highlights, guest information, and any special promotions.
  • A prominent "Checkout" button guides users to the next step.
  • Users receive a confirmation message upon successful payment.
  • Users receive digital tickets via email .
  • Users confirm the code in the aplication and will be redirect to this event.
login-carga login-carga login-carga login-carga login-carga login-carga login-carga login-carga

Community team play

Alliances - create alliance, join and comunicate and grow wih a community

  • Designed a visually appealing and intuitive interface for easy creation and joining of alliances. Used clear icons and straightforward language to guide users through the process.
  • user-friendly dashboard for leaders to write notifications, manage challenges, and ban users, intuitive controls for efficient leadership actions
  • User leader can write notifications and choose and manage who will made the challenges, also can ban users.
  • Design a straightforward process for users to leave an alliance, ensuring clarity and minimizing potential frustration. Include a confirmation prompt to prevent accidental exits.
  • Simplify the invitation process for leaders. Implement an inviting and responsive design for internal and external user invitations. Provide a clear interface for managing sent invitations.
  • The indivudual points will define the position and jerarchy inside Alliance
  • The lead can marck event as favourites and others members will get a notification and this event status changed.
login-carga login-carga login-carga login-carga login-carga login-carga login-carga login-carga

Competition by ranking

Ranks - Presenting relevant information, such as awards and positions, in a clear and visual way improves the user's decision-making.

  • Gamification: Incorporated club colors and distinctive elements. Displayed points and achievements visually, with intuitive buttons for navigation.
  • Clear breackpoints and user location on the table.
  • Allow users to easily navigate between tabs and explore prize information effortlessly.
  • Also navigate directly to detailed prize notifications for a comprehensive and user-centric experience.
login-carga login-carga
login-carga login-carga

NEWS

News - allows the user to be informed about the powerfans' environment as well as their fan club.

  • Keeping Users Informed: Delivering updated and relevant news directly within the ranking environment keeps users informed without the need to navigate away from the platform.
  • The inclusion of news alongside ranking information consolidates crucial data in one place, facilitating easy access to significant content.
  • Improving User Retention: Offering additional content, such as sports event news or community updates, enhances user retention by providing a more comprehensive and engaging experience.
  • Allow users to easily navigate between tabs and explore prize information effortlessly.
  • Encouraging Continuous Participation: Providing relevant news fosters ongoing participation and user engagement with the platform, creating a more enriching experience.

Notification

Notification - allows users to revisit their interactions but also provides meaningful insights into their engagement and achievements over time.

  • Timely Communication: Notifications ensure users receive timely updates on achievements, challenges, or any significant events, enhancing communication efficiency.
  • The inclusion of news alongside ranking information consolidates crucial data in one place, facilitating easy access to significant content.
  • Implement a dedicated section labeled "Read" where users can review previously read notifications. Use clear visual cues to distinguish read from unread notifications.
  • Create a distinct section labeled "Awards" where users can access notifications related to their accomplishments.
login-carga login-carga

Challenges

Challenges - allows users to revisit their interactions but also provides meaningful insights into their engagement and achievements over time.

  • I ensured a seamless transition to the challenges once loaded, minimizing wait times for users.
  • I ensured clarity by visually indicating whether a challenge could be performed simultaneously or if it required sequential completion.
  • In alliance challenges, I dynamically updated the result card as participants completed the challenge.
  • I crafted congratulatory modals for winners and encouraging modals for participants who did not win.
  • I included motivational messages and displayed earned points, using a clear call-to-action for users to proceed to the next challenge
  • I organized challenges by type (sponsor, PowerFans, club) and tagged them with details like "Created by Alliance" for quick recognition.
  • I implemented filter options, allowing users to effortlessly navigate through challenges based on their preferences.
  • Crafted visually appealing challenge cards with clear labels indicating the challenge type, creator, and relevant tags.
  • I designed a dynamic loading page with engaging visual elements, signaling that challenges were being loaded.
login-carga login-carga login-carga login-carga