- November 2014 to November 2015
- UX, UX, Wireframing, Prototyping
- Square Enix
Building with blocks
The main layout for the site is determined by a fluid grid system that is able to sort and position different content block sizes dynamically adjusting them to the viewport size of the browser.
There's no sizes defined in the content stream but aspect ratios instead, with this we ensure the content will always look good on any screen without being limited by pixels, in our case we've used 3x2 and 2x2 blocks for articles or important call to actions such as registration buttons, big news and such...then some other smaller blocks like the 2x1 that serves as a game alert when another rival has attacked you, and finally, 1x1 blocks for all other alerts this last set of 1x1 blocks are also defined by a colour code.
Triad Wars events and alerts system uses a 5-colour coded system to define and differentiate between the different kind of event types.
These colours are Red (for game alerts and attacks), Green (for game events such as achievements and milestones), Yellow (for leaderboard and rankings), Blue (for official communications and news) and Grey (for forum and web-related stuff).
Responsive web design
As part of the site redesign, I created new versions for many areas of the website, working closely with the front-end developers in order to polish and refine those points where the design needed a more flexible layout or a new breakpoint within the HTML.
A big part of the site is filled with exclusive content and articles that are pulled out from a CMS. The article screen could be an article about some game features, a Twitch stream video from a new release's gameplay or promotions and more marketing oriented content.
At this point there was a share function in place that wasn't working in the best way possible in terms of UX, part of the redesign of this screen was to create a new sharing flow that would encourage users to share and promote the site's content.
2 different share process were tested, a custom designed solution vs a native sharing process, at the end we included the native option which required less clicks and also gives users a sense of security and familiarity improving user's sharing ratio.
The game is full or challenges, rewards and rankings. This screen is the leaderboards' selection screen.
Each leaderboard has an associated icon to it, and by tapping on it the player would access to that leaderboard table.
When an user access a leaderboard screen, he will be able to see 5 other player's position, 2 above and 2 below plus the very first player on that specific rank.
By clicking or tapping the 1st player on the list, the ranking will change with an animation to a "top 5" kind of table, showing the player who's on top of the list. This shortcut is helpful as it gives the player a better idea of how the top table is doing it, most games that include some sort of "ranking navigation" has some chunky controls or the response time is very slow.
This animation is part of the UX documentation that's been delivered to the dev team in order to give a better insight on the final animation look and feel.
Landing in the right place
One of the tasks that had more iterations was the landing/download page. As one of the crutial parts of the whole site, we went through several design reviews before signing it off.
Some stakeholders had the concern of not having a flexible medium to test, adapt and change this landing page on the go without much trouble in order to get as many people through the registration and download flow.
For this, I designed different templates/layouts where some elements were dynamic, and with help of a CMS the marketing team would be able to manage, edit and launch different campaigns or strategies.
After many changes, this is the version that is currently online and serves as registration process for new players coming from different sites.
This is a quick clickable prototype I created to showcase some transitions and to test some user flows across different processes such as sharing content, login/logout and accesing different areas of the website.
Feel free to explore and navigate through the mobile site on this prototype.
Want to check how the project is going on?
Go ahead and check Triad Wars website, if you are a gamer you can also download the game and check it out, it's quite cool!.