Angry Birds VR

Brief

One of my first tasks at Resolution Games was to Improve the Discover Levels UI for players, an interface that players could browse custom-created content in a variety of filers so that the list of results was a bit more informative to how the filtering worked.

Process

First thing I did was to look at the layout we had and what I thought could help convey the levels inside better.

I mapped out the improvements in terms of adding the stats that are driving the sorting order onto the level blocks.

PREVIEW

From here, you can see that we currently used a flat colour but I thought a preview of the level would help sell the level easier while browsing rather than click to find out.

STATS

For the thumbnails, the addition of metadata for the popularity, difficulty, and recentness could be added as the main info instead of the number or a widget on the edge of each block.

GRID

For the grid itself, I suggested maybe looking at the larger sizes of content to be able to see the data better.

After this began my explorations into the interface itself, how could we make the filters and searching easier?

Tabs and filters

Here I began looking at how the tab and filter system could work easier together. Instead of existing independently, Type and Time could be subset filters of each other!

bUT WHAT ABOUT CONTENT?

These layouts seemed nice and simple, but the test is also to see how it looks with the content thumbnails inside! Here I began adding the various versions of thumbnails I made earlier to see what visually was easy to understand and looked correct visually.

Iteration Time!

Here you can see the thumbnails and grids brought up to higher fidelity to match the in-game UI, next was the interface suggestions!

And to see the content inside these interfaces!

Feedback and Changes

After showing this to the theme, they still liked the current interface UI but loved the thumbnail suggestion of stats on the block and said to go in this direction. We also had some time constraints for development so it would have to be the same interface and only the thumbnail component could be changed.

Back to the wireframes to iterate and refine.

The main final design suggestions were:

Thumbnails

• Add the position number in the corner

• Add an Icon to represent the filter itself as the main item on the thumbnail

• Relevant Text strings under the icon

Layout

• Colour between tabs for easier recognition when tabs are changed

Final Implementation

After this, due to constraints and time, we could not change the materials of the UI so we were left with the current version, which you can see down below!