krowd9

Chat

One of my most important implementations is the chat system available in the app which allows users to connect with friends and other users inside the app.

This complex functionality is accessed from the chat button in the home view and firstly displays the list of all the current chat channels that the user belongs to.

From here, the user can access a chat by tapping on them, can archive them or leave group chats by swiping left, or start a new chat with a friend or create a group.

After creating a new chat or selecting one from the chat list, the chat view is displayed in a way similar to whatsapp. Messages are wrapped in bubbles and the friend's avatar is displayed next to their sent messages. Here the user can send a text message or choose gifs, photos and videos from the gallery. Moreover, some of the messages are sharable including and not limited to match information, match tv highlights, news, photos, videos and gifs.

The available message types include text, gifs, images, videos, group avatar update, group name update, group events (user joined, user left, channel created), links, match information and match tv highlights.

When selecting a media (gif, video or photo) a preview view is opened where the user can share them and save them inside their phone, zoom in/out the photos and gifs, or play/pause the videos.

Furthermore, by clicking over the friend's name on a private chat, the selected friend's profile is opened including their prediction stats and history.

When clicking over a group chat name, the group information is opened which includes an interface to modify the group's name and avatar, the list of the chat participants (which opens the user's profile when tapping on them) and the options to add a new participant or leave the chat.

Prediction challenges

In order to allow the users to have more interaction between them, we introduced the ability to create predictions for matches and challenge another random user to see who does achieves a better result (by either guessing the result or the perfect score).

My colleague implemented the score prediction view and the opponent search animation. My task was to implement the display and animation of each of the users' predictions in the chat.

On top of the chat list view, the user has a quick access to the list of active challenges where they can chat with their challenger, check the match live and the results.

Moreover, at the end of the match when the results are published, the winner is displayed inside the chat, animating with confetti who the winner was and how their performance was with regards to the real result of the match.

Else, a Draw message would be displayed if both missed the result or had the same one.

New Feeds section

Originally we had the middle section of the app just to show the video highlights of the most important matches including matches from the Champions League, Premier League, Italian Serie A, LaLiga from Spain, South American Copa Libertadores and Brasil Serie A.

However, my task was to give a change to this section and convert it from simple videos into a proper Feed, allowing users to not only watch matches’ video highlights but also like them and write comments!

Moreover, comments from all the users are displayed under the video, allowing users to read them and write new ones while watching the highlight at the same time.

Many football apps allow the users to create their own eleven-formations so why not let our users to do the same?

I worked very hard here paying special attention into the animations:

• On the top right corner the user can select a formation from a list. When swiping between the different formations, the players on the pitch are animated to move into their new position to satisfy the selected formation.
• From the bottom list, the user can scroll horizontally and drag & drop players to each of the available positions on the pitch. The formation's position closest to where the user is dragging a new player is highlighted (changes it's alpha) to show the user which position they would be modifying.

If the user is not happy with a player, they can simply tap on it and it will be removed from the pitch. They can also click on the reset button to clear the pitch.

Finally, the user can share the players to friends or into other apps by clicking the share button.

Football Quiz

To make the app more attractive (and fun) we came up with the idea of adding some gamification by allowing the users play Q&A games.

For this development, the key factor was the animation to do the transition between questions after the user guesses (or missed) the correct answer.

During the question, a countdown is shown on the top right of the screen, animating as the seconds pass. Furthermore, a loading bar at the bottom of the screen would grow as the time ticks and changes colour from green to red as the user runs out of time.

A red background would be shown for incorrect answers while a green background would be shown for correct ones. Moreover, the score would increase for each correct answer (animating such increase) while the old answers would slide out to the left allowing the new answers for the next question to slide in from the right.

Finally, the background image would slowly zoom-in, showing a different image for each of the questions.

When the quiz is over, a las view is displayed with the user's performance and a shearable card that can be sent to friends in the app and also to Instagram, What'sApp, and other social media apps.

Player profile

By tapping over any player in the match card or a team, the player's information is opened.

For either a match or a whole season from the selected team, the player's information is displayed in detail in a card view with a snapshot of the player (if available) and a list of all the key stats in a game or a specific competition.

The player's thumbnail, position in the field and number are minimized on scroll to help expand the rest of the stats available for them.

This is a new implementation to allow users to share content inside the app by doing a long-press into some of the views.

When doing so, the view is highlighted from the rest of the app and animated in order to give some feedback to the user showing that the share is being toggled.

When the bottom bar reaches the end and the share icon is displayed, a small vibration indicates the user that the share was executed and the new share view is opened, allowing the user to check a preview of the content and the different sharing options.

This sharing gesture is available for match chards and news.

In-app Notification system

Whenever a user receives a chat message either in a private or a group chat, if the user has the app opened but is not in the aforementioned chat, a non-invasive in-app notification will be displayed.

This notification displays the picture of the user or group icon where the message was sent, the name of the other user or group chat and a preview of the message sent (which can be a text message, photo, video, gif or an attachment such as a match information, tv highlights or any other shareable content).

The user can either tap the notification to jump to the chat where the message was sent or swipe up to dismiss the notification.

Friend requests

More social functionalities were being introduced to the app including chat with friends, shareable content and predictions. It was inevitable to think of adding the option to send friend requests. This allows users to increase their social network and be able to send messages to other users who are not friends in facebook.

One way of sending a request is by finding a user in the leaderboard or in a group chat they belong to. After accessing another user's profile, the option to Add Friend will be displayed. When tapping on it, a new view pops up for a confirmation to send the request and, after confirming, the profile is updated with a Pending. Here the user can tap over Pending to cancel a friend request.

When a user receives a friend request, a new row is displayed in the chat list with the number of pending requests. There, the user can accept or reject them.

Media uploads

The user is able to send media as messages to other users multiple times. This is done by tapping over the picture-selection button to the right of the chat text box. When doing so, a one-row gallery is displayed at the bottom of the chat where the user can scroll horizontally to navigate through their media.

They can also tap over the gallery button at the bottom left of the screen to open a full-screen gallery. By clicking over the media wished to be sent, a new send button will appear over the selected media as a confirmation.

In order to track the progress of these messages, a progress bar is displayed over the media the user selected in the in-app gallery and the picture-selection button also displays an indeterminate progress bar.

However, when the user tries to send the same media in a different chat, a new view pops up showing the queue of the media that is currently being sent to all the other chats.

This view lists all the media sent to the chats including the media name, a thumbnail, the chat where they are being sent to and their current status: sent (a tick), error (a cross), in the queue (indeterminate progress bar) and in the process of being sent (a progress bar with the current progress value).

Moreover, the current progress of the media being sent is also displayed as an Android notification, showing the current progress value and how many other are still in the queue.

Filters

When the app started growing more and more in functionality, we started thinking also in what the user would appreciate. We then added different filters that they would find useful:

• A quick live button to filter only the live matches that are being played at that moment.
• In the drop down menu, the Favourites option was included to filter only the matches that the user is interested in: favourite teams, followed teams and matches that the user has set alerts on.

Match formations (old)

This one was between my first implementations in the app. Whenever a match has the formations available, each player position is dynamically populated over the field.

The players are organised in a grid. For example, classic formation 4-4-2 includes a row for a goalkeeper, another for defenders, one for midfielders and one for attackers. However, other formations such as diamond (4-1-2-1-2) can also be mapped.

Players who belong to the same row (for example, defenders) are spread evenly on the row and special formations (such as diamond) are defined by assigning players' positions in rows between the basic ones (with basic I mean 4 rows).

Finally, by tapping over a player either in the map or in the subs list, the player information is displayed.