Sportal Mobile App
Introduction
Sportal is the go-to destination for all things sports, offering an immersive and dynamic user experience. The work I am presenting in this Product Design Case Study results from passionate dedication, teamwork, and a commitment to delivering the best user experience in sports news from many people involved in this project.
Since its launch in May 2023, the Sportal Mobile App has achieved 15,000 total users, along with an impressive 84.43% engagement rate. The graph below shows the First Open event for the same period.
Without further delay, let's take a look at the work that's been done.
Goal
Sportal is a brand that enjoys significant attention from sports enthusiasts in website format. The goal of this project was aimed at enhancing user experience and enabling people to follow their favorite clubs, leagues, and players through a mobile application.
My Role
My role in this project was not just about designing the UI of an app but crafting a user experience that truly resonates with sports enthusiasts, providing Sportal's loyal and advanced users with an experience and benefits that the website doesn't offer.
Methodology and Approach
This goal was informed by in-depth user research and analysis of user cohorts. By analyzing user cohorts, we discovered that a specific group of individuals, which we referred to as 'Heavy Users' or 'Elite Engagers', emerged as the focal point for tailoring the product to deliver an exceptional user experience.
Designing Seamless Experience
Sportal's user-friendly design ensures that users can stay informed and engaged, whether they are avid fans or have a casual interest in sports. A commitment to precision and consistency drove the project's design and development process.
Style guide: Ensuring consistency in design elements, typography, colors, and overall aesthetics, which served as a visual reference for the entire team.
Design system: Created to establish typography, colors, design principles, and guidelines streamlining the development process, enhancing efficiency, and maintaining a unified look and feel across the entire application with the website.
Components library: Housing a repository of reusable UI elements, such as buttons, content boxes, and navigation components, promoting design consistency and simplifying the development process while fostering a cohesive user experience.
Data-driven Approach
Every pixel of the app was meticulously crafted through a data-driven approach, with methodologies such as competitive benchmarking, content analysis for information architecture structuring, and rigorous wireframing and prototyping to test and refine the concept.
Competitive Analysis: By analyzing the user experience of existing sports apps and websites we identified best practices and areas for improvement. This helped us in benchmarking Sportal against competitors and came up with features such as a customizable bar for users' favorite players, leagues, and clubs.
Information Architecture: Collaborating with the traffic analysts and by looking at the heatmaps of the Sportal website we created a clear and intuitive information architecture, including the organization of categories, navigation menus, and content hierarchies. The goal was to enhance the session duration with continued content exploration.
Wireframing and Prototyping: We created wireframes and low-fidelity prototypes to visualize the app's layout and functionality.
Customized Content
The app allows users to tailor their sports news experience by selecting their favorite/preferred sports topics, ensuring they receive updates on the teams, leagues, and players they are most passionate about, all of which can be conveniently accessed from the shortcut bar at the top of the screen.
Preferred Quick Access
The preferred quick access bar itself is one of the main UX touchpoints we introduce to our users. We decided that this feature should be the first thing users are introduced to in their initial contact with the app.
In the flow diagram above, you can see the initial flow that the user goes through. Selecting their favorite clubs, leagues, or players is the first screen they see after launching the application. Still, it is not a mandatory step, and this functionality can be activated later during use.
Management Actions
One of the design goals with this feature was to provide easy and always accessible management, which includes adding new favorite sports topics, changing their order, and removing existing ones.
As users use this functionality, adding and removing certain topics greatly aids in content strategy. This way, our colleagues responsible for content creation can track specific trends that emerge through the data enabled by this functionality.
Navigation
Navigation between multiple different selected topics is possible in two ways. The first and obvious way is through the bar, while the second way is to swipe left or right to seamlessly move through all the selected topics.
Considering that we are aware that people spend most of their time on other applications, we have decided to adopt familiar patterns that are so common in other products that they have become a habit for people and created muscle memory.
Video Section
Taking into account the trend of short-form content that generates the highest engagement and extends the duration of user sessions, we have decided to apply the same pattern to the video section.
The app features a curated video section, offering highlights, interviews, and behind-the-scenes footage all conveniently in one place. Users can navigate through the video section in a similar manner to how they use TikTok or Instagram Reels.
Live Score
The app boasts a dedicated live score section, ensuring that users never miss out on updates from their favorite clubs or matches, keeping them informed and engaged in real time.
Conclusion
In essence, the Sportal Mobile App represents a holistic approach to product design, where user-centricity, design consistency, and data-driven decisions converge to create a platform that not only resonates with sports enthusiasts but also sets a new standard in sports news applications. As long as the product thrives, the roadmap includes continuous rounds of iterations and planned usability tests to ensure that Sportal remains at the forefront of innovation, consistently meeting the evolving needs of its users.
