Content
JOSTL. is a Sports-Tech company based in London. JOSTL. a fan
engagement platform with a re-imagined match experience.
At JOSTL, I served as the initial front-end developer hire, working closely with the CEO and CTO from the outset. In this role, I collaborated with a back-end developer and a UI designer to implement a wide range of features, guiding projects from the planning phase through to final development. My responsibilities included scoping features, running sprint cycles, and designing and developing features based on user feedback and experiences. Within the first 18 months, I was promoted due to my expanded role and increased responsibilities.
Automating Player and Team Data Management
In our project, managing large volumes of player and
team data efficiently was essential. I developed tools
that leveraged JSONs generated from data providers
like Opta to automate the addition and removal of
player photos based on team changes. This system
ensured that whenever a new player was signed or an
existing player left, their photos were promptly
updated in our database.
Additionally, I created scripts to scan the project’s
structure for existing player photos, adding metadata
to indicate which images were available for each
player. This process generated JSON files that were
then uploaded to our server. To streamline updates, I
integrated the new player photos into Unity’s Cloud
Content Delivery (CCD). This setup allowed us to
refresh the player list and images without requiring
client updates.
To ensure the tools were accessible, I consolidated
them into an easy-to-use interface accompanied by
clear documentation. This documentation detailed the
steps needed to update player data, making it
straightforward for team members to follow the process
and manage updates independently.
Enhancing App Navigation for Improved User
Experience
When I joined JOSTL., I quickly identified that the
app's navigation could be improved for a more seamless
user experience. Navigating to essential features,
such as the User Profile or joining a different match
while inside one, required multiple button clicks and
felt laborious. I believed these tasks should be more
intuitive and accessible.
Drawing inspiration from user-friendly apps like
LinkedIn, I designed simplified navigation panels to
enhance ease of access to key features. These panels
aimed to make the app's features more discoverable and
user-friendly. I outlined my findings and ideas in a
detailed presentation, clearly identifying the problem
areas and proposing effective solutions. When I
presented my ideas to the team, they embraced the
concept enthusiastically.
Following the presentation, we embarked on prototyping
and testing various navigation solutions. After a
thorough evaluation, we decided on implementing the
new navigation panels. These changes significantly
improved the user experience, making it easier for
users to navigate the app and access its features.
Developing this required a clean and efficient method
for handling the loading of different states, as
various states needed to be loaded from different
locations in different ways. This approach ensured
that the new navigation system was both flexible and
robust, supporting a seamless and responsive user
experience.
Optimizing Boot Processes for Faster App Loading
To ensure our app loaded as quickly as possible, I
dedicated significant effort to optimizing the booting
process, aiming to get users into the main menu
swiftly.
Firstly, by utilizing the profiler, I identified the
processes that were causing delays. One of the major
bottlenecks was the loading of team and player data
for several leagues from resources. To address this, I
refactored the system to load all data from a single
JSON file, rather than from separate ScriptableObjects
for individual players and teams. This approach
drastically decreased the load time and also allowed
us to update player and team data on the fly. By
leveraging Unity's Addressable system, I ensured the
data could be loaded asynchronously, enabling us to
complete the boot process faster.
Implementing Dynamic Front-End Updates for Live Game
Experience
For the live game experience, it was crucial that our
application could dynamically update the front-end with new
questions. To achieve this, we implemented server listeners to
monitor for any new data being created. When new data was
detected, it was sent to our client, which managed the sliding
in and out of relevant widgets, including live questions, live
opinions, and AI insights.
A similar approach was applied to the in-game chat
functionality. Upon entering a chat room, a listener was added
to monitor incoming and outgoing messages. New messages would
slide into the chat interface as they were received or sent.
When a user left the chat room, the listener was unregistered
to ensure efficient use of resources.
A new question being created, being live sent to the client.
The Kick-Off animation, sent at realtime to the client when the football match starts.
Engineering an Interactive and Scalable Social Feed for JOSTL.
The JOSTL. Social Feed was a major feature designed to deliver
the most relevant and latest content to users, providing an
experience akin to TikTok or Instagram Reels. Users could
effortlessly flick through posts and engage with a variety of
content, including match stats, generated questions, and
user-generated content.
To ensure the flicking mechanics were smooth and intuitive, I
created a user-friendly inspector view for collaborative
design sessions with the designer. This allowed us to easily
adjust settings and refine the user experience for optimal
performance.
Following this, I focused on developing and designing an
initial set of 30 post types, each with unique interactions
such as voting for the man of the match, seeing past match
stats, and viewing recent news articles. This was followed by
the creation and implementation of an additional 26 new post
types. Thanks to our flexible and expandable system,
developing, implementing, and deploying new post types was
straightforward, ensuring a dynamic and engaging user
experience.
Creating a Robust and Friendly Way of Handling
Permissions
App’s notifications are the best way to fully engage users,
and to build retention, and we did not have a robust way of
handling the user’s permissions around notifications. Because
of this, I wanted to create a friendlier and less intrusive
way to display permission requests. Before starting I had to
sort out the technical requirements for native permissions.
I knew that permissions could only be requested a limited
number of times before they become soft-blocked, so rejecting
a native popup could be very harmful. Hence, we needed a
system that asked users for permissions at the right time,
providing context for their actions.
The pre-native prompt for asking users to enable notifications with context.
The native prompt for enabling notifications.
The pre-native prompt for when users are soft-locked and we need to direct them to the app's settings.
The Native app settings on Android.
To solve this, I pre-native popup that asked users if they
wanted to enable notifications BEFORE they reached the native
popup. The system would prompt users at appropriate times with
contextually relevant messages, ensuring the requests were
timely and meaningful.
By leveraging this system, when users joined a game, they
received a contextual prompt to enable notifications,
explaining the benefit (e.g., live game updates). If users
wanted to enable notifications, the native pop-up would be
shown.
To create this, I developed custom AAR plugins to integrate
with Unity and access Android's native functionality. This
allowed me to determine if users had certain permissions,
whether we could request those permissions, or if some
permissions were blocked. Depending on these checks, I could
present the relevant UI: either requesting permissions via the
native prompt or directing users to the app's settings if the
permissions were soft-blocked.