I joined the project in 2011 as the main UI Designer on Playdom's mobile team to port some of the company's most successful FB games. I designed the mobile experience and created new mobile first features.
As an agent of S.H.I.E.L.D., your job is to assemble and lead a team of heroes to keep New York City safe from an unknown threat. Recruit your friends as Allies to increase your power and save the world from super villains in the newest Facebook RPG, Marvel: Avengers Alliance.
I started working in mobile gaming in 2011 porting the most successful Facebook games to mobile and 10 years later, I am porting AAA PC games to mobile. Key points to remember when porting is not to be tied down by the original designs as they may not be mobile friendly, and also that the UX has to be reconsidered for the mobile experience.
Click into any of the images below to see the progression of the design.
Below are some screenshot from the original FB game and the initial versions of the mobile port where the same graphics from the FB game were used. The heavy frames took up a huge footprint on a limited screen and the UI that is too small to be legible and too small to be tapped.
It is important to think about how the graphics will look like on the platform you are developing for. While many of the design decisions worked for the web platform, it did not translate well to mobile. In the examples below, I removed a lot of the heavier frames, changed shapes to match mobile standards, and increased size of UI for readability and access.
After setting a new styleguide with the new and improved button styles and overall visual treatment, I then moved on to work on updating the UX for each feature. While the UI aspect of design improves the polish and usability, changing the UX to something that is mobile friendly makes a even bigger impact.
With facebook games on web, many of the behaviours are informed by pre-existing desktop standards. Games on the web platform also have the advantage of having a huge amount of screen real estate to present information to the user. Since we don't have this luxury on mobile, we really have to reconsider the user experience.
This was the process of redesigning the home screen. In the original FB version, all the important call to actions are on the bottom right hand corner. Two of the most important buttons would be Missions, PVP, and probably Resume. In version 1 of the mobile port, 'Missions' was given visual importance by being the largest button in the middle of the screen. While there is nothing visually wrong with this, version 1 is lacking in terms of all the floating UI elements and also for not considering the mobile user.
Keeping the thumb hot zones on a mobile device in mind, I then redesigned the layout to give Missions and PVP the highest importance both in UI and UX. I also replaced Settings with the Resume button and demoted Settings to a much less important part of the screen considering that usually settings isn't really accessed often. Below you can see how I redesigned the Team Management screen with similar thoughts in mind.
Initially we tried to keep the same amount of information on one screen in a layout that would be friendlier for mobile devices. However, even with that, the information is very crowded and the method for character selection would not be able to scale at all. This is why in version 2 of the design, I split out Team Management into 2 screens where the user first taps the hero, which will then bring them to the next screen which is dedicated to the hero information.