Analysing the UX Design of the FIFA Cell App

Analysing the UX Design of the FIFA Cell App

I wished to train my UX evaluation outdoors of console video games. So I began with a recreation that I knew I might take a look at with many alternative individuals, and on the similar time, has some complexity during which to instruct gamers throughout onboarding. So I made a decision to make a high-level expertise evaluation of the FIFA cellular app and collect challenges, ache factors, alternatives, potential options, and proposals.

Tips on how to organise the work?

The very first thing I did was to obtain the app and freely experiment with the evaluation in thoughts – however not too targeted on UX that I’d miss the onboarding expertise as a participant.

I attempt to experiment like I’m simply casually taking part in the sport, and provided that the ache sticks in my head do I be aware it down in the long run. I’m acutely aware of my limits and challenges; in addition they weigh the evaluation till I discover extra individuals to check it with.

I look again on the app with these points in thoughts and experiment with it via a extra crucial UX lens. Then, I reworked the problems a bit with extra technical element. On the finish of the experimentation, I be aware each the ache factors and options I like – it’s at all times good to have each views.

It’s time to check with gamers. I examined the onboarding and app and sense-check the subjects I collected. I at all times attempt to have not less than 5 individuals. I’m fortunate as a result of I gathered 5 skilled and beginner gamers with FIFA Cell.

Along with the testing, I carried out a UX evaluation of the whole app in mild of UX heuristics. I gathered a few points that additionally overlapped with those from the testing with customers.

I summarised and organised the problems I had and related them into 5 predominant challenges: onboarding, personalisation, “My staff” mode, “Factors” inside “Retailer”, and the Edit menu.

With the problems raised and organised, I at all times assume offering potential options is significant. If you happen to examine my articles, I at all times attempt to do this for 3 predominant causes. First, always remember whenever you assume you may have discovered a brand new problem or ache level, the individuals who labored on the system you’re analysing already find out about it. Time, cash, and technical constraints restrict the options we may give or the time we’ve to work on the issue.

Second, I believe it’s an excellent rule in life that everytime you level out an error or a mistake, you additionally give an answer or directions on the right way to enhance it. If something, individuals would possibly want a brand new imaginative and prescient, somebody with extra time, or a serving to hand. If I make a mistake, I would like individuals to assist me develop. So I attempt to do the identical… and in a manner, I’m additionally in a position to develop and evolve. Simply mentioning issues that aren’t okay is straightforward. To create and assist is difficult work. And at last, I do these workout routines to study and develop in a enjoyable and artistic manner. It’s cool and unimaginable to transform and rethink the video games I really like.

Evaluation of FIFA Cell

I examined the sport on each an Android smartphone and pill, on my own and with 5 different individuals. I additionally examined inside a home with managed mild and out of doors the home in 2 totally different climate circumstances (solar and cloudy) – actually fortunate that it was the start of springtime in Porto.

The 5 predominant subjects I coated:

  1. Onboarding
  2. Personalisation
  3. “My Crew” mode
  4. “Factors” inside “Retailer”
  5. Edit Menu

1 – Onboarding 🚀

The onboarding has a circulate and logic that assist gamers be launched to the sport. It’s clear and simple to comply with. However typically, it’s too closed and doesn’t let gamers discover the totally different modes. Some areas are launched with out context: it’s tough to know their objectives and the place they’re localised. They’re typically launched even when it’s unimaginable to do something inside them.

Giving gamers extra freedom and area to discover the modes as they’re launched might enhance the time spent on onboarding, however the profit could be a greater understanding of every.

🔎 Challenges

  1. The background is simply too difficult to see, and we lose the chance to show the place the participant is;
  2. Due to level 1, once we depart the “Kick-off” to examine the unblocking of the supervisor mode, we lose observe of how to return once more to the supervisor, and we aren’t given context or an summary of this mode;
  3. Some options and rewards are “launched”, however it isn’t clear how they work (e.g., Alternate and FIFA factors);
Analysing the UX Design of the FIFA Cell App
Screenshot of the Alternate function

4.  Not potential to depart onboarding: that is irritating when exploring after unblocking some options and when we have to right a setting (e.g., language and graphics).

Screenshot of a second throughout onboarding

💪 Potential options/suggestions

  • Give a bit extra mild to the background for the reason that subsequent step on the onboarding is already very seen;
  • Permit exploration after the introduction of “My Crew” mode as a substitute of forcing customers to return to “Kick-off” – study context and multiple technique to do one thing;
  • Take extra time to standardise the onboarding whereas exploring new modes;
  • Solely open new modes if it’s potential to do one thing inside them.
  • Relating to problem 4: have the shut button reveals up after clicking on the darkened space;
  • Set off onboarding to proceed if a participant goes again to a mode that was left;
Redesign with a recomendation: chance of closing tutorial

2 – Personalisation 🥸

Personalisation choices can be found in FIFA Cell. Individuals who love soccer have a deep ardour for his or her staff – after they play FIFA; they know what staff they wish to select. They could wish to see all the pieces out there, the groups they know, and the leagues they comply with, however it’s the one near their coronary heart that’s normally picked.

Most enhancements relating to this theme are intently related to having extra effectivity to find and choosing their groups and giving them a higher sense of management by seeing their crest and equipment in strategic locations.

🔎 Problem and alternative

  1. To pick Crest, the participant must undergo 44 choices of leagues to see every one of many crest choices inside – it’s divided into 4 sections, and whereas in search of a selected league, it retains leaping from part to part or takes too lengthy to seek out the wished one;
  2. (Alternative) After choosing a Crest, onboarding takes gamers to decide on a staff title, and the placeholder is empty;
Screenshot of the “Choose your emblem” function

