krowd9

Chat

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

This complex functionality was accessed from the chat button in the home view and firstly displayed the list of all the current chat channels that the user belonged to. 

From here, the user could access a chat by tapping on them, could 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 was displayed in a way similar to whatsapp. Messages were wrapped in bubbles and the friend's avatar was displayed next to their sent messages. Here the user could send a text message or choose gifs, photos and videos from the gallery. Moreover, some of the messages were sharable including and not limited to match information, match tv highlights, news, photos, videos and gifs.

The available message types included 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 was opened where the user could 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 was opened including their prediction stats and history.

When clicking over a group chat name, the group information was opened which included an interface to modify the group's name and avatar, the list of the chat participants (which opened 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 predicted 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 had a quick access to the list of active challenges where they could chat with their challenger, check the match live and the results.

Moreover, at the end of the match when the results were published, the winner was 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.

Otherwise, 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 update 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 were 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 could 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 could 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 was not happy with a player, they could simply tap on it and it will be removed from the pitch. They could also click on the reset button to clear the pitch.

Finally, the user could 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 guessed (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 was over, a last view was displayed with the user's performance and a shearable card that could 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 was opened.

For either a match or a whole season from the selected team, the player's information was 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 were minimized on scroll to help expand the rest of the stats available for them.

This was 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 was highlighted from the rest of the app and animated in order to give some feedback to the user showing that the share was being toggled.

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

This sharing gesture was available for match chards and news.

In-app Notification system

Whenever a user received a chat message either in a private or a group chat, if the user had the app opened but was not in the aforementioned chat, a non-invasive in-app notification would be displayed. 

This notification displayed 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 could be a text message, photo, video, gif or an attachment such as a match information, tv highlights or any other shareable content).

The user could 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 allowed 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 was by finding a user in the leaderboard or in a group chat they belonged to. After accessing another user's profile, the option to Add Friend would be displayed. When tapping on it, a new view popped up for a confirmation to send the request and, after confirming, the profile was updated with a Pending. Here the user could tap over Pending to cancel a friend request.

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

Media uploads

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

They could 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 would appear over the selected media as a confirmation.

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

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

This view listed 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 was also displayed as an Android notification, showing the current progress value and how many other were 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 were being played at that moment.

• In the drop down menu, the Favourites option was included to filter only the matches that the user was interested in: favourite teams, followed teams and matches that the user had set alerts on.

Match formations (old)

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

The players were organised in a grid. For example, classic formation 4-4-2 included 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) could also be mapped.

Players who belonged to the same row (for example, defenders) were spread evenly on the row and special formations (such as diamond) were 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 was displayed.