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.
The Answer: Build a Meetup Platform
The isolation I felt during sports matches in Bayreuth sparked an idea: how could I turn this challenge into an opportunity for shared celebration? This question drove me to create 'Hof,' a groundbreaking mobile app designed to connect sports enthusiasts and transform isolation into collective experiences. In this section, discover the journey of 'Hof,' from its inception to its evolution in addressing the initial problem.
Evolving as a Designer
With over a decade of graphic design experience, my move into UI/UX marked a transformative shift in my professional journey. This evolution delved deep into user-centered principles, usability, and the seamless fusion of aesthetics and function. The immersive experience introduced me to new design tools and sharpened my problem-solving skills, playing a crucial role in 'Hof's' development. Merging my graphic design background with UI/UX exploration laid the foundation for a user-centric sports-watching platform.
Crafting User-Centric Experiences
Desing Tools
competitor analysis
During this stage, I conducted research into companies with experience in event management, including industry leaders like Eventbrite and Meetup, as well as platforms like Foursquare, which, while not primarily an event management platform, offered valuable insights into usability, compatibility, and UI/UX design. Among these three companies, I focused on understanding and observing their UI patterns, user flows, and strategies for maintaining a seamless user experience.
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.
user persona
Gathering 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.
style guide & Moodboard
What you see here is only a small fraction of the components I've been using for this project. I primarily rely on the Material Design System to expedite my design process, and I've also incorporated custom icons to align with the specific sports theme I've chosen. Rest assured, the library is much larger than what you currently see.
High Fidelity Wireframes
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.
