My TOCA App
John Rodrigues
UX Designer
Product Designer
UI Designer
Figma
Notion
ProtoPie
TOCA Football
Soccer Training App case study
About the Product
My Toca app is one stop app designed to provide players with insights from their training. Players get to see their progress w.r.t session completion, celebrate the pathway progress overall player development, past session insights, and revisit their best moments at a TOCA Center.
About the Company
TOCA is a Global soccer-focused experience brand, that recently secured $25 million to accelerate expansion.
Problem
Customer-facing problem: TOCA customers found a lack of ways to track their training progress. The trainers manually tracked the progress which wasn’t efficient.
Business-facing hypothetical problem: The business noticed they lost customers once the training was completed. This product would act as a way to retain customers and convert them to lifelong customers.
My Role
Lead Product Designer
UX Designer
Design Management
Team
Chief Innovation Officer
Founder
Product Manager
Front and Backend Developer.
Responsibilities
Product Discovery
UX Research
Stakeholder Alignment
UI Design
Interaction Design
Tools
Timeline and nature of the project
6 months long commercial project.
Nature of business: Startup
Project and Sprint Planning
The executives had done their research and concluded they wanted to create an app to improve the customer and trainer experience.
So we started with creating a sprint plan shown below to execute the vision.
Product Discovery
To understand the product from the business perspective, we hosted 2 hours long brainstorming sessions.
We asked questions such as.
What are the business goals?
What’s the competitive advantage of this product?
Who is the primary and secondary user?
Who are the stakeholders who would use this app?
💡 key Findings
Business Goals: Retain and create an engaging experience for the customers
Competitive advantage: Gamified and personalized training.
Users: Parents and Kids ( trainee )
Other stakeholders: Trainer</aside>
Scope
We identified the app has two directions, one is customer-facing and the second is trainer-facing. For the scope of this project, we focused on the customer-facing direction
Hypothesis
<aside>💡 Gamified mobile app to track progress and provide users the insights on their training will help players succeed in training and retain more customers for TOCA Football.
</aside>
Conducting the workshop and product discovery helped us get the context of the product from the business perspective, we wanted to understand the user’s perspective and bring the user’s insights to the product development.
User Research
Contextual Enquiry
I made a visit to the nearest training center to observe the player experience, I also spoke to the program manager and captured valuable insights.
Due to the limited time and budget, we captured the user's insights from past customer research. We captured one quote from the parent Interview, which helped us to validate the need.
💡 “I wish I have a training map for my child” - Insights from the parent.
The training center already had ongoing training, which we had to understand to translate those operations into a digital experience. We spoke to various program managers and mapped out the program architecture.
We also identified the primary and secondary users.
Primary User: Player | Trainee.
Second user: Parent
Training Program Discovery
The training programs had a pathway, sessions, and skill sessions. The following image shows how they are related.
Based on this discovery we created wireframes and user flows to capture stakeholder feedback.
Aligning The Stakeholder Directions
Since this product had multiple stakeholders, creating wireframes helped us capture feedback at the early stage and helped us to create alignment between multiple product partners.
After going through 4+ product iterations we designed the following prototypes.
Product Prototype
The product prototype showed users the pathway and sessions they are on. It also showed users the key training metrics like Goals, best streak, balls, and session details.
Next Steps
We designed the end-to-end product experience for TOCA’s training center. I stopped at this stage to transition to my next role in another company. However, these were the planned next steps.
Usability testing to validate the ease of use.
User testing to validate the product direction.
Developer handoff document.
Presentation
The presentation can be downloaded here
Conclusion
Through product discovery, user, and stakeholder research we designed an end-end customer-facing product experience for the TOCA’s training center to provide a personalized training experience for the customers
Learnings
Design is teamwork, and working with cross-disciplinary teams helped me understand the need to understand the various product partner to define the design direction.
Working in a startup can be challenging especially the ambiguity throughout the process, we can clarify ambiguity by asking good questions.
