top of page
Sports App
This project is confidential, so I can only share a broad overview here.
Please don't hesitate to connect, and I'd be happy to discuss the design process in greater depth.
Introduction
Interactive, data-driven mobile application for coaches and players.
Brief
To develop a mobile application that facilitates seamless communication and data sharing between coaches and players, offering essential features such as training schedules, calendars, and match information.
Role
Lead Designer: Stakeholder management, Ideation, Design System, Brand Identity and User Interface Design.
Software used
Figma and Adobe Creative Suite
Problem statement
Football coaches and players lack a user-friendly mobile app for interactive training and performance analysis. Existing solutions are often generic and don't cater specifically to the needs of professionals. This gap calls for a dedicated, streamlined application to enhance coaching strategies, monitor player progress, and provide real-time data insights for improved skill development and game strategies.
Solution
Design and develop a feature-rich, interactive, and data-driven mobile application tailored specifically for coaches and players. This application aims to offer a comprehensive set of tools and functionalities, including customizable training modules, real-time performance tracking, personalized skill development insights, and strategic analytics. The goal is to enhance the overall training experience for both coaches and players, fostering improved performance and strategic decision-making within the realm.
Goals for the UX/UI Team
- Create concepts and wireframes based on the value proposition.
- Create an intuitive and visually appealing user interface.
- Follow the design system for branding consistency.
- Create branding (Logo, illustration & Mascot).
Competitive analysis
Conducted market research alongside the UX team and product manager to analyze competitors in the market.
-
Most of the competitors are focused on scheduling and training dates.
-
Coaches can schedule training sessions and matches through their platforms.
Workshop
We collaborated in several workshops, involving both cross functional stakeholders and our UX team, to refine the user flow for the sports application.
3 Great Outcomes of Internal Workshops
Low- Fidelity wireframes
The wireframes underwent several rounds of ideation, and they were subsequently presented to a select market group for thorough evaluation, aiming to gain insights into the website's functionality.
User testing
We conducted qualitative testing on a select group of users using low-fidelity wireframes. Throughout the testing process, we formulated a set of questions to gather valuable insights. Our observations revealed numerous pain points, instances where users encountered difficulties, and areas where the user flow was easily understandable.
After testing the low-fidelity wireframes on a focused group of 7 users, including both coaches and players, three key pain points have been identified for improvement.
​
Pain Point 01: Users expressed that transitioning to the alternative calendar required additional effort.
Pain Point 02: The sign-up flow lacked intuitiveness, with certain steps proving challenging to comprehend.
Pain Point 03: The information displayed on the home screen of players was very difficult to understand; a need for simplification was identified.
We addressed each pain point, conducted another round of testing with the same users, and received positive feedback. The app is now not only user-friendly but also highly intuitive. We proceeded to the next phase, which involved crafting the branding and style guide for the application
Branding
The brand name for the project is confidential, limiting the details shared in the portfolio.
However, I can provide an overview of the process:
​
-
The entire company proposed various names.
-
The final name was chosen through a voting process involving all regions.
-
The logo was presented to key stakeholders.
-
Iterations and votes led to the selection of the final logo, integrated into the sports app.
Style guide and Design System
The style guide was consistently followed throughout the app to maintain a cohesive and polished appearance.
Grid system
The grid system is primarily designed to establish consistency throughout the app's flow, ensuring ease for developers to comprehend and seamlessly code it for both iOS and Android versions.
Colors and Typography
The selection of colors and typography was guided by the comprehensive Design System employed within the company, which I had previously developed. This ensured a seamless and consistent transition to the new application being built.
Buttons and Calendar
Sliders and Status
The player's status, recovery, and soreness features were entirely customized, and the sliders were designed according to the style guide established at the beginning of the UI development.
Data Driven Graphs
The app focused on presenting a lot of information in a simple data format, especially through various graphs. We went through multiple rounds of changes to simplify the data and ensure it matched the app's style guide. These two examples showcase the iterative process, with different formats designed for various types of information.
Calendar view
A calendar was designed to simplify the booking of matches and training for coaches, while also ensuring players receive easy updates about upcoming events.
High-Fidelity
After several rounds of refinement, we have arrived at the final set of screens for these frames, incorporating the necessary adjustments and improvements.
Overview of the onboarding flow
I intentionally presented a blurred version of the high-fidelity onboarding screens overview. Nevertheless, if needed, I can provide detailed views upon request, considering confidentiality concerns.
Comprehensive Developer Handoff
I like to give developers clear instructions, outlining each step and style precisely. The flow below shows the steps to follow for a consistent app design, as specified in the style guide.
Key Learnings
01. Make sure to thoroughly research and test with users
- Continuously test with users at every design step.
- User feedback can uncover intuitive solutions, saving time for the UX team and the company.
02. Stakeholder management and clear communication
- Involve everyone in the process with weekly stand-ups and agile collaboration.
- Coordinate and communicate, especially if stakeholders are in different regions. In our project, we operated from 4 regions: USA, The Netherlands, India, and Canada.
03. User Interface Design
- Keep a consistent design guide and advocate for custom icons and styles when needed.
- Keep PMs, POs, UX, and Dev teams informed at every design step to prevent rework.
- Test again with users for insights on the app's look and feel.
bottom of page