NHL 19 HUT Companion App — Shawn Dhillon

The Challenge

As a personal project, I wanted to design a companion App for NHL 19 Hockey Ultimate Team. I came up with the idea so that users can interact with their team while on the go.

The Project

I designed multiple features for the Application. Users can edit their lineups from within the App, by swapping out players from their collection. They can also view things like their team’s position in the standings. Users can buy, sell and search for players at fixed prices.

My Role

For this project, I brainstormed ideas as well as conducted user research. I was also responsible for the creation of the user flows, information architecture maps and both the low and high fidelity prototypes.

Date

January 2019 to May 2019

User Research

The main goal of my research was to first learn why an Application like this would be useful. I wanted to find out what the most popular aspects of Hockey Ultimate Team were. As an owner of every past NHL game, I started looking at HUT from years past to try and learn what aspects of the mode would be suitable for an App.

I found that users wanted to be reminded of their upcoming games, as well as their team’s current position in the overall standings. Furthermore, I learned that users wanted to be able to change their lineup on the fly without having to constantly load up the game.

UserFlow Diagram

High Fidelity/Final Designs

For the home screen, I wanted to make the main features of Hockey Ultimate Team available to the user. Here, they can see daily card deals provided by the shop. The cards that are displayed here are decided by the rarity of the card as well as the quantity of that specific card as available in the shop. The more of that card there is in the shop the more likely it would appear as a daily deal.

As a result of my user research I added a team standings table, as well as the ability to see who the user was playing for their next game. Furthermore, they could also tap on the active lineup section to view it.

From the active lineup screen, users are able to view the players from their collection who are also placed in their active lineup. Similar to Hockey Ultimate team in NHL 19, users can place players in any position regardless of their actual position.

Users, can also swap out players from their collection. This is simply done by tapping the Swap Player button. The button directs the user to the my collection screen so users can pick the players they want.

From the marketplace screen, users can scroll through the most popular cards to decide which players they would like to purchase in order to enhance their team.

Users are also offered a choice to purchase their cards using gold coins or green coins for a set price.

Alternatively, users can search the marketplace by player name in order to find the specific cards they are looking for. This can be done by tapping the search button in the top right corner of the app. They can also filter their results by lowest or highest price as well as sort the cards by newest or oldest.

Once users have decided on which cards they want to buy, tapping on the corresponding price adds the card to their cart which can be accessed by tapping the cart button located in the top right corner next to the search button.

From here, the users cart will be displayed showing all the cards they have picked along with their quantity and individual prices. Users are also able to see the respective card types as well as the name of the player.

Finally, users can tap the checkout button to purchase their cards using their coins. The cards will be automatically transferred to their collection after their purchase.

By tapping the edit button from the cart, users can remove a card one at a time by tapping the x button or edit the number of cards they want to purchase by tapping the pencil.

Depending on the edits to the user’s cart the total price will also change. By tapping the done button, the user will be taken back to the search results screen in case they want to look for more cards.

After users purchase their cards, they are directly deposited into their collection. The collection is comprised of two screens. The first screen provides the user with a brief overview of the cards they own.

As well as a section for cards that they want to sell for a fixed price. Users can long press on a card to see an expanded view of that card. Or users can short press to be directed to the second screen for their collection. Users can also long press on a card in their sell pile to view it.

On the secondary collection screen, users can see all the cards they have in their collection in order by their respective position.

By long pressing on a respective card in their collection, user’s can view the card as well as a brief description of the player. Along with the player’s hand and size information. Also displaying the price the user purchased the card for.

By viewing the card, users also have the option to sell their card for half of their original purchase price.

Image retrieved from unsplash.com

Users can view their profile by tapping on the menu in the top left corner of the screen. The profile screen displays information such as the username, email and a button to disable and reenable notifications. The profile information is automatically taken from the user’s EA account. However, users can also edit their details from within the application.

Self Reflection

While working on this personal project, I learned how to sharpen my design skills. Primarily, with this project I focused on layout and color choice. As I found through my second coop experience that I was weak on color theory. Furthermore, I learned how to refine my wireframing skills, I did this by creating both high and low fidelity prototypes. I also learned how to make the prototypes interactive to make them testable, using the prototype feature in Adobe XD.