💪  Potential options/suggestions

  • Search league or staff enter textual content;

Answer 1 follows the usual of opening a modal to insert the search knowledge, divided between league and staff.

Redesign with suggestion (answer 1, half 1)
Redesign with suggestion (answer 1, half 2)

Answer 2 has the search immediately on the display and may seek for a league or staff.

Redesign with recomendation (answer 2)
  • Relating to problem 2: Default placeholder with the staff title of the chosen emblem.
Redesign with recomendation
  • (Alternative) After choosing the Equipment, the gamers on the menu have one other equipment.
Redesign with alternative

3 – ”My Crew” mode 🤝

“My Crew” mode has some advanced info on the display with many actions that may be carried out. It’s straightforward to lose visibility and readability of each actions and components. On this mode, most likely as a result of complexity in comparison with others, it’s seen (no pun supposed) in buttons and a few copy. Consistency with the remainder of the app is adopted. Nonetheless, I’d say it requires a little bit of thought. It’s additionally a pure consequence of elevated complexity: it requires elements and patterns to evolve sooner than a design system may be constructed and migrated. This can be a present combat we’re having in my every day job, so I can really feel these pains each single day.

I used the “My staff” mode to mirror on these two subjects.

🔎 Problem and alternative

  1. Default icons with out textual content are tough to interpret;
Screenshot of “My Crew” function with solely icons buttons highlighted – the default ones

2.  Buttons with out hierarchy confuse gamers on the right way to carry out actions – typically the principle motion has a button with darker mild, or there isn’t any major button on the display;

Screenshot of a display of the sport with a number of buttons with hierarchy mismatched – on this case a major button swap
Screenshot of a display of the sport with a number of buttons with hierarchy mismatched – on this case no major motion button, even when there’s a major motion right here

3.   Modals have a “Affirm” button that appears to substantiate the motion however solely closes the modal (e.g., Practice).

Screenshot of a pop-up with “Affirm” for an info-only element

💪  Potential options/suggestions

  • Have buttons with textual content by default and add textual content to the “disguise button textual content”;
Redesign with all buttons with textual content
  • Rework among the buttons’ hierarchies
Redesign with the first motion with the lighter color
Redesign with the first motion signaled
  • Put an in depth button and assessment the textual content indicating the motion in modals that would not have any motion, solely info to point out;
Redesign with an in depth button as a substitute of a affirm button 

4- ”Factors” inside “Retailer” 💰

“Factors” inside “Retailer” even have some points relating to consistency of the place and when the quantity of “Factors” are proven. To avoid wasting area on the display, the quantity of “Factors” is displayed when the data is required or can be utilized, however in some instances, it takes extra clicks than it ought to. There’s even an instance of a commerce of factors that’s enabled even when there are not any factors out there. This forces the participant to click on to purchase one thing, and solely after that motion do they discover they don’t have sufficient foreign money.

🔎 Challenges

  1. Solely reveals whole coaching factors and league factors the participant has after choosing a pack and never on the shelf with all packs;
Screenshot of the sport

2.  On “Each day Coaching”, the full coaching factors are somewhere else – however it’s additionally informing gamers of the quantity to purchase one thing;

Screenshot of the sport

3.  Even when it’s not potential to purchase one thing, the button continues to be enabled and opens a modal to inform customers it’s not potential to purchase, forcing two clicks.

Screenshot of the sport

4.  Typically, the quantity is just not seen instantly, forcing a click on to see it.

Screenshot of the sport

💪 Potential options/suggestions

  • At all times present the full factors on the highest bar: if hidden, they need to seem anytime they’re referenced on the display, particularly in the event that they impression an motion.
Redesign with suggestion highlighted
  • Disable the button because it occurs in different places (e.g., when shopping for boosts).
Redesign with suggestion (instance 1)
Redesign with suggestion (instance 2)

Like I mentioned earlier than, soccer has quite a lot of feelings concerned. I used to be wanting on the app and seen the Edit menu is a spot the place it might enhance much more on a personalisation stage with the additional advantage of higher usability and aesthetics. This menu is at present a modal with a set of choices with no hierarchy.

🔎 Challenges

  1. The settings menu has very heavy and repetitive visuals;
  2. No hierarchy of the choices and subheadings makes it difficult to learn.
Screenshot of the sport
Screenshot of the sport

💪 Potential options/suggestions

  • Have a web page for these settings as a substitute of a modal.
  • Work on the web page’s graphical hierarchy and visualise among the chosen settings (e.g., equipment, crest, and so on.)
Full redesign of a possible edit web page

Closing Ideas

It’s at all times nice to have a brand new problem, particularly on a platform I don’t normally work with, which on this case is cellular. It compelled me to be extra cautious and research extra about it. I used to be fortunate that it was a couple of recreation that I knew and grew up taking part in that’s beloved by my household and mates.

The most important problem was understanding the suggestions individuals had been giving me. A few of them had quite a lot of concepts and pains that had been larger than the app itself, and others had been extra concerning the console recreation and on-line choices (thanks, everybody, for being sort sufficient to supply me your time… and video games to check). It was the primary time I might choose a gaggle of testers that mirrored several types of gamers in only a few minutes.

Since I began this evaluation with out an concept in thoughts, I needed to method it differently – I had too many paths to discover and quite a lot of details about the totally different points. I organised the data and determined what subjects to jot down about, owing to the necessity to focus the time and assets out there to me. Mockingly, it additionally explains why some points like consistency and visibility are current in among the app modes – time and scope constraints occur in any respect ranges, even once we are simply presenting the data. It’s as much as us to know what might make a greater expertise for our customers, no matter they’re, and regardless of the platform.


Sign up or grow to be a SUPERJUMP member to hitch the dialog.