NFL Mobile Casino Lobby

Designing information architecture for Nfl game

overview

My company started developing a mobile casino game in collaboration with a major IP. As the lead UX designer, I was assigned the task of bringing everyone's ideas together and developing the new UI and navigation model for a virtual slot app. The main lobby and Slot HUDs play a crucial role in determining both early and long-term user retention. 

my contributions

I worked as the sole UX designer on this project. I was responsible for working directly with leadership across disciplines and provided: 

  • UX strategy based on findings from consumer insights (UX research) 

  • Design recommendations based on heuristics analysis

  • Feature recommendations informed by comparative studies 

  • User flows and wireframes 

getting started

I began by meeting with stakeholders and team members to understand the market and its users, as well as the core loop proposed by the leadership. It became apparent that there was an immediate need to define the information architecture of our game. Specifically, we needed to begin that process by tackling the main lobby. 

whats going in the game?

I started taking inventory of what features were planned to go into the game. I set up meetings with our Sr.Director of Game Design and VP of Product to discuss their priorities as they related to the core game loop.
 
I found that there were six must have features for MVP.  

Feature Organization and Accessibility

Strategic Feature Placement: Prioritize the placement of key features like missions, stores, and bonuses within easy reach, considering thumb-friendly zones for mobile users.


Compartmentalization of Features: Group related features effectively, as seen in Lightning Link, but ensure that each feature is distinct and easily identifiable.

Design and Aesthetics


Differentiation of Interactive Elements: Ensure buttons and interactive elements are distinctly designed, addressing the differentiation issue seen in Lightning Link.


User Engagement and Retention

Optimized Touch Points: Design the game's touch points—such as the missions, bonuses, and battle pass features—to be easily accessible, drawing from the successful elements in Cashman and Cash Frenzy.


Additional Considerations

Avoid Redundancy: Eliminate redundant navigation elements to reduce confusion and streamline user experience, learning from the issues identified in Cash Frenzy.

Ergonomic Design: Focus on ergonomic considerations, ensuring that the features we want to prioritize are in the most visible and easy to reach places.

Filter and Sorting Features: Incorporate an effective filter system for slots, improving on the execution seen in Slotomania, ensuring that the icons used are appropriate and intuitive.

Recommendations

I created 4 designs based on these observations. 

designs

The team saw significant potential with each of the proposals above. After engaging in discussions with stakeholders and user researchers, we narrowed down to two designs that we could present to our users for usability testing and research. To add context for users I created additional screens demonstrating settings menus and the slot gameplay screen.

I had two design approaches for the lobby and both seemed viable. One was to adopt a method similar to Cash Frenzy and use a central tray to house all secondary features and live-ops. This would help with scalability in the future. The second was to highlight our missions, which were going to be the main retention feature for the title. 

getting the team involved

For our testing, we wanted to focus on recognition and user sentiment towards the design. We asked a combination of open-ended questions about sentiment and expectations and questions about what they would expect certain elements to do or where they would expect features to be located. 

testing

We were working simultaneously to run testing and iterate designs while also making higher-fidelity mock-ups to provide proof of concept to executives. I created a prototype with this feedback in mind that captured the app launch sequence. I also created a high-fidelity prototype in collaboration with the art team to demonstrate visuals and branding. 

lobby prototype

We tested 10 participants who were mobile casino players between the ages of 27 and 52. Their response was overwhelmingly in favor of the first option. However there were certain design decisions about option two they appreciated. The main take aways are as follow:

results

Sample of questions asked in user tests: 

General Layout and Design

Overall Impression: "What are your initial thoughts about the layout and design of this screen?"

Element Placement: "How do you feel about the placement of buttons and features on the screen? Is there anything that feels out of place or hard to find?"

Design Appeal: "What do you find most visually appealing about this interface, and why?"

Specific Elements

Mission Button: "Where would you expect to find tasks to perform to earn rewards? How easy was it to locate?"

Collections: "Where would you expect to find things you've earned as you progress in the game? How confident are you in your answer?"

Daily Bonus: "Where would you expect to find free coins?"

Store Button: "How does the store button appear to you in terms of visibility and accessibility?"

Hamburger Menu: "What are your expectations when you see the hamburger menu? 

What would you expect to see in buttons X,Y, Z? 

User Experience and Sentiment​

Icon Recognition: "Were there any icons or buttons whose function was not immediately clear to you?"

Layout Preferences: "If you could change anything about the layout or size of these elements, what would it be and why?"

User Expectation: "Did anything in the layout behave differently than you expected? If so, what was it and how did it differ from your expectation?"

Overall Feedback

Improvement Suggestions: "What improvements or changes would you suggest for this interface?"

Final Thoughts: "Do you have any other thoughts or feedback about the design that you would like to share?"

Once I understood what features were key, I decided to perform a competitive analysis using games from our portfolio and games that were major competitors in the space. 

Competitive Analysis

Key Takeaways


Space Management and Layout:

Efficient use of space for features and store offerings ensures a non-overwhelming, simple layout.

Related features are closely positioned, similar to successful interfaces like Cash Frenzy, with core functionalities centralized on two heads-up displays (HUDs).


Design and Feature Layout:

Redundant navigation elements and complex sub-menus create confusion and impair navigation efficiency.

Consistent feature layouts, such as the Slots Filter System, help users navigate more intuitively. However, small tiles limit the information display, affecting user comprehension.


Touch Points and Accessibility:

Critical features like the wheel, daily, and hourly bonuses are easily accessible.

The expandable tray feature enhances ease of access to various functionalities.

Less accessible components include the store, profile, and missions, highlighting a need for better accessibility in these areas.


Icon Design and User Recognition:

Consistent labeling of icons and badges on slot tiles improves recognition and user experience.

However, inconsistent icon designs across different features can hinder functionality and user interaction.


Overall User Experience:

There is a notable disparity in the accessibility of features, with some like the piggy bank and retention features being more user-friendly than others such as the store and profile options.

Enhancing label clarity and simplifying navigation could significantly improve overall user experience and feature engagement.

option 2: missions focused

option 1: scalability

social & profile together

Users much preferred the profile screen on the second option. They felt social, mail, and settings made sense there. 

don’t cover slots space

Users all responded negatively to the missions asset being placed over the slot area.

no large mission icon

Users felt that having a huge missions asset in the middle at the bottom was odd and made the game seem one dimensional.

keep features visible

Users much preferred option one because they could see everything all at once.

mission consistency

User's preferred option one because the missions asset stayed in the top HUD in lobby and slots play.

make info easy to find

Users made it clear that they all liked the information icon on the slot bottom HUD.

project goals

Lean on industry standards and user testing to validate design decisions in order to create the main lobby of a new mobile slot game where the core MVP features of the game will be located. 

mvp features

missions

Side missions and quests add additional goals to increase user motivation, which resulted in improved retentions.

battle pass

rewards milestones to help track users' progression.

collections

Users find high-value memorandums themed around our exciting IP.

daily bonus

A standard feature across all mobile casino games that provides users an allowance of coins

store

Key feature for any free to play mobile game

promotions

Product driven sales that tie into the store and live ops

Mobile Casino Lobby

Designing and testing wireframes for a brand-new mobile game.

overview

My company started developing a mobile casino game in collaboration with a major IP. As the lead UX designer, I was assigned the task of bringing everyone's ideas together and developing the new UI and navigation model for a virtual slot app. The main lobby and Slot HUDs play a crucial role in determining both early and long-term user retention. 

my contributions

I worked as the sole UX designer on this project. I was responsible for working directly with leadership across disciplines and provided: 


UX strategy based on findings from consumer insights (UX research) 

design recommendations based on heuristics analysis

feature recommendations informed by comparative studies 

user flows and wireframes 

project goals

Lean on industry standards and user testing to validate design decisions in order to create the main lobby of a new mobile slot game where the core MVP features of the game will be located. 

getting started

I began by meeting with stakeholders and team members to understand the market and its users, as well as the core loop proposed by the leadership. It became apparent that there was an immediate need to define the information architecture of our game. Specifically, we needed to begin that process by tackling the main lobby. 

whats going in the game?

I started taking inventory of what features were planned to go into the game. I set up meetings with our Sr.Director of Game Design and VP of Product to discuss their priorities as they related to the core game loop.
 
I found that there were six must have features for MVP.  

missions

Side missions and quests add additional goals to increase user motivation, which resulted in improved retentions.

battle pass

rewards milestones to help track users' progression.

collections

Users find high-value memorandums themed around our exciting IP.

daily bonus

A standard feature across all mobile casino games that provides users an allowance of coins

store

Key feature for any free to play mobile game

promotions

Product driven sales that tie into the store and live ops

mvp features

Once I understood what features were key, I decided to perform a competitive analysis using games from our portfolio and games that were major competitors in the space. 

Competitive Analysis

Key Takeaways


Space Management and Layout:

Efficient use of space for features and store offerings ensures a non-overwhelming, simple layout.

Related features are closely positioned, similar to successful interfaces like Cash Frenzy, with core functionalities centralized on two heads-up displays (HUDs).


Design and Feature Layout:

Redundant navigation elements and complex sub-menus create confusion and impair navigation efficiency.

Consistent feature layouts, such as the Slots Filter System, help users navigate more intuitively. However, small tiles limit the information display, affecting user comprehension.


Touch Points and Accessibility:

Critical features like the wheel, daily, and hourly bonuses are easily accessible.

The expandable tray feature enhances ease of access to various functionalities.

Less accessible components include the store, profile, and missions, highlighting a need for better accessibility in these areas.


Icon Design and User Recognition:

Consistent labeling of icons and badges on slot tiles improves recognition and user experience.

However, inconsistent icon designs across different features can hinder functionality and user interaction.


Overall User Experience:

There is a notable disparity in the accessibility of features, with some like the piggy bank and retention features being more user-friendly than others such as the store and profile options.

Enhancing label clarity and simplifying navigation could significantly improve overall user experience and feature engagement.

The team saw significant potential with each of the proposals above. After engaging in discussions with stakeholders and user researchers, we narrowed down to two designs that we could present to our users for usability testing and research. To add context for users I created additional screens demonstrating settings menus and the slot gameplay screen.

I had two design approaches for the lobby and both seemed viable. One was to adopt a method similar to Cash Frenzy and use a central tray to house all secondary features and live-ops. This would help with scalability in the future. The second was to highlight our missions, which were going to be the main retention feature for the title. 

getting the team involved

option 2: missions focused

option 1: scalability

For our testing, we wanted to focus on recognition and user sentiment towards the design. We asked a combination of open-ended questions about sentiment and expectations and questions about what they would expect certain elements to do or where they would expect features to be located. 

testing

We tested 10 participants who were mobile casino players between the ages of 27 and 52. Their response was overwhelmingly in favor of the first option. However there were certain design decisions about option two they appreciated. The main take aways are as follow:

results

Sample of questions asked in user tests: 


General Layout and Design

Overall Impression: "What are your initial thoughts about the layout and design of this screen?"

Element Placement: "How do you feel about the placement of buttons and features on the screen? Is there anything that feels out of place or hard to find?"

Design Appeal: "What do you find most visually appealing about this interface, and why?"

Specific Elements

Mission Button: "Where would you expect to find tasks to perform to earn rewards? How easy was it to locate?"

Collections: "Where would you expect to find things you've earned as you progress in the game? How confident are you in your answer?"

Daily Bonus: "Where would you expect to find free coins?"

Store Button: "How does the store button appear to you in terms of visibility and accessibility?"

Hamburger Menu: "What are your expectations when you see the hamburger menu? 

What would you expect to see in buttons X,Y, Z? 

User Experience and Sentiment​

Icon Recognition: "Were there any icons or buttons whose function was not immediately clear to you?"

Layout Preferences: "If you could change anything about the layout or size of these elements, what would it be and why?"

User Expectation: "Did anything in the layout behave differently than you expected? If so, what was it and how did it differ from your expectation?"

Overall Feedback

Improvement Suggestions: "What improvements or changes would you suggest for this interface?"

Final Thoughts: "Do you have any other thoughts or feedback about the design that you would like to share?"

social & profile together

Users much preferred the profile screen on the second option. They felt social, mail, and settings made sense there. 

don’t cover slots space

Users all responded negatively to the missions asset being placed over the slot area.

no large mission icon

Users felt that having a huge missions asset in the middle at the bottom was odd and made the game seem one dimensional.

keep features visible

Users much preferred option one because they could see everything all at once.

mission consistency

User's preferred option one because the missions asset stayed in the top HUD in lobby and slots play.

make info easy to find

Users made it clear that they all liked the information icon on the slot bottom HUD.

We were working simultaneously to run testing and iterate designs while also making higher-fidelity mock-ups to provide proof of concept to executives. I created a prototype with this feedback in mind that captured the app launch sequence. I also created a high-fidelity prototype in collaboration with the art team to demonstrate visuals and branding. 

lobby prototype

User Interface and Layout

Streamlined Navigation: Develop a straightforward and intuitive navigation system. Avoid overly complex sub-menu structures to enhance user experience.

Clear Layout: Emphasize simplicity in the game's layout, making sure it's visually appealing yet not overwhelming, similar to the successful approach of Heart of Vegas.

Feature Organization and Accessibility

Strategic Feature Placement: Prioritize the placement of key features like missions, stores, and bonuses within easy reach, considering thumb-friendly zones for mobile users.

Compartmentalization of Features: Group related features effectively, as seen in Lightning Link, but ensure that each feature is distinct and easily identifiable.

Design and Aesthetics

Consistent Iconography: Design icons that are both visually consistent and clearly convey their function. This addresses the inconsistency issue observed in Heart of Vegas.

Differentiation of Interactive Elements: Ensure buttons and interactive elements are distinctly designed, addressing the differentiation issue seen in Lightning Link.

User Engagement and Retention

Optimized Touch Points: Design the game's touch points—such as the missions, bonuses, and battle pass features—to be easily accessible, drawing from the successful elements in Cashman and Cash Frenzy.

Additional Considerations

Avoid Redundancy: Eliminate redundant navigation elements to reduce confusion and streamline user experience, learning from the issues identified in Cash Frenzy.

Ergonomic Design: Focus on ergonomic considerations, ensuring that the features we want to prioritize are in the most visible and easy to reach places.

Filter and Sorting Features: Incorporate an effective filter system for slots, improving on the execution seen in Slotomania, ensuring that the icons used are appropriate and intuitive.

Recommendations