Kick & Connect - A redesign for a responsive Web/Mobile App

Role: UX Designer

Kick & Konnect is a dynamic mobile and web application tailored for amateur football enthusiasts looking to connect, organize, and participate in local football matches. This project involves a comprehensive overhaul of the existing FootyAddicts.com platform, enhancing user experience and functionality. The app features innovative tools such as interactive leaderboards, a mobile interface for easy navigation, and community-focused elements to foster a united and competitive spirit among users.

Problem Statement

The existing platform faces challenges that could hinder user engagement and satisfaction. The website does not have any real way to promote community engagement and interaction which could result in a lower user retention. Although both the Web/Mobile applications serve their purposes, the actual design looks old and mundane with very little attention paid to design work.

Goals & Metrics

  • Enhance user experience by redesigning the UI of both the Web/Mobile Application ensuring the new design is modern and easy to navigate through.

  • Increase User Engagement: Introduce community features that would create more interaction between users and the application itself.

  • Improve Desktop/Mobile Usability: by redesigning the interface(s), the aim is to ensure it is more user-friendly and intuitive.

  • Foster Community Spirit: Implement features that encourage social interaction and community building such as discussions posts and group events.

  • Promote a competitive spirit among users through interactive elements and community-focused features.

Research

The first step in research for the application to be a success was to understand the strengths and weaknesses of the current platform being used. I analysed the pros and cons of both the Web/Mobile application and focused analysis on key areas such as:

  • Usability Experience

    First I conducted usability testing sessions with a diverse group of users. Additionally, heuristic evaluations were done to identify any design inconsistencies or usability issues. Users reported that the overall experience of the app was subpar. The registration process, although seamless, did not compensate for the cluttered interface that followed. The lack of responsive design elements made the mobile experience frustrating.

    These insights led to putting a lot of priority on amplifying the app’s vision for what one could consider modern visuals, ensuring a more intuitive layout, and enhancing the mobile usability to provide a seamless experience across all devices.

  • Community Engagement Features

    User surveys and interviews were used to gather feedback on the community features. Usage data was later analysed to understand how users interact with existing features like forums and messaging. The platform lacked robust community engagement tools, which resulted in low interaction levels. Users expressed a desire for more interactive features such as real-time messaging, forums for discussions, and tools to organize community events.

    To address these issues, I also made sure to put a focus on integrating advanced community features, including interactive messaging systems, event promotion tools, and leaderboards to foster a competitive yet united community spirit.

  • Overall UI Design

    Finally, I conducted competitive analysis to benchmark against top-performing sports community platforms. Aesthetic evaluations were also performed to identify outdated design elements. The current UI was outdated and cluttered, negatively affecting user engagement and satisfaction. There was a clear need for a modern, clean design that could attract and retain users.

    The redesign aimed to introduce a modern and clean visual design with consistent visual elements and intuitive layouts. Input from User Feedback was incorporated to ensure the UI was both attractive and functional, enhancing the overall user experience.

User Interviews

Interviews were done with 10 of the app users to gather insights on their experiences with the current Footy Addicts Platform. The interviews were conducted in a semi-structured format and was done after games at venues that were hosted on the app.

Target interviewee

  • A registered user on FootyAddicts that uses both mobile and web application.

Learning Goals

User Findings

The findings from the interview were placed into 5 main categories in order to create a more solid frame and foundation for our design moving forward

Prioritising Reequirements

The findings from our research were organized on an affinity map to better understand their relationships and determine our priorities moving forward in the redesign process. With a focus on enhancing usability, community engagement, and overall UI design for Kick & Konnect, we created an affinity map to highlight the key areas of impact and ease of implementation. These prioritised values helped guide the redesign of Kick & Konnect, ensuring that the platform not only meets user needs but also provides a modern, engaging, and seamless user experience. By focusing on high-impact and easy-to-implement solutions, we aim to enhance the overall usability and community engagement of the platform

Ideation

I facilitated several design sprints to generate sketch ideas to solve the problems identified in the current Footy Addicts platform. This was then followed up by handling the redesign of the app. During the process, I redesigned and overhauled both the web app and mobile app completely with a touch up on the brand too - The app focused on enhancing community interaction, and modernised UI design. The goal was to provide users with clear instructions, intuitive navigation, and engaging features that would foster a sense of community and improve overall user satisfaction.

Lo-Fi Wireframes

After developing initial UI sketches, I translated the finalized ideas into lo-fi wireframes and built clickable prototypes for validation testing. One of the biggest challenges we faced was ensuring that the new design addressed the identified pain points without overwhelming the users with too many changes at once.

