Case Study

What is easy2coach?

The platform easy2coach helps soccer teams to coordinate their trainings, matches and other events. They provide teams with everything they need to organize their belongings in a digital way. Trainers and managers can add players to a team who can enter their availability for a training or a match. This makes setting up the formation before a match very easy.

Why redesign?

To be honest, I was very disappointed with the redesign of the app that easy2coach released a couple of months ago. The overall UI feels clumsy and not really modern. Sometimes it is hard to find out how a specific view can be opened because the icons are not very representative for the topic. This causes confusion that can be avoided easily.

The Redesign

Login

1. The first thing that I did was merging the two login screens. Right after the splash screen disappears, an intro screen is shown that visualizes the key features of the app and asks the user if he wants to register or login. In my opinion, the screen does not really help recurring users as they already know the app. That’s why I added a registration section in the lower part of the login screen. In doing so, the option to register is still available but the focus is kept on the recurring users.
2. Then I decided to use a white background color for the input fields to increase the readability of its content.
3. Simultaneously, I introduced a new call to action design which uses the light green color from the logo. In doing so, the primary action of the screen is clearly visible and easy to find for the user.
4. In order to make the login screen more interesting, I used a photo in the background. Plus, the image motif shows that the app is mainly addressed to soccer teams.

Dashboard

1. When I opened the dashboard for the first time, I was dazzled because of the white background that suddenly is being used (on the left side). To avoid this, I use light background colors for the body section in order to make the texts easier for the user to read. Additionally, lighter colors convey a more positive look and feel and the contrast between dark gray and white is not so hard.
2. Then, I changed the appearance of the events to an even more compact card.
3. The availability information is not relevant at this point because the user only wants to have an overview of his/her events for this week. Consequently, this section was taken out.
4. As color can be processed by a human being’s brain way more faster that text, every type of event has its own background color and icon. By using a color code, scan readers can simply consume the content.

Calendar

1. The actual calendar view looks a bit unbalanced and unfocused because the days without an event are shown within the whole list. For an amateur soccer team, there aren’t that many events per week: The average is 2-3 trainings sessions plus one match at the weekend. Summarizing this, we’ll have 3-4 events per week. That is the reason why I decided to only show the days with an event. In doing so, the user interface provides the user with relevant information instead of displaying empty days and waste space on a small mobile screen.
2. As previously said, the relevant time scope for amateur teams is the week. Therefore the default view of the calendar should be from Monday to Sunday. All event days are marked with a green color which structures the information, too.
3. Adding a new event is still possible, when the user clicks the „plus“ icon in the upper right corner. This is a very common position of the primary action of a screen on iOS. The user will therefore automatically expect it to be there.

In-App Notifications

1. The notification screen is one of the most used sections within the app, too. The user can see here, who attends the next training session or any other event. Of course, other notifications such as new comments will be shown here as well. It is in the interest of the user to see here a compact list in order to see as many list entry as possible and consequently get a quick overview of what s/he missed.
2. I grouped the notifications per day to create a visual hierarchy. This helps the user to better scan the content and consume the information.
3. In order to keep the UI as clean as possible, I got rid off the three icons that have been used to show the availability of a user. In that moment it does not make sense to show all possible states. The state is even though very important. That is why it is now positioned very closely to the avatar.

The Rest of the Screens

The above mentioned screens are the most important aspects of the app. Below you can find some more redesigned screens.