WARFRAME MARKET UI REDESIGN

WaRFRAME MARKET

The Market allows players to preview, purchase, and gift items available in game but without the waiting time of crafting. From research, a common complaint from new players was the fact that being able to craft a blueprint of a warframe instead of buying it was not clear at all. This was a major pillar of the redesign. The new market would clearly show that purchasing, crafting, and gifting are available with also information of the abilities / stats being seen clearly.

Warframe Purchase V1

I know what you’re thinking… this UI is so cluttered it’s like old WOW. I’m an avid believer of, if you have an idea for a layout, try it out and then disregard it. So here I divided the multitabbed window into two, left would be purchase and right would be crafting so that new players could clearly see the difference. I played around with the idea of the 3d warframe being in the middle so the players could see them doing their abilities which may incentivize to purchase.

Warframe Screen V2

Here I’m starting to declutter the initial version, buying and gifting is centered on screen, information is on the left, and crafting on the right.

Warframe Screen V3

At this point after talking with other members of the UI team, I tried to follow the UI style of using tooltips for information such as crafting and purchasing as the feel of the UI is meant to be clean and minimal. The main interactions are shown on the left now with the stats underneath for quick view. I still liked the idea of the warframe doing their abilities on screen as a bit of visual fun but that lead to the next design iteration.

Warframe Screen V4

The team wished to use the existing dioramas so the UI I was working with last time was overlayed on an exisiting diorama. The abilities would be moved to the buy tooltip as a 3d model on 2d ui proved difficult.

Warframe Screen V5

Last iteration I did of the Warframe Screen which brought the text above the buttons and this was then handed over to Kalin on the Team would would take over to match font styling and iconography and items such as bundles and bundle breakdowns, you can see the final version of the UI that is in game at the bottom of the page. She did an absolutely amazing job.

Weapons V1

When the initial warframe screen was designed, I also translated it over to what the weapons would look like. I played with the idea of being able to try the firing animations which I thought might be a cool mechanic that users may try out and incentivize purchasing.

Weapons V2

Here the tabbed window on left was removed just like the warframe screen with the ability to buy / gift on the bottom of the screen.

Weapons Screen V3

Here was the last version of the weapons screen I did. This was before the decisions of the warframe screen using the diorama and putting stats in tooltips.

Item Pack V1

Here was the first iteration of bundles UI. The components of the bundle need to be clearly seen, here it follows how the existing item windows looked but with the current UI styling. Console quantity picker was also tested to make sure it would fit on screen.

Item Pack V2

This version updated with the newer button style and tooltip showing the package contents.

Item Pack V3

Item Pack V4

As the design for the warframe screen was heading to the final iterations, those changes were mimicked here to see the fit. The issue of item image resolution came up so resizing was needed.

Resources V1

Currently items such as resources used an overlay dialog and that was tried in this style for the market too.

Resources V2

The second last iteration matched the theme of the other types of items but the problem of asset sizing also came up here so would need to be reduced.