Uniting Fans, One Match at a Time
The Problem: Loneliness in Sports Enthusiasm
In Bayreuth, I faced the challenge of enjoying sports matches without like-minded companions. The absence of fellow enthusiasts to share the excitement left me feeling isolated. The search for sports-watching companions became a daunting quest, and this loneliness was the problem that ignited the creation of 'Hof,' a solution to
unite sports fans and transform solitary cheers into
shared celebrations.
Crafting User-Centric Experiences
Design Tools
Competitor Analysis
Unveiling User Insights: Navigating Qualitative Research
After completing the competitor analysis, I ventured into collecting further insights via user interviews, applying a qualitative research approach. This endeavor was enriched by the valuable guidance and techniques I acquired throughout the process.
Conducting face-to-face interviews posed distinct challenges amid the pandemic. However, I effectively interviewed three individuals, holding two sessions via Zoom and coordinating an in-person meeting with the third participant.
Gather Requirements
User Flow
The displayed user flow represents the optimal path where users successfully achieve their intended goal within the app. It's important to note that within any application, various touchpoints exist, including error handling, alternative flows, and more.
Turning Ideas into Layouts: The Rapid Prototyping Journey
In the midst of this process, as the user flow reached completion and provided a comprehensive view of the app's operation, I swiftly transitioned into the rapid prototyping phase. Using Crazy 8’s technique, I sketched out various potential layouts. I've marked all the layouts I intend to transform into mid and high-fidelity screens with a distinctive pink dot for easy reference.
Exploring User Behavior Through
Mid-Fidelity Wireframes and
Usability Testing
Transitioning from Rapid Prototyping, I proceeded to develop Mid-Fidelity Wireframes. Subsequently, I delved into Usability Testing, aiming to glean deeper insights and understand potential user behaviors for my sports match viewing app. I closely observed users as they performed essential tasks, including signing up for the app, searching for sports viewing venues, and interacting with fellow users within the app.
Unveiling User Insights: Usability Testing with Maze Platform
The usability testing results indicate that most users tend to take a practical approach when using the interface. They often explore different buttons and menus before they can accomplish their tasks, which results in longer task completion times.
Based on this observation, it would be beneficial to consider implementing tooltips or pop-up windows to provide users with helpful guidance and explanations. This could significantly improve the overall user experience and assist them in achieving their goals more efficiently.
As-Built Design System
The original moodboard was grounded in Google's Material Design 3 kit. Translating that into a live, working build meant adapting those patterns into lighter custom components — full pill buttons, a mint-accent chat system, simplified elevation — tuned for a real mobile shell rather than strict M3 compliance.
https://claude.ai/code/artifact/f3ee879a-bd22-4945-8a69-dce3f8d47864
High Fidelity Wireframes
Moodboard
From Figma to a Living Product — Directed with Claude AI
Lesson Learned and The Next Steps
One key insight I've gained from this project is that users tend to explore and click on all visible menus when trying out a new app or product. This behavior is part of their orientation process on the new platform.
Furthermore, my next step in developing this app is to create additional safety options to ensure that all users can enjoy a safe and non-judgmental environment with minimal risk of discrimination.
Thank You!