Key areas of focus included:

  • Navigation Simplification: We streamlined the navigation to make it easier for users to find and join games.

  • Community Features: Added new community engagement tools such as interactive messaging and event promotion features.

  • Modern UI Design: Implemented a clean and modern visual design to replace the outdated and cluttered interface.

Hi-Fi Wireframes

After successfully refining the lo-fi wireframes through iterative testing and feedback, we moved on to creating high-fidelity (hi-fi) wireframes. These hi-fi wireframes aimed to provide a more realistic representation of the final design, incorporating detailed visual elements, color schemes, typography, and interactive features.

Key Enhancements in Hi-Fi Wireframes:

  • Visual Design: Implemented a modern and clean aesthetic with consistent color palettes, typography, and iconography to enhance the visual appeal and user experience.

  • Interactive Elements: Added interactive components such as hover states, clickable buttons, and real-time updates to simulate the actual user experience.

  • Responsive Design: Ensured that the design was responsive and provided a seamless experience across various devices, including desktops, tablets, and smartphones.

  • Enhanced Features: Further developed community engagement features like forums, messaging systems, and event promotion tools, making them more intuitive and accessible.

Hi-Fideltiy Design Work (5 Pages - 2 Applications)
https://www.figma.com/design/QMXgwIL4BPd205PAHSOgH5/Kick%26Connect-Apps?node-id=0-1&t=NuFIkMZJktj80twM-1

Clickable Hi-Fidelity Prototypes

Web app: https://www.figma.com/proto/QMXgwIL4BPd205PAHSOgH5/Kick%26Connect-Apps?node-id=0-1&t=NuFIkMZJktj80twM-1

Mobile App: https://www.figma.com/design/QMXgwIL4BPd205PAHSOgH5/Kick%26Connect-Apps?node-id=186-2703&t=NuFIkMZJktj80twM-1

Validation Testing

To ensure the hi-fi wireframes met user needs and expectations, a series of validation testing sessions were conducted with a diverse group of users. These sessions aimed to gather in-depth feedback on the design, usability, and functionality of the platform.

Testing Process:

  • User Selection: Initial same 10 participants who did the interview took part, this was to try and provide a balanced perspective.

  • Scenario-Based Testing: Users were given specific tasks to complete within the prototype, such as finding and joining a game, using community features, and navigating through the platform.

  • Feedback Collection: Both qualitative and quantitative feedback were collected through surveys, interviews, and usability metrics to understand user experiences and pain points.

Key Findings:

  • Positive Reception: Users responded positively to the modern design and found the interface visually appealing and easy to navigate.

  • Improved Usability: The simplified navigation and enhanced game organization tools were highly appreciated, making it easier for users to find and manage games.

  • Engagement Features: The new community features received favorable feedback, with users expressing excitement about the interactive messaging and event promotion tools.

  • Areas for Improvement: Some users suggested minor tweaks to the color scheme for better readability and recommended additional tooltips for new features.

Iterative Refinements: Based on the validation testing feedback, we made several refinements to the hi-fi wireframes:

  • Adjusted the color scheme to improve readability and contrast.

  • Added tooltips and onboarding tutorials to help users familiarize themselves with new features.

  • Fine-tuned interactive elements to ensure smooth and intuitive interactions.

Afterthoughts and Takeaways

The Kick & Konnect project was a challenging yet rewarding experience. Redesigning the platform for amateur football enthusiasts involved comprehensive research and iterative development, which I handled solely.

Key Takeaways:

  1. User-Centered Design:

    • Understanding user needs and behaviors was crucial. Thorough research and validation testing ensured the redesign met user expectations and provided a seamless experience.

  2. Iteration is Key:

    • Multiple rounds of wireframing and testing refined the platform. Each iteration brought the design closer to user needs and business goals, highlighting the importance of flexibility in UX design.

  3. Balancing Aesthetics and Functionality:

    • Creating a visually appealing yet functional interface was essential. Striking a balance between aesthetics and usability remained a key focus.

  4. Effective Communication:

    • Clear documentation and comprehensive prototypes helped convey the design vision and ensure alignment with stakeholder expectations.

  5. Embracing Challenges:

    • Tackling challenges such as redesigning complex navigation and integrating new features provided valuable learning experiences and contributed to personal growth.

Final Reflections

Completing the Kick & Konnect redesign as a solo designer showcased the importance of perseverance and user-centered design principles. Positive feedback from validation testing affirmed the value of the efforts invested. The experience deepened my understanding of how well-executed UX design impacts user satisfaction and engagement.

In conclusion, the Kick & Konnect project was a significant milestone, demonstrating the power of thoughtful design to transform user experiences. I am proud of the work accomplished and excited to apply these lessons to future projects, contributing to the creation of engaging and user-friendly platforms.