The dashboard is a back-end management tool developed as part of the Electronic Table Game (ETG) system tailored to the regulated casino industry. It allows the operator to access real-time information as well as to configure table and tournament settings.
Old ETG Dashboard.
During onboarding, we walked through the navigation and various features of the software. We discovered that the interface was unintuitive and the tasks seemed complicated to perform. As a result, the efficiency and usability of the operations were negatively affected. There were several pain points that we identified:
The project was given a tight deadline, so the goal was to improve the overall user experience without changing much of the existing design system and features.
The old design separated table views on the left and all actions on the right. The unorganized information architecture resulted in poor user interaction and losing focus.
People, by nature, love to organize things. When there's an order, people know where things go and where to find them.
-- According to The Morville/Rosenfield IA Principles.
With the new design approach, we grouped and sorted things that were logical, and went with one column layout with a master panel sticking to the bottom. The master panel allows the user to perform major actions quickly in any page view.
To align the product team and developers with a broader picture of the user flow, I mapped out the hierarchy of elements and user flow across existing content and features.
User flowchart for Main Tables.
The old design lacked visual indication which made it difficult to identify the type of each table, so a list of legends was created to color-code them. The “Zoom in” button was also repositioned to be right on top of each table after tapping once for comprehensive flow.
Tables are color-coded to enhance visual indication. The bottom panel allows easy access to perform primary actions on the selected table.
We use popups for decision points and confirmation.
User can see a table in detail after tapping "Zoom In"
Instead of going to a new page, the user can manage individual seats without losing sight of the table.
User flowchart using high-fidelity mockups for the Main Tables page.
Showing the flows from selecting a specific type of table to manage player seats.
Once we figured out the flow and content for the table view, we then moved on to the tournaments page using the same logic.
List of tournaments designed using card style to present data at a glance.
List of tables in a tournament. Information is designed for better readability.
Tournament in Seating state.
A look at the table in detail in a running tournament.
The operator can manage a tournament in both the list view and detail view.
We were able to finish the project promptly, though I wished to touch upon other aspects if we were given more time, such as improving system feedback and redefining the design system. However the client needs were addressed with smoother and more direct user flow, thus speeding up operator efficiency with less trial and error. The revised foundation and layout would help future parts of the product to be built on top of.